Articles → HTML 5 → Articles And Sections In Html5

Articles And Sections In Html5






Software Requirement




  1. Any text editor like notepad for writing code
  2. Any browser which supports HTML 5

Technical Knowledge





Semantic HTML





Benefit Of Using Semantic HTML




  1. Semantic HTML is easy to understand and maintain
  2. Semantic HTML enables effective search engine optimization

Semantic HTML Vs Presentational HTML









‘Article’ And ‘Section’ Markups?




  1. Section → If the enclosed contents are related then we use section
  2. 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


Picture showing the output of article and section tag

Click to Enlarge


How ‘Div’ Is Different From ‘Article’ And ‘Section’ Markups?




  1. div should be used for styling purposes (by applying CSS) whereas article and section should not be used for styling purposes.
  2. 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 ExplorerFirefoxChromeSafariOperaEdge
9.04.06.05.011.1Yes



Video





Posted By  -  Karan Gupta
 
Posted On  -  Friday, September 26, 2014
 
Updated On  -  Wednesday, January 2, 2019

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250