In this lesson, we will explore two important HTML5 semantic elements: <main> and <figure>. These elements help to structure your HTML documents in a meaningful way, making them more accessible and easier to understand for both developers and search engines.
The <main> Element
What is the <main> Element?
The <main> element is used to encapsulate the dominant content of the <body> of a document. The content inside the <main> tag should be unique to the document and not repeated across other documents (like navigation links, sidebars, or footers).
Key Points:
- Unique Content: The
<main>element should contain the primary content of the document. - One per Document: There should only be one
<main>element per document. - Excludes Repeated Content: It should not include content that is repeated across multiple pages, such as headers, footers, or navigation links.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Main Element</title>
</head>
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Main Content Heading</h2>
<p>This is the main content of the page. It is unique to this document and provides the primary information that the user is looking for.</p>
</main>
<footer>
<p>Website Footer</p>
</footer>
</body>
</html>The <figure> Element
What is the <figure> Element?
The <figure> element is used to encapsulate media content such as images, illustrations, diagrams, code snippets, etc., along with their captions. It is typically used in conjunction with the <figcaption> element to provide a caption for the media content.
Key Points:
- Encapsulates Media: The
<figure>element is used to group media content and its caption. - Optional Caption: The
<figcaption>element is optional but recommended for providing context to the media content. - Self-contained: The content inside the
<figure>element should be self-contained and related to the main content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Figure Element</title>
</head>
<body>
<main>
<h2>Article Heading</h2>
<p>This article discusses the importance of semantic HTML elements.</p>
<figure>
<img src="example-image.jpg" alt="An example image">
<figcaption>An example image demonstrating the use of the figure element.</figcaption>
</figure>
<p>Additional content of the article goes here.</p>
</main>
</body>
</html>Practical Exercise
Task:
Create an HTML document that uses both the <main> and <figure> elements. The document should include a header, a main content area with an article, and a figure with an image and caption.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Main and Figure Exercise</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Understanding Semantic HTML</h2>
<p>Semantic HTML elements provide meaning to the web content, making it easier for search engines and screen readers to understand the structure of the page.</p>
<figure>
<img src="semantic-html.jpg" alt="Diagram of semantic HTML elements">
<figcaption>Diagram illustrating various semantic HTML elements.</figcaption>
</figure>
<p>Using semantic elements like <code><main></code> and <code><figure></code> improves the accessibility and SEO of your web pages.</p>
</article>
</main>
<footer>
<p>© 2023 My Blog</p>
</footer>
</body>
</html>Conclusion
In this lesson, we covered the <main> and <figure> elements, which are essential for creating well-structured and semantically meaningful HTML documents. The <main> element is used to encapsulate the primary content of the document, while the <figure> element is used to group media content with captions. By using these elements, you can improve the accessibility and SEO of your web pages.
Next, we will delve into more advanced HTML techniques to further enhance your web development skills.
HTML Course
Module 1: Introduction to HTML
- What is HTML?
- Setting Up Your Environment
- Basic HTML Structure
- HTML Tags and Elements
- Creating Your First HTML Page
Module 2: HTML Text Formatting
- Headings and Paragraphs
- Text Formatting Tags
- Lists: Ordered and Unordered
- Blockquotes and Preformatted Text
Module 3: HTML Links and Media
Module 4: HTML Tables
Module 5: HTML Forms
- Creating a Basic Form
- Form Elements: Input, Textarea, and Select
- Form Attributes and Validation
- Submitting Forms