Page Layout Techniques

Making Layout of a HTML page:

  • Using Semantic tags for layout
  • Using the Right Tags

Main Tags:

An page contains 3 main tags:
1. <header> Tag
2. <main> Tag
3. <footer> Tag

Inside Main Tag:

  • Inside main tags, we have:
    1. <section> For a section on page.
    2. <article> For an article on page.
    3. <aside> For content aside main content (ads).

<div> Tag:

  • Div is a container used for other HTML elements
  • The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
  • The <div> tag is easily styled by using the class or id attribute.
  • Example:
<html> 
	<body>  
		<div class="myDiv">  
		  <h2>This is a heading in a div element</h2>  
		  <p>This is some text in a div element.</p>  
		</div>  
	</body>  
</html>
  • Note: By default, browsers always place a line break before and after the <div> element.

<span> Tag:

  • The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
  • The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

Next Chapter>>