The article component is a self-contained piece of content material inside a HTML doc. Through the use of the article component you might be saying that all the content material inside that component is unbiased from the remainder of the web page. Examples of standalone content material could possibly be a weblog publish, information article, discussion board publish or a product evaluate. By including this construction to a HTML doc you’ll be able to assist bots like engines like google and assistive applied sciences like display readers perceive the place on the web page the first content material is.
Easy methods to use the article component
The article component has a gap tag (<article>) and a closing tag (</article>) all the content material for that article is contained between the opening and shutting tags. Right here is an instance of it in follow:
<article>
<h1>Title of the article</h1>
<p>Physique content material</p>
<p>Physique content material</p>
<creator>Creator identify</creator>
</article>With this instance we’re containing the heading of the article, the content material utilizing paragraph tags and the creator of the article. We are able to have a number of articles on the identical web page, every time we use the article component it’ll then symbolize a definite piece of content material.
What to keep away from
Though we will have a number of article parts we don’t wish to overuse this component. It’s best to make use of it for items of content material which can be absolutely unbiased and self-contained from some other content material on the web page.
The content material inside the article must also be marked up accurately, defining what’s the headers, the physique textual content, creator particulars, quotes and so forth. Additionally keep away from nesting an article inside each other. Every article mustn’t embrace different articles inside it.
Accessibility
As with different HTML parts, the advantage of utilizing the article component over utilizing a div component or nothing in any respect is that it provides which means to the content material, which can assist assistive digital instruments like display readers. A display reader or one other software will recognise the article component and know that all the content material contained inside that component is an unbiased piece of content material.
Extra HTML tutorials
Written by
Michael Gearon is a Senior Interplay Designer at Authorities Digital Service (GDS) in Cardiff. Michael Gearon is among the authors of The Tiny CSS Tasks e book, printed by Manning Publications. Beforehand Mike was a product designer on the GoCo Group together with GoCompare, MyVoucherCodes and WeFlip. As effectively working for manufacturers in South Wales like BrandContent and HEOR.
