Related Topics
CSS
HTML
<article>
<h2>My Favorite Books</h2>
<p>Here are some of my favorite books:</p>
<ul>
<li>The Catcher in the Rye</li>
<li>To Kill a Mockingbird</li>
<li>Pride and Prejudice</li>
</ul>
</article>
The “section” element, on the other hand, is used to group related content together within a page, such as a chapter or section of a book, or a section of a long article. The content within a “section” element should be thematically related and have a common heading or title. For example:
<section>
<h2>Chapter 1: The Adventure Begins</h2>
<p>Once upon a time, in a land far, far away...</p>
<p>...</p>
</section>
<section>
<h2>Chapter 2: The Quest for the Magic Amulet</h2>
<p>Our heroes set out on a perilous journey...</p>
<p>...</p>
</section>
By using semantic elements like “article” and “section” in your HTML code, you make it easier for search engines, screen readers, and other assistive technologies to understand the structure and meaning of your content, which can help improve accessibility and search engine optimization.
<article>
<hgroup>
<h1>Introduction</h1>
<h2>About HTML5</h2>
</hgroup>
<p>HTML5 is the latest version of the Hypertext Markup Language (HTML) used to create websites and other online content.</p>
</article>
In this example, the <hgroup> element groups together the main heading (<h1>Introduction</h1>) and a subheading (<h2>About HTML5</h2>) that provide context for the article. The <p> element contains the actual content of the article.
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>Photo of a beautiful landscape</figcaption>
</figure>
In this example, the <figure> element groups together an image with a caption that describes it. The <img> element is used to display the image, while the <figcaption> element contains the caption.
Another use case of <figure> and <figcaption> is for embedding videos, where the <figure> element can be used to group the video player with its caption, and the <figcaption> element can provide additional information or a transcript of the video.
Overall, the <figure> and <figcaption> elements provide a way to semantically link together media objects and their associated descriptive content, which can improve accessibility, usability, and search engine optimization of web content.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.