Going beyond the basics: more HTML elements to know

Once you're comfortable with foundational HTML — tags, page structure, and semantic markup — the next step is expanding your toolkit. A range of additional elements let you handle everything from quoted text and collapsible content to embedded media, forms, and tables.

Elements for structuring text content

Several elements are designed specifically to shape text content, adding structure and meaning. These work well on their own or nested inside other elements like headers and lists.

Quoting sources with <blockquote>

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

The <blockquote> element is for longer quotations that span multiple lines. It creates unique indentation and alignment in the browser and uses both an opening and closing tag. You can nest other elements — such as paragraphs, lists, or headers — inside a <blockquote>, making it flexible for citing excerpts from other works or reference material. This becomes especially useful when you're pulling content from external sources and want to visually set it apart.

Collapsible content with <details> and <summary>

FAQ sections and supplemental information are a common pattern on product pages, travel sites, and knowledge bases. Rather than displaying everything at once, the <details> element offers a disclosed widget with built-in toggle functionality. Users click to open or close the widget, controlling when the extra content is visible. To name the widget itself, you use the <summary> element.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Labeling visuals with <figure> and <figcaption>

The <figure> element creates self-contained content that relates to the main content, commonly an image, chart, or table. Paired with <figcaption>, it provides a way to label that visual content directly. 

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

Marking dates and times with <time>

The <time> element adds semantic meaning to dates and times, making them machine-readable. This is valuable for content like scheduling an appointment, publishing a timestamped blog post, or browsing archives. It can represent a 24-hour clock time or a date adjustable for timezone and location, and it requires both an opening and closing tag.

<details>
   <summary>Details</summary>
   Additional Information
</details>

Setting document metadata with <title>

Every web page has a <title> element that appears in the browser tab, and it plays a key role in search results. Search engines use this title to display a linked list of relevant pages when users search keywords. You can make it short and direct or something longer and more descriptive — the goal is to accurately describe the page's content.

<title>Sarah's Favorite Food Recipes</title>

Embedding external content with <iframe>

The <iframe> element inserts content from another source directly into your web page. Typical use cases include embedding a payment gateway, displaying a map, or pulling in a page from another domain — like a Wikipedia article — inside a framed window. The browser renders the external content in a rectangular frame, creating a navigation experience without leaving your page.

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Tracking progress with <progress>

When you need to show progress on a task — long videos, courses, or multi-step applications — the <progress> element is the right fit. It displays a visual bar with a background color that can vary in size. Two optional attributes are available: max, which sets the total value (a floating-point number), and value, which indicates how much progress has been completed.

<progress max="100" value="30"> 30% </progress>

Adding graphics with <canvas>

To draw graphics and animations in real time, the <canvas> element is your starting point. You place the element in the HTML, but it requires JavaScript to actually create and manipulate the graphics. This makes it a good choice when you need interactive visual output that goes beyond static images.

<canvas id="canvas"></canvas>

Building tables with rows and cells

Tables are a straightforward way to organize information, especially for tabular data you'd otherwise keep in a spreadsheet. They are built from several cooperating elements:

  • <table> creates the table itself — the container for all rows and columns.
  • <tr> defines a row of cells within the table.
  • <th> is used for the header cell of a group of cells.
  • <td> creates individual cells and holds the actual content.
<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>