html articles
The article element is the perfect opportunity for the developer to include a piece of content that will be separate from the rest of the content.
Definition and Usage
The <article> tag specifies independent, self-contained content.It can be a social media post, user comment , news story or even a blog post.
Three articles with independent, self-contained content.
<article> <a href="/html-section-tag"> <h2>HTML <section> Tag</h2> <div> <time> 13th May 2022</time> <div>HTML</div> </div> </a> </article> <article> <a href="/html-lang"> <h2>HTML lang Attribute</h2> <div> <time> 12th May 2022</time> <div>HTML</div> </div> </a> </article> <article> <a href="/html-audio-tag"> <h2>HTML Audio Tag</h2> <div> <time> 11th May 2022</time> <div>HTML</div> </div> </a> </article>
article html
Note: The
<article>element does not render as anything special in a browser.
It’s important to know that if we have an article with long content then we can use sections inside the article element to logically break the content.
<!--article start--> <article> <h1>Hello World</h1> <section> <h2>Hello from California</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> <section> <h2>Hello from London</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> <section> <h2>Hello from Austria</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> </article> <!--article end-->
articles html
As you can see from the example above, the article element can have many section elements.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | Chrome | Edge | Mozilla | Safari | Opera |
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Note Keep in mind that if the content is self-contained then prefer using
<article>tag. You can use CSS to style the<article>element.
Default CSS Settings
Most browsers will display the <article> element with the following default values.
article { display: block; }