HTML Semantics

❮ Prev Next ❯

HTML Semantic Elements are HTML tags that convey meaning to the web browser and to the developer, rather than just a physical presentation of the content.

They provide a structure to the HTML document, making it more accessible and easier to understand.

Semantic elements are useful for screen readers and search engines, which can use the structure of the page to better understand its content.

Here are some of the HTML Semantic Elements:

The <head>and <nav>Element

The <head> element represents a container for introductory content or a set of navigational links for a section.

The <nav>element represents a section of the page that contains a collection of navigational links.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <header>
      <h1>Welcome To Kodingkoleji</h1>
      <nav>
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
      </nav>
    </header>
    </body>
</html>

The <main>Element

The <main>element represents the main content of the document.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <main>
      <h1>Our Services</h1>
      <p>We offer a range of services including web design, development, and marketing.</p>
      <nav>
        <ul>
          <li>Web Design</li>
          <li>Web Development</li>
          <li>Online Marketing</li>
        </ul>
      </nav>
    </main>
    </body>
</html>

The <article>Element

The <article>element represents a self-contained piece of content that can be distributed independently from the rest of the page.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <article>
      <h1>How to Create a Responsive Website</h1>
      <p>In this article, we will show you how to create a responsive website using HTML, CSS, and JavaScript.</p>
      <p>First, create a mobile-first layout using a flexible grid system...</p>
    </article>
  </body>
</html>

The <section>Element

The <section>element represents a generic section of the document.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <main>
    <section>
      <h1>Our Team</h1>
      <p>Meet our team of experts who are dedicated to providing you with the best service.</p>
        <ul>
          <li>John Smith - CEO</li>
          <li>Jane Doe - Marketing Manager</li>
          <li>Bob Johnson - Web Developer</li>
        </ul>
      </section>
    </main>
    </body>
</html>

The <aside>Element

The <aside>element represents content that is not directly related to the main content of the page.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <main>
    <aside>
      <h1>Related Articles</h1>
        <ul>
          <li><a href="URL">10 Tips for Designing a Website</a></li>
          <li><a href="URL">How to Improve Your SEO</a></li>
          <li><a href="URL">The Importance of Responsive Design</a></li>
        </ul>
      </aside>
    </main>
    </body>
</html>

The <footer>Element

The <footer>element represents a footer for the document or section.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <main>
    <footer>
      <p> Copyright© 2024 My Website. All rights reserved.</p>
      </footer>
    </main>
    </body>
</html>

Why Semantic Elements?

According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."

Now that we have just learn how to structure our page content using good approach. Lets us see how to use Style Guide to make our page even better in the next chapter.

❮ Prev Next ❯