LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Layout


HTML Layout Elements

Websites often display content in multiple columns (like a magazine or newspaper).

HTML offers several semantic elements that define the different parts of a web page:

HTML5 Semantic Elements
  • <header> - Defines a header for a document or a section
  • <nav> - Defines a container for navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details
  • <summary> - Defines a heading for the <details> element

HTML Layout Techniques

There are five different ways to create multicolumn layouts. Each way has its pros and cons:

  • HTML tables (not recommended)
  • CSS float property
  • CSS flexbox
  • CSS framework
  • CSS grid
<!DOCTYPE html>
<html lang="en">
     <head>
        <title>CSS Template</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <style>
            /* Style the header */
    		.header {
    		  background-color: blue;
    		  padding: 30px;
    		  text-align: center;
    		  font-size: 35px;
    		  color: white;
    		}
    
    		/* Create two columns/boxes that floats next to each other */
    		nav {
    		  float: left;
    		  width: 30%;
    		  height: 300px; /* only for demonstration, should be removed */
    		  background: #ccc;
    		  padding: 20px;
    		}
    
    		/* Style the list inside the menu */
    		nav ul {
    		  list-style-type: none;
    		  padding: 0;
    		}
    
    		article {
    		  float: left;
    		  padding: 20px;
    		  width: 70%;
    		  background-color: #f1f1f1;
    		  height: 300px; /* only for demonstration, should be removed */
    		}
    
    		/* Clear floats after the columns */
    		section:after {
    		  content: "";
    		  display: table;
    		  clear: both;
    		}
    
    		/* Style the footer */
    		#footer {
    		  background-color: blue;
    		  padding: 10px;
    		  text-align: center;
    		  color: white;
    		}
    
    		/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
    		@media (max-width: 600px) {
    		  nav, article {
    			width: 100%;
    			height: auto;
    		  }
    		}
    
        </style>
    </head>
	
	<body>
	    <h2>CSS Layout Float</h2>
	    <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
	    <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p> 
	    <header>  
	        <h2>Adzetech</h2> 
	    </header> 
	    <section>  
	        <nav>   
	            <ul>    
	                <li><a href="#">Tutorials</a></li>    
	                <li><a href="#">Projects</a></li>    
	                <li><a href="#">Training</a></li>   
	            </ul>  
	        </nav>  
    	    <article>   
    	        <h1>Tutorials</h1>   
    	        <p>Adzetech is the largest platform to share projects for free. I Provides all projects and tutorial for free through worldwide.</p>   
    	        <p>Adzetech is the largest platform to share projects for free. I Provides all projects and tutorial for free through worldwide.</p>  
    	   </article> 
	   </section> 
	    <footer>  
	        <p>Footer</p> 
	    </footer> 
	</body>
</html>

CSS Layout Float

In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)

Adzetech

Tutorials

Adzetech is the largest platform to share projects for free. I Provides all projects and tutorial for free through worldwide.

Adzetech is the largest platform to share projects for free. I Provides all projects and tutorial for free through worldwide.


x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine