HTML article Tag - Examples

HTML article

HTML Article <article> tag is used to define an independent, self-contained content in an HTML document.

Article tag is generally used for forum posts, blog posts, news story, etc.

Example

A simple Article element is shown in the following example.

index.html

<!DOCTYPE html>
<html>
    <body>
        <article>
            <h2>Topic 1</h2>
            <p>This is a sample text.</p>
        </article>
    </body>
</html>

Note: HTML Article element starts with the tag <article> and ends with an end tag </article>.

We can have one or more articles in a single document as shown in the following.

index.html

<!DOCTYPE html>
<html>
    <body>
        <article>
            <h2>Topic 1</h2>
            <p>This is a sample text.</p>
        </article>
        <article>
            <h2>Topic 2</h2>
            <p>This is some sample text.</p>
        </article>
    </body>
</html>

Default CSS for HTML article

By default, following CSS properties are set for an Article element.

display: block;

Inline Style for HTML Article Element

We can change the style of Article element through inline styling using style attribute.

In the following example, we have set the color as red for the Article element.

index.html

<!DOCTYPE html>
<html>
    <body>
        <article style="color:red">
            <h2>Topic 1</h2>
            <p>This is a sample text.</p>
        </article>
    </body>
</html>

Apply CSS for HTML Article Element

We can apply CSS for all Article elements using the article tag name.

index.html

<!DOCTYPE html>
<html>
    <head>
        <style>
            article {
              color:red;
            }
          </style>
    </head>
    <body>
        <article>
            <h2>Topic 1</h2>
            <p>This is a sample text.</p>
        </article>
        <article>
            <h2>Topic 2</h2>
            <p>This is some sample text.</p>
        </article>
    </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML <article> tag and went through different examples that cover defining an HTML Article element, and styling it.