HTML Tutorials

New semantic elements:
,
,
, ,

New Semantic Elements in HTML

New Semantic Elements in HTML

<main>

The <main> element is used to define the main content of a document or application. It should contain content that is unique to the page and is not repeated across pages (such as headers, footers, or navigation).

Example usage:

<main>
    <h1>Main content goes here</h1>
    <p>This is the core content of the page.</p>
</main>

<figure>

The <figure> element is used to represent content that is referenced from the main content, such as images, illustrations, diagrams, or code snippets. It can be used with the <figcaption> element to provide a caption.

Example usage:

<figure>
    <img src="image.jpg" alt="Example image">
    <figcaption>This is a caption for the image.</figcaption>
</figure>

<figcaption>

The <figcaption> element is used to provide a caption for a <figure> element. It helps to describe or explain the content within the figure, such as images or illustrations.

Example usage:

<figure>
    <img src="chart.jpg" alt="Chart">
    <figcaption>This chart shows the yearly growth.</figcaption>
</figure>

<mark>

The <mark> element is used to highlight parts of the content. It is useful for marking text that is of particular relevance, such as search results or important terms.

Example usage:

<p>This is a highlighted term.</p>

<time>

The <time> element is used to represent a specific time or date, which can be used for machine-readable date and time formats. It allows you to specify dates, times, or durations.

Example usage:

<time datetime="2025-02-25">February 25, 2025</time>

logo

HTML

Beginner 5 Hours
New Semantic Elements in HTML

New Semantic Elements in HTML

<main>

The

<main> element is used to define the main content of a document or application. It should contain content that is unique to the page and is not repeated across pages (such as headers, footers, or navigation).

Example usage:

<main>
    <h1>Main content goes here</h1>
    <p>This is the core content of the page.</p>
</main>

<figure>

The

<figure> element is used to represent content that is referenced from the main content, such as images, illustrations, diagrams, or code snippets. It can be used with the
<figcaption> element to provide a caption.

Example usage:

<figure>
    <img src="image.jpg" alt="Example image">
    <figcaption>This is a caption for the image.</figcaption>
</figure>

<figcaption>

The

<figcaption> element is used to provide a caption for a
<figure> element. It helps to describe or explain the content within the figure, such as images or illustrations.

Example usage:

<figure>
    <img src="chart.jpg" alt="Chart">
    <figcaption>This chart shows the yearly growth.</figcaption>
</figure>

<mark>

The

<mark> element is used to highlight parts of the content. It is useful for marking text that is of particular relevance, such as search results or important terms.

Example usage:

<p>This is a highlighted term.</p>

<time>

The

<time> element is used to represent a specific time or date, which can be used for machine-readable date and time formats. It allows you to specify dates, times, or durations.

Example usage:

<time datetime="2025-02-25">February 25, 2025</time>

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.