Articles → HTML 5 → Articles And Sections In Html5
Articles And Sections In Html5
Software Requirement
- Any text editor like notepad for writing code
- Any browser which supports HTML 5
Technical Knowledge
Semantic HTML
Benefit Of Using Semantic HTML
- Semantic HTML is easy to understand and maintain
- Semantic HTML enables effective search engine optimization
Semantic HTML Vs Presentational HTML
‘Article’ And ‘Section’ Markups?
- Section → If the enclosed contents are related then we use section
- Article → If the enclosed contents are independent then we use the article
Article on global warming
Subheading 1
Content 1
Subheading 2
Content 2
Subheading 3
Content 3
<article>
<h1>Article on global warming</h1>
<section>
<h2>Subheading 1</h2>
<p>Content 1</p>
</section>
<section>
<h2>Subheading 2</h2>
<p>Content 3</p>
</section>
<section>
<h2>Subheading 3</h2>
<p>Content 3</p>
</section>
</article>
Output
Click to Enlarge
How ‘Div’ Is Different From ‘Article’ And ‘Section’ Markups?
- div should be used for styling purposes (by applying CSS) whereas article and section should not be used for styling purposes.
- If the contents are not related to each other then div markup should be used whereas if the content is related then we should use article or section markups
Browser Support
Internet Explorer | Firefox | Chrome | Safari | Opera | Edge |
---|
9.0 | 4.0 | 6.0 | 5.0 | 11.1 | Yes |
Video