30 Essential HTML Elements for Beginners
- <!DOCTYPE html>
- Defines the document type and HTML version.
- <html>
- The root element of an HTML page.
- <head>
- Container for metadata and links (not visible content).
- <body>
- Container for the visible content of the page.
- <title>
- Specifies the title that appears in the browser tab.
- <meta>
- Provides page metadata (e.g., character set, viewport).
- <link>
- Links external resources, most commonly CSS files.
- <h1> to <h6>
- Defines HTML headings, with <h1> being the most important.
- <p>
- Defines a paragraph of text.
- <a>
- Defines a hyperlink using the `href` attribute.
- <img>
- Embeds an image using the `src` and `alt` attributes (self-closing).
- <ul>
- Defines an unordered (bulleted) list.
- <ol>
- Defines an ordered (numbered) list.
- <li>
- Defines a list item within <ul> or <ol>.
- <div>
- A generic **block-level** container for grouping content (for CSS styling/layout).
- <span>
- A generic **inline** container for grouping content (for CSS styling).
- <header>
- Defines introductory or navigational content for a section or page (semantic).
- <footer>
- Defines the footer for a section or page (semantic).
- <nav>
- Defines a set of navigation links (semantic).
- <main>
- Defines the dominant content of the document (semantic).
- <section>
- Defines a section in a document (semantic).
- <br>
- Inserts a single line break (self-closing).
- <hr>
- Defines a thematic break (horizontal rule).
- <strong>
- Indicates important or serious content (usually renders bold).
- <em>
- Indicates emphasis (usually renders italic).
- <form>
- Defines an HTML form for user input.
- <input>
- Defines an input field (e.g., text, checkbox, radio) (self-closing).
- <label>
- Defines a label for an <input> element.
- <button>
- Defines a clickable button.
- <script>
- Embeds or references executable code (JavaScript).