9. HTML Semantics and Layout

Let’s welcome Section 9. We’ll explore the idea of HTML semantics, how they affect the structure and also affect the accessibility and SEO of your pages. We’ll cover the semantic elements introduced by HTML5, understand good grouping, and outline a simple page design using HTML5. Finally, we’ll cover the basics of responsive design and take our first steps into the very powerful layout tools Flexbox and Grid.

Let’s get rolling!

9.1 Semantic Elements in HTML5

In HTML5, semantics means to use meaningful elements that clearly define what they represent within a document. We use semantic HTML to give browsers and developers a better understanding of the structure of our content.

What Are Semantic Elements?

Semantic elements are HTML tags that carry meaning about the content contained within them. Beyond demarcating structural sections on a page, the elements do include further information regarding the role of content contained within them. There is, for example, the <header>element that defines the header of a page and the element that defines the footer.

Common Semantic Elements:

• <header>: Defines the header section that often contains a logo, navigation or a heading element.
• <nav>: Represents links for navigation.
• <article>: It represents self-standing content, like a blog article .
• <section>: It represents a collection of interrelated content.
• <aside>: It is representing content which are considered to be sidebars in the content.
• <footer>: The footer defines its own section, which contains copyright information and links.

Why Do We Need Semantics?

• Accessibility: The semantic elements make the site accessible to screen readers thereby easily navigable for users with disabilities.
• SEO: For the content and structured flow to be more intelligible to Google’s web crawlers.
• Maintainability: it makes code more readable and maintainable.

Sample:

<header>
  <h1> Bienvenue sur Mon Site</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
</header>
<section>
  <article>
    <h2>Blog Post Title</h2>
    <p>This is a blog post about semantic HTML.</p>
  </article>
  <aside>
    <p>Related Articles</p>
  </aside>
</section>
<footer>
  <p>&copy; 2024 My Website</p>
</footer>

Each section has a clear purpose in this example, and the use of semantic tags also helps users and machines understand the content structure.

Activity:
Take a simple HTML page you’ve built before and swap that over to use semantic HTML5 elements instead of just div and span.

9.2 Grouping Elements

Grouping elements together are an absolute must for any well-structured web pages. HTML5 offers you several ways in which you can group content so the structure and layout of your page flow better.

The div Element:

Although not semantic in origin, the <div> element is frequently used for content grouping when no other semantic element is applicable for presentation-oriented grouping. It then simply becomes a catch-all container.

<div class="wrapper">
  <div class="content">
    <h2>Title</h2>
    <p>Some content goes here...</p>
  </div>
</div>

The section Element:

The <section> element It is the semantic way to wrap related content. A section is used when defining a piece of a page that has a common purpose or topic.

<section>
  <h2>About Us</h2>
  <p>This is the About Us section...</p>
</section>

Article Element:

Article element allows you to add a self-contained piece of content, such as a blog post, news article, or comment.

<article>
  <h2>Blog Title</h2>
  <p>Blog content...</p>
</article>

Aside Element:

The <aside> element should be used for content that’s tangentially related to other content but can stand apart, like a sidebar or a list of related posts.

<aside>
  <h2>Related Posts</h2>
  <ul>
    <li>Post 1</li>
    <li>Post 2</li>
  </ul>
</aside>

Task:
Try to replace your old semanticless HTML with semantic HTML by using the tags like <section>, <article> and <aside> to structure content.

9.3 Simple Structure in HTML5

Till now, we have discussed semantic elements, and it’s our turn to create a simple structure. A structure typically consists of these parts:

• Header: Typically, the head section is used for elements such as the logo, navigation menu, and so on, or introductory texts.
• Main Content: The very center part of the page – wrapped inside a <main> or <section>.
• Sidebar (optional): This part contains additional related content, often wrapped inside an <aside>.
• Footer: The bottom part of the page, usually including copyright information, links, or any other kind of information that the author of the document wants to add.

Basic HTML5 Layout Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Layout</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <article>
      <h2>Main Article</h2>
      <p>This is the main content of the website...</p>
    </article>
    <aside>
      <h2>More Information</h2>
      <p>This is some related information in the sidebar.</p>
    </aside>
  </section>

  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
</body>
</html>

It’s a simple, yet working, structure of a web page. The header section holds the navigation menu of your site, the section contains the main content and sidebar, and the footer is at the bottom of the page.

Activity:
Develop your own HTML5 layout with semantic elements for different sections, and try to emulate the layout of a real website.

9.4 Responsive Design with HTML

Responsive design is the best practice to create web pages that will be great, both on being viewed from a mobile phone or desktop computer. HTML5 also makes use of fluid layouts and media queries for more straightforward creation of responsive designs.

Viewport Meta Tag:

Responsiveness to any web page is obtained by adding the following meta tag in the head section every time,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This way, the webpage would scale correctly on all devices.

Media Queries:

Media queries are used in CSS. Styles vary by properties of a device such as width, above, etc.

Example of a Media Query:

/* Styles for screens wider than 768px */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Styles for screens smaller than 768px */
@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

This will let the site layout-even typography-be laid out in adaptation to screen size to be viewed perfectly by users on any device.

Activity:
Use media queries to create a responsive layout that responds to screen width (like hiding the sidebar when screens are very small).

9.5 Introduction to Flexbox and Grid Layout

HTML Good Flexible Layouts Two of the most powerful tools available in CSS to accomplish this are Flexbox and Grid. These two layout models provide the power to build complex, responsive designs that one does not have to deal with in float or table-based layouts.

Flexbox:

The Flexbox layout model excels at distributing space along a single axis, either horizontal or vertical.

Basic Flexbox Example:

<style>
  .container {
    display: flex;
    justify-content: space-around;
  }
  .item {
    width: 30%;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

With Flexbox, elements inside the container are automatically laid out in a row and evenly space.

Grid Layout:

The CSS Grid layout model is a two-dimensional layout system which one can use to create more complex, yet responsive grid-based designs.

Basic Grid Example:

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }


</style>

<div class="grid-container">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
  <div>Grid Item 3</div>
</div>

Here, the grid system allows for specifying columns and rows to create structured, responsive layouts.

Activity:
Create a responsive layout using Flexbox or Grid to create a gallery or blog post layout.

Quizz Time:

Conclusion

In this section, we covered:

• Importance of semantic elements in HTML5.
• Meaningful grouping of content with section, article and aside tags.
• Basic layouts on HTML5 based on semantic elements
• Responsive layouts by use of media queries
• Flexbox and Grid layout models for larger layouts.

Mastering semantics and layouts in HTML is the way to structured, maintainable, and accessible websites. In the next section, we are going to discuss Multimedia and Embedding Content where we will focus on a very important part of embedding youtube videos, multimedias, etc in your website.