HTML

Last Updated: 9/19/2022

Semantic Elements

  • Semantic mean meaning
  • A semantic element gives the text meaning so that the browser knows how to display it correctly.
  • Non-semantic elements like <div> and <span>tells nothing about its content.
  • Semantic elements like <article>, sectionclearly defines its content.

List of Semantic Elements

  • <header>: Specifies a header for a document or section
  • <nav>: Defines navigation links
  • <main>: Specifies the main content of a document
  • <aside>: Defines content aside from the page content
  • <article>: Defines independent, self-contained content
  • <section>: Defines a section in a document
  • <footer>: Defines a footer for a document or section
  • <details>: Defines additional details that the user can view or hide
  • <summary>: Defines a visible heading for a <details> element
  • <figure>: Specifies self-contained content, like illustrations, - <figcaption>: Defines a caption for a <figure> element diagrams, photos, code listings, etc.
  • <mark>: Defines marked/highlighted text
  • <time>: Defines a date/time
  • Represents a container for introductory content or a set of navigational links.
  • Typically contains:
    • one or more heading elements
    • logo or icon
    • authorship information
<header>
  <h1>Header</h1>
</header>
  • Defines a set of navigation links.
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main>

  • Specifies the main content of a document.
  • The content should be unique to the document
  • Use only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements.

<aside>

  • Defines some content aside from the content it is placed in (like a sidebar).
  • Content should be indirectly related to the document's main content.
  • Can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
<main>
	<p>some para</p>
	<aside>content</aside>
</main>

<article>

  • Specifies independent, self-contained content.
  • Examples of where the <article> element can be used:
    • Forum posts
    • Blog posts
    • User comments
    • Product cards
    • Newspaper articles
  • Can contain section
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<section>

  • Defines a section in a document.
  • Can contain article
<section>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</section>
  • Defines a footer for a document or section.
  • Typically contains:
    • copyright information
    • contact information
    • sitemap
    • links
<footer>  
<p><a href="mailto:cotnact@example.com">Contact</a></p>  
</footer>

<figure> and <figcaption>

  • figure: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
  • <figcaption>: Defines a caption for a <figure> element. The <figcaption> element can be placed at the top or bottom the img
<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

<details> and <summary>

  • <details>: Specify details that the user can open and close on demand
  • <summary>: Defines a visible heading for the <details> element.
<details>  
<summary>Epcot Center</summary>  
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>  
</details>

<time>

  • Defines a specific time
  • datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.
<p>Open from <time>09:00 AM</time> to <time>06:00 PM</time> every weekday.</p>
<p><time datetime="2022-02-01 16:00">Meeting on 01 Feb 22   4 PM</time>.</p>
Previous
Next