Prev Next

HTML5 Sections

HTML5 Sections HTML Sections group different HTML Elements (e.g. text, heading, paragraphs, images etc.) together.

Creating sections is essential for organizing and styling web contents.

Elements Used for HTML Sections

  • <div> : used to group large group of HTML elements like navigation, header, main content, footer, images; it is a block-level element
  • <span> : used to group smaller group of text in a paragraph and few HTML elements; it is an inline element

HTML5 Semantic Elements

Here is a list of HTML5 Semantic Elements that work similarly with the <div> element:

  1. <nav> : defines a navigation list or bar
  2. <header> : defines a header
  3. <main> : defines the main content
  4. <footer> : defines a footer

Using these HTML5 semantic elements is not mandatory but it is still a good practice and recommended because it might help in Search Engine Optimization (SEO) plus your code will be more understandable.

however these elements work the same way with <div> element in terms of rendering on the browser.

HTML5 Basic Example

HTML5 Basic Example In this lesson we’re going to create a very simple HTML page layout which will be composed of the following:

  1. Basic structure of any HTML file.
  2. A header
  3. A simple navigation bar.
  4. Some paragraphs.
  5. A footer.
<!DOCTYPE html> 
<html> 
<head>
	<title> Basic HTML Layout Example </title>
</head> 
<body> 
	<header> 
      
		<nav>
				<p>
				<a href="#"> Home </a> | 
                <a href="#"> About </a> |
                <a href="#"> Contact Us </a> |
                <a href="#"> Terms of Services</a>|
                <a href="#"> Privacy Policy </a> 
			</p> 
		</nav> 
	
	 </header>
	<main>
		<h1 align="center"> Lorem Ipsum </h1> 
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		
	</main> 
	<footer>
		  © Copyright CodeLiber 2018 | All rights reserved 
    </footer> 
 </body> 
</html>