Syntax
The HTML <article> component is used as follows:
1 |
<article>
|
2 |
<!-- Content material goes right here -->
|
3 |
</article>
|
Instance
Let’s say you will have a weblog and wish to write an article about the advantages of meditation. Right here’s an instance of how you might construction your HTML utilizing the <article> component:
1 |
<predominant>
|
2 |
<article>
|
3 |
<h2>The Advantages of Meditation</h2> |
4 |
<p>Meditation has been proven to scale back stress, enhance focus, and increase general well-being. This text will discover the various advantages of this historical observe.</p> |
5 |
<img src="meditation.jpg"alt="An individual meditating"> |
6 |
<h3>Diminished Stress</h3> |
7 |
<p>Research have proven that meditation can decrease cortisol ranges, the hormone related to stress. Usually working towards meditation can scale back nervousness and make you're feeling extra relaxed in your every day life.</p> |
8 |
<h3>Improved Focus</h3> |
9 |
<p>By means of meditation, you possibly can enhance your capacity to pay attention and keep centered on the duty at hand. This may be particularly useful for many who battle with distractions or have a busy thoughts.</p> |
10 |
<h3>Higher Sleep</h3> |
11 |
<p>By quieting your thoughts and enjoyable your physique, meditation may help you go to sleep sooner and luxuriate in a extra restful sleep. It will also be efficient in treating insomnia and different sleep issues.</p> |
12 |
</article>
|
13 |
</predominant>
|
Outcome
Attributes
This component solely consists of world attributes.
World attributes embrace, for instance, the class attribute. This attribute is used to use a category to the component, which can be utilized to fashion the content material or apply JavaScript habits. Right here’s an indication:
1 |
<article class="featured"> |
2 |
<!-- Content material goes right here -->
|
3 |
</article>
|
The featured class has been utilized to the <article> component on this instance. This class may very well be used to fashion the article uniquely, akin to making it stand out on the web page.
Content material
The <article> component can comprise any HTML content material, together with headings, paragraphs, pictures, movies, and extra. The content material needs to be self-contained and deal with a single matter or thought. When utilizing a number of <article> components on a web page, it’s good observe to incorporate a heading inside each, which may enhance the general readability of the content material.
- There are a number of different sectioning components, helpful for splitting up content material on a web page in a descriptive method:
<article>,<apart>,<type>,<header>,<footer>,<predominant>,<nav>, and<part>are all sectioning components.
Did You Know?
- The
<article>component was launched in HTML5 to mark up self-contained content material semantically. - Utilizing the
<article>component can enhance the accessibility and search engine optimization of your web site, because it helps engines like google and display screen readers perceive your content material’s construction.
