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>
Try It
Output
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
Full Code
<!DOCTYPE html>
<html>
<head>
<title> Articles And Sections In Html5 Demo</title>
</head>
<body>
<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>
</body>
</html>
Browser Support
Internet Explorer | Firefox | Chrome | Safari | Opera | Edge |
---|
9.0 | 4.0 | 6.0 | 5.0 | 11.1 | Yes |
Video
Posted By - | Karan Gupta |
|
Posted On - | Friday, September 26, 2014 |
|
Updated On - | Wednesday, January 2, 2019 |