Overview of HTML

HTML structures web content using elements, which are defined by tags (e.g., <p>, <div>). Elements can contain content, other elements, or be self-closing (e.g., <img>). They often accept attributes (e.g., class, id, src) to modify behavior or appearance.

  • Syntax: <tagname attribute=”value”>content</tagname> or <tagname attribute=”value” /> (self-closing).
  • Document Structure: Every HTML page starts with a <!DOCTYPE html> declaration, followed by an <html> root element containing <head> (metadata) and <body> (visible content).
  • Attributes:
    • Global attributes: Apply to most elements (e.g., class, id, style, title, data-*).
    • Element-specific attributes: Unique to certain tags (e.g., src for <img>, href for <a>).

Categories of HTML Elements

HTML elements are grouped by function. Below are the main categories, with details and examples for key elements in each.

1. Document Metadata

Elements that define metadata, scripts, and styles, typically inside <head>.

  • Elements:
    • <title>: Sets the page title (displayed in browser tab).
    • <meta>: Defines metadata (e.g., character set, description).
    • <link>: Links external resources (e.g., CSS files).
    • <style>: Embeds CSS styles.
    • <script>: Includes JavaScript code or links to scripts.
  • Attributes:
    • <meta>: charset, name, content.
    • <link>: rel, href, type.
    • <script>: src, defer, async.

2. Structural Elements

Elements that define the page’s layout and hierarchy.

  • Elements:
    • <html>: Root element of the document.
    • <body>: Contains all visible content.
    • <header>: Represents introductory content or navigation.
    • <footer>: Contains footer content (e.g., copyright).
    • <main>: Defines the main content area.
    • <section>: Groups related content.
    • <article>: Represents standalone content (e.g., a blog post).
    • <aside>: Contains tangential content (e.g., sidebars).
    • <div>: Generic container for styling or scripting.
  • Attributes: Mostly global (class, id, etc.).

3. Semantic Elements

Elements that add meaning to content, often overlapping with structural elements.

  • Elements:
    • <nav>: Defines navigation links.
    • <figure>: Wraps self-contained content (e.g., images) with <figcaption>.
    • <time>: Represents dates or times.
    • <mark>: Highlights text for emphasis.
    • <address>: Indicates contact information.
  • Attributes: Global attributes, plus element-specific (e.g., datetime for <time>).

4. Text-Level Elements

Elements for formatting or linking text.

  • Elements:
    • <h1> to <h6>: Headings for hierarchy (<h1> is highest).
    • <p>: Paragraphs for blocks of text.
    • <a>: Hyperlinks to other pages or resources.
    • <strong>: Indicates important text (bold by default).
    • <em>: Emphasizes text (italic by default).
    • <span>: Inline container for styling or scripting.
    • <br>: Inserts a line break.
    • <hr>: Represents a thematic break (horizontal line).
  • Attributes:
    • <a>: href, target (e.g., _blank), rel.
    • Global attributes for others.

5. Lists

As covered in your previous question, HTML supports three list types.

  • Elements:
    • <ul>: Unordered list (bullet points).
    • <ol>: Ordered list (numbers, letters).
    • <dl>: Description list (terms and details).
    • <li>: List item (for <ul> and <ol>).
    • <dt>, <dd>: Term and description (for <dl>).
  • Attributes:
    • <ol>: type, start, reversed.
    • Global attributes.

6. Media Elements

Elements for embedding images, videos, and audio.

  • Elements:
    • <img>: Embeds images.
    • <video>: Embeds videos.
    • <audio>: Embeds audio files.
    • <source>: Specifies media sources (used inside <video> or <audio>).
    • <iframe>: Embeds external content (e.g., YouTube videos).
  • Attributes:
    • <img>: src, alt, width, height.
    • <video>/<audio>: src, controls, autoplay, loop.
    • <iframe>: src, width, height, allow.

7. Forms

Elements for user input and data submission.

  • Elements:
    • <form>: Defines a form.
    • <input>: Accepts user input (e.g., text, checkbox).
    • <textarea>: Multi-line text input.
    • <button>: Submits or triggers actions.
    • <select>, <option>: Dropdown menus.
    • <label>: Associates text with inputs for accessibility.
  • Attributes:
    • <form>: action, method (e.g., GET, POST).
    • <input>: type (e.g., text, email, checkbox), name, value.
    • <select>: name, multiple.

8. Tables

Elements for tabular data.

  • Elements:
    • <table>: Defines a table.
    • <tr>: Table row.
    • <th>: Table header cell.
    • <td>: Table data cell.
    • <thead>, <tbody>, <tfoot>: Group table sections.
  • Attributes: Global attributes; deprecated ones like border should use CSS.

9. Interactive Elements

Elements for dynamic or collapsible content.

  • Elements:
    • <details>: Creates a disclosure widget (expandable content).
    • <summary>: Defines the visible heading for <details>.
    • <dialog>: Represents a dialog box or modal.
  • Attributes:
    • <details>: open (shows content by default).
    • <dialog>: open.
Tags
#html #html tutorial #web design #website

Related Posts

HTML Attribute and Value Lists & Tutorial Web design
April 15, 2025

HTML Attribute and Value Lists & Tutorial

HTML attributes provide additional information or functionality to HTML elements, modifying their behavior, appearance, or…