<article> : Article Contents element

by

Introduction

The ‘<article>‘ element in HTML is like a container for a complete and standalone piece of content, such as a news article, blog post, or forum post. The ‘<article>‘ element wraps the entire content of the article. In this tag we make article in parts which contain :

Header : It contains the heading of the article.

Section : It contain main body of the article.

Footer : It contain the end part of article.

Here is an example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Article Title</title>
</head>
<body>

    <article>
        <header>
            <h1>Your Article Title</h1>
            <p>Published on <time datetime="2024-01-12">January 12, 2024</time></p>
        </header>

        <section>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi rerum voluptas, quos odio, velit, reprehenderit perspiciatis doloribus eius obcaecati soluta ipsa! Facere cum quo officia expedita libero molestiae odit illo!</p>
        </section>

        <footer>
            <p>Author: John Doe</p>
            <p>Contact: john.doe@example.com</p>
        </footer>
    </article>

</body>
</html>

Output :

Use of <article> tag in HTML :

Here are some key uses of the ‘<article>‘ element :

1. Organizing Content :

  • It provides a way to structure your HTML documents, making them more organized and semantically meaningful.
  • Helps differentiate a specific piece of content from other parts of the document.

2. Search Engine Optimization (SEO) :

  • Search engines use semantic HTML to understand the structure and context of content on a webpage.
  • Proper use of the ‘<article>‘ element can improve the search engine ranking of individual pieces of content.

3. Accessibility :

  • Assists screen readers and other assistive technologies in understanding the document structure.
  • Enhances accessibility for users with disabilities by providing a clear indication of standalone content.

4. Syndication :

  • The ‘<article>‘ element signals to web crawlers and syndication tools that the enclosed content is a complete and shareable unit.
  • Useful for websites that distribute content to various platforms or aggregators.

5. Clear Document Structure :

  • Helps developers and designers create a clear and logical structure for their web pages.
  • Improves code readability and maintenance by encapsulating related content within the ‘<article>‘ element.


Leave a Comment