| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
1. 'nav' Element
The ‘<nav>‘ element is used to define a section of a document that contains navigation links. This could include a set of links to different pages on the website, different sections within a single page, or other navigational elements.
Purpose:
To group navigation links together in a semantic way, making the content more accessible and easier to understand, particularly for assistive technologies like screen readers.
Key Points:
- Semantic Role: It signifies that the content within it is intended for navigation.
- Not Limited to Menus: While often used for menus, it can also be used for any navigational links.
- Accessibility: Helps improve accessibility by clearly marking navigational sections
Example 1: Website Main Navigation
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
In this example, the ‘<nav>‘ element contains an unordered list (‘<ul>‘) of links (‘<a>‘). This is a common use case where the navigation bar at the top or side of a website contains links to different sections.
Example 2: In-page Navigation
<nav>
<a href="#section1">Section 1</a> |
<a href="#section2">Section 2</a> |
<a href="#section3">Section 3</a>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>Content for section 1...</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Content for section 2...</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>Content for section 3...</p>
</section>
Here, the ‘<nav>‘ element is used for navigation within a single page, allowing users to jump between different sections.
2. 'figure' Element
The ‘<figure>‘ element is used to group media content (such as images, illustrations, diagrams, or code snippets) with their captions or descriptions. It is usually accompanied by a ‘<figcaption>‘ element, which provides a caption or a description for the content inside the ‘<figure>‘.
Purpose:
To semantically group a piece of media with its caption, improving the document’s structure and making it more accessible.
Key Points:
- Standalone Content: The figure should be meaningful on its own.
- Contains Media: Typically contains images, diagrams, code, or even videos.
- Paired with ‘
<figcaption>‘: Often paired with ‘<figcaption>‘, but the caption is optional.
Example 1: Image with Caption
<figure>
<img decoding="async" src="image.jpg" alt="A beautiful scenery of mountains and lakes">
<figcaption>A breathtaking view of the mountains and lakes during sunset.</figcaption>
</figure>
In this example, the <figure> element wraps around an image (‘<img>‘) and its caption (‘<figcaption>‘). The caption helps to describe the image, and both are considered part of the same block of content.
Example 2: Code Snippet with Caption
<figure>
<pre>
<code>
function greet(name) {
return "Hello, " + name + "!";
}
</code>
</pre>
<figcaption>Figure 2: A simple JavaScript function to greet a user.</figcaption>
</figure>
Here, the ‘<figure>‘ element is used to encapsulate a code snippet and its explanation. This is useful in technical documentation or tutorials.
Example 3: Video with Caption
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>Figure 3: A video demonstration of the software in action.</figcaption>
</figure>
This example shows a video wrapped in a ‘<figure>‘ element, with an accompanying caption.
3. 'figcaption' Element
The ‘<figcaption>‘ element is used to provide a caption or description for the content contained within a ‘<figure>‘ element. It can be placed either as the first or last child of the ‘<figure>‘.
Purpose:
To associate a descriptive caption with media content in a way that is semantically meaningful.
Key Points:
- Optional: While commonly used with ‘
<figure>‘, it’s optional. - Placement: Can be placed either before or after the content inside ‘
<figure>‘. - Semantics: It enhances the semantic meaning of the figure.
Example:
<figure>
<img decoding="async" src="forest.jpg" alt="A dense forest">
<figcaption>The dense forest teeming with life.</figcaption>
</figure>
Or, the ‘<figcaption>‘ could be placed before the image:
<figure>
<figcaption>The dense forest teeming with life.</figcaption>
<img decoding="async" src="forest.jpg" alt="A dense forest">
</figure>
In both cases, the ‘<figcaption>‘ describes the image and is part of the same ‘<figure>‘ element, which makes it clear that the caption is related to the image.
- ‘
<nav>‘: Best used for groups of navigation links. Enhances accessibility and clarity in site structure. - ‘
<figure>‘: Ideal for grouping images, diagrams, videos, and code snippets with related captions, making them standalone and meaningful. - ‘
<figcaption>‘: Complements ‘<figure>‘ by providing a description or caption that enriches the media content.
