HTML Element Reference

HTML offers a wide range of elements, each designed for specific purposes to structure, style, and add functionality to a webpage. This comprehensive guide will help you understand the most commonly used HTML elements and their roles.

At The Coding College, we prioritize providing resources that help you build effective and well-structured web pages. Here’s a detailed reference for HTML elements to get you started.

HTML Structure Elements

  1. <html>: The root element of an HTML document.
  2. <head>: Contains metadata, links to stylesheets, and scripts.
  3. <body>: Contains the content of the webpage.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Element Reference</title>
</head>
<body>
  <h1>Welcome to The Coding College</h1>
</body>
</html>

Content Sectioning Elements

  1. <header>: Represents introductory content or navigation links.
  2. <nav>: Defines a section for navigation links.
  3. <main>: Denotes the main content of the page.
  4. <section>: Groups related content.
  5. <article>: Represents standalone content like a blog post.
  6. <aside>: Defines content related to the main content, like sidebars.
  7. <footer>: Contains footer information like copyright details.

Text Content Elements

  1. <h1> to <h6>: Headings, with <h1> being the most important.
  2. <p>: Defines a paragraph.
  3. <span>: Inline container for text styling.
  4. <strong>: Indicates important text (bolded).
  5. <em>: Emphasizes text (italicized).

Media Elements

  • <img>: Embeds images.
    • Example:
<img src="image.jpg" alt="Description of image">
  • <audio>: Embeds audio content.
  • <video>: Embeds video content.
  • <picture>: Provides responsive images.

Table Elements

  1. <table>: Creates a table.
  2. <tr>: Defines a table row.
  3. <td>: Defines a table cell.
  4. <th>: Defines a table header.
  5. <caption>: Adds a caption to the table.

Form Elements

  1. <form>: Creates a form for user input.
  2. <input>: Defines input fields.
  3. <textarea>: Creates a multi-line text input field.
  4. <select>: Creates a dropdown menu.
  5. <button>: Creates a clickable button.

Example:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

Interactive Elements

  1. <a>: Defines hyperlinks.
  2. <button>: Creates clickable buttons.
  3. <details>: Creates a collapsible element.
  4. <summary>: Provides a summary for <details>.

Document Metadata Elements

  1. <meta>: Defines metadata about the HTML document.
  2. <title>: Specifies the title of the document (shown in the browser tab).
  3. <link>: Links external resources like stylesheets.

Scripting and API Elements

  1. <script>: Embeds or references JavaScript.
  2. <noscript>: Provides fallback content for browsers without JavaScript support.
  3. <canvas>: Used for drawing graphics with JavaScript.
  4. <svg>: Defines vector-based graphics.

Global Attributes

  1. class: Specifies a class for an element.
  2. id: Defines a unique ID for an element.
  3. style: Adds inline CSS styles.
  4. title: Adds tooltip text.
  5. lang: Specifies the language of the content.

Conclusion

Understanding the various HTML elements and their usage is key to building structured and accessible web pages. Use this reference as a guide to enhance your development skills.

Visit The Coding College for more in-depth tutorials and examples to master HTML and beyond.

Leave a Comment