- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to define a thematic change in the content in HTML5?
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.
129 Views
