DevDocs

HTML Elements

A comprehensive guide to HTML elements and their usage

HTML Elements Overview

HTML elements are the building blocks of HTML pages. An HTML element is defined by a start tag, some content, and an end tag. HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

The browser does not display the HTML tags, but uses them to determine how to display the content.

Document Structure Elements

These elements define the structure of an HTML document:

  • <!DOCTYPE html> - Defines the document type and version
  • <html> - The root element of an HTML page
  • <head> - Contains meta information about the document
  • <title> - Specifies a title for the document
  • <meta> - Provides metadata about the HTML document
  • <link> - Defines the relationship between the current document and an external resource
  • <style> - Contains style information for the document
  • <script> - Contains client-side JavaScript
  • <body> - Contains the visible page content

Text Content Elements

These elements are used to organize blocks or sections of content:

  • <h1> to <h6> - Headings from most important (h1) to least important (h6)
  • <p> - Defines a paragraph
  • <hr> - Creates a thematic break (horizontal rule)
  • <pre> - Defines preformatted text
  • <blockquote> - Defines a section that is quoted from another source
  • <div> - Defines a division or section

Inline Text Elements

These elements define the meaning, structure, or style of a part of text:

  • <a> - Defines a hyperlink
  • <strong> - Defines important text
  • <em> - Defines emphasized text
  • <span> - Defines a section in a document
  • <br> - Inserts a single line break
  • <code> - Defines a piece of computer code
  • <q> - Defines a short quotation
  • <sub> - Defines subscripted text
  • <sup> - Defines superscripted text
  • <time> - Defines a date/time

Multimedia Elements

These elements are used to embed multimedia content:

  • <img> - Defines an image
  • <audio> - Embeds sound content
  • <video> - Embeds video content
  • <canvas> - Used to draw graphics via JavaScript
  • <svg> - Defines a container for SVG graphics
  • <figure> - Specifies self-contained content
  • <figcaption> - Defines a caption for a figure element

Form Elements

These elements are used to create forms for user input:

  • <form> - Defines an HTML form for user input
  • <input> - Defines an input control
  • <textarea> - Defines a multiline input control
  • <button> - Defines a clickable button
  • <select> - Defines a drop-down list
  • <option> - Defines an option in a drop-down list
  • <label> - Defines a label for an input element
  • <fieldset> - Groups related elements in a form
  • <legend> - Defines a caption for a fieldset element

Table Elements

These elements are used to create tables:

  • <table> - Defines a table
  • <tr> - Defines a table row
  • <th> - Defines a table header cell
  • <td> - Defines a table data cell
  • <caption> - Defines a table caption
  • <thead> - Groups the header content in a table
  • <tbody> - Groups the body content in a table
  • <tfoot> - Groups the footer content in a table
  • <colgroup> - Specifies a group of columns for formatting
  • <col> - Specifies column properties for each column within a colgroup

Semantic Elements

Semantic elements clearly describe their meaning to both the browser and the developer:

  • <article> - Defines an article
  • <section> - Defines a section in a document
  • <header> - Defines a header for a document or section
  • <footer> - Defines a footer for a document or section
  • <nav> - Defines navigation links
  • <aside> - Defines content aside from the page content
  • <main> - Specifies the main content of a document
  • <figure> - Specifies self-contained content
  • <figcaption> - Defines a caption for a figure element
  • <details> - Defines additional details that the user can view or hide
  • <summary> - Defines a visible heading for a details element
  • <mark> - Defines marked/highlighted text
  • <time> - Defines a date/time

Best Practices

When using HTML elements, follow these best practices:

  • Use semantic elements whenever possible to improve accessibility and SEO
  • Always close your tags properly
  • Use lowercase for tag names
  • Quote attribute values
  • Specify the alt attribute for images
  • Use the correct doctype declaration
  • Use the title attribute for additional information
  • Validate your HTML using the W3C Validator
  • Keep your HTML structure clean and well-organized
  • Use comments to explain complex sections of code

On This Page