How to define a thematic change in the content in HTML5?

HTML5 Web Development Front End Technology

In HTML5, semantic markup elements like headings, sections, articles, and divs with particular class or ID attributes can be used to describe a thematic shift in the content. Both human readers and search engine crawlers can benefit from the structure and context that these components contribute to the material. Web designers can build a more user-friendly, understandable website that is simpler to navigate and navigate for all users by utilizing these semantic components. In this answer, we will examine a few of the various HTML5 thematic change definitions.

Approaches

In HTML5, there are various methods for defining a thematic shift, some of which are −

Headings
Sections and Articles
Divs
ARIA Landmarks

Let us look at each approach in detail with examples now.

Approach 1: Using Headings

The first approach to define a thematic change in content in HTML5 is by using “Headings”. H1 through H6 are the six levels of headings offered by HTML5 to indicate the hierarchy and importance of the text. Headings are helpful for identifying the primary subject or motif of a section and for establishing a page's structure.

Example

Here, we will go through an example to implement this approach −

<!DOCTYPE html>
<html>
<head>
   <title>My Website</title>
</head>
<body>
   <header>
      <h1>Welcome to My Website</h1>
   </header>
   <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </nav>
   <main>
      <section>
         <h2>About Me</h2>
         <p>I am a web developer with over 5 years of experience.</p>
      </section>
      <section>
         <h2>My Skills</h2>
         <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>PHP</li>
         </ul>
      </section>
      <section>
         <h2>My Projects</h2>
         <ul>
            <li><a href="#">Project 1</a></li>
            <li><a href="#">Project 2</a></li>
            <li><a href="#">Project 3</a></li>
         </ul>
      </section>
   </main>
   <footer>
      <p>© 2023 My Website</p>
   </footer>
</body>
</html>

Approach 2: Using Sections and Articles

The second approach to define a thematic change in content in HTML5 is by using “Sections and Articles”. The section and article elements are part of HTML5 to aid in grouping material into logical categories. The article element is used for self-contained content, such as blog posts, news articles, or product descriptions, whereas the section element is used to group similar content.

Example

Here, we will go through an example to implement this approach −

<!DOCTYPE html>
<html>
<body>
   <header>
      <h1>My Blog</h1>
   </header>
   <nav>
      <ul> 
         <li><a href="#">Home</a></li>
      </ul>
   </nav>
   <main>
      <article>
         <header>
            <h2>My First Blog Post</h2>
            <p>Published on March 2, 2023</p>
         </header>
         <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </section>
      </article>
   </main>
   <footer>
      <p>© 2023 My Blog</p>
   </footer>
</body>
</html>

Approach 3: Using Divs

The third approach to define a thematic change in content in HTML5 is by using “Divs”. The div element is a general-purpose container that can be used to group content for styling as well as to introduce thematic adjustments. Developers can identify and style various content sections, such as headers, footers, and sidebars, by using particular class or ID attributes.

Example

Here, we will go through an example to implement this approach −

<!DOCTYPE html>
<html>
<head>
   <title>My Portfolio</title>
   <style>
      .header {
         background-color: #f2f2f2;
         padding: 20px;
      }
      .section {
         background-color: #ddd;
         padding: 10px;
      }
      .footer {
         background-color: #f2f2f2;
         padding: 20px;
      }
   </style>
</head>
<body>
   <div class="header">
      <h1>My Portfolio</h1>
   </div>
   <div class="section">
      <h2>About Me</h2>
      <p>I am a web developer with over 5 years of experience.</p>
   </div>
   <div class="section">
      <h2>My Skills</h2>
      <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li>PHP</li>
      </ul>
   </div> 
   <div class="section">
      <h2>My Projects</h2>
      <ul>
         <li><a href="#">Project 1</a></li>
         <li><a href="#">Project 2</a></li>
         <li><a href="#">Project 3</a></li>
      </ul>
   </div>
   <div class="footer">
      <p>© 2023 My Portfolio</p>
   </div>
</body>
</html>

Approach 4: Using ARIA Landmarks

The fourth approach to define a thematic change in content in HTML5 is by using “ARIA Landmarks. The ARIA (Accessible Rich Internet Applications) specification offers several landmark roles, such as header, main, nav, and footer, that can be used to distinguish the various web page parts. These landmarks can help establish a unified framework and increase accessibility for people who use assistive technology.

Example

Here, we will go through an example to implement this approach −

<!DOCTYPE html>
<html>
<head>
   <title>My Website</title>
</head>
<body>
   <header role="banner">
      <h1>My Website</h1>
   </header>
   <nav role="navigation">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </nav>
   <main role="main">
      <section role="region" aria-labelledby="section1-heading">
         <h2 id="section1-heading">Section 1</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </section>
      <section role="region" aria-labelledby="section2-heading">
         <h2 id="section2-heading">Section 2</h2>
         <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
   </main>
   <footer role="contentinfo">
      <p>© 2023 My Website</p>
   </footer>
</body>
</html>

Conclusion

In HTML5, a thematic shift can be defined in a number of ways, including using headings, sections and articles, divs, and ARIA landmarks. The choice of approach will rely on the particular requirements of the project. Each approach has benefits and drawbacks of its own.

Users can browse a page more easily by using headings to give the content a clear, hierarchical structure. For search engine optimization and accessibility, using sections and articles can give the material a more semantic and meaningful structure. The content can have a flexible and scalable structure thanks to the use of divs, which enables developers to give different parts different styles. For people with disabilities, using ARIA landmarks can result in markup that is more comprehensible and accessible.

Diksha Patro

Updated on: 27-Mar-2023

156 Views

Kickstart Your Career

Get certified by completing the course

Get Started