How to make HTML Website Layout?
Contents
A well-structured website layout improves its user-friendliness by making it easy for visitors to read and navigate through its content. The majority of developers use columns and rows to structure their websites in a way that is similar to newspapers and magazines. <table>, <div>, and <span> are some of the elements that are used to structure the layout of websites. There are three major ways of dividing a webpage into columns and rows. Each one of them will be reviewed separately.
Website layout using tables
This is perhaps, the simplest way of creating a layout in HTML by dividing a webpage into columns and rows. The example below uses the table element to create a simple website layout.
Exmaple:
<!DOCTYPE html> <html> <head> <title>HTML Layout using Tables</title> </head> <body> <table width = "100%" border = "0"> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign = "top"> <td bgcolor = "#aaa" width = "50"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "#eee" width = "100" height = "200"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <center> Copyright ? 2020 htmlkick.com </center> </td> </tr> </table> </body> </html>
Website layout using div and span
Developers use the <div> element in HTML is used to mark out blocks of content. A <div> element can be nested in another but it cannot be enclosed in an inline element. If you need to mark out sections within a block element or other inline statements, use the span element. The example below will illustrate how you can use <div> elements to create a layout.
Website layouts using HTML 5 structural elements
The most recent release of HTML comes with structural elements like <footer>, <header>, <nav>, and <section> to separate various sections of a webpage in a semantic way. Below is an example that uses HTML 5 structural elements to create a webpage layout.
<!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> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ header { background-color: #666; 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: #777; 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>Cities</h2> </header> <section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> </section> <footer> <p>Footer</p> </footer> </body> </html>
Modern Business – Start Bootstrap Template
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Modern Business - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/modern-business.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="index.html">Start Bootstrap</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Portfolio </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio"> <a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a> <a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a> <a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a> <a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a> <a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Blog </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog"> <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a> <a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a> <a class="dropdown-item" href="blog-post.html">Blog Post</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPages" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other Pages </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPages"> <a class="dropdown-item" href="full-width.html">Full Width Page</a> <a class="dropdown-item" href="sidebar.html">Sidebar Page</a> <a class="dropdown-item" href="faq.html">FAQ</a> <a class="dropdown-item" href="404.html">404</a> <a class="dropdown-item" href="pricing.html">Pricing Table</a> </div> </li> </ul> </div> </div> </nav> <header> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <!-- Slide One - Set the background image for this slide in the line below --> <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')"> <div class="carousel-caption d-none d-md-block"> <h3>First Slide</h3> <p>This is a description for the first slide.</p> </div> </div> <!-- Slide Two - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')"> <div class="carousel-caption d-none d-md-block"> <h3>Second Slide</h3> <p>This is a description for the second slide.</p> </div> </div> <!-- Slide Three - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')"> <div class="carousel-caption d-none d-md-block"> <h3>Third Slide</h3> <p>This is a description for the third slide.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </header> <!-- Page Content --> <div class="container"> <h1 class="my-4">Welcome to Modern Business</h1> <!-- Marketing Icons Section --> <div class="row"> <div class="col-lg-4 mb-4"> <div class="card h-100"> <h4 class="card-header">Card Title</h4> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-lg-4 mb-4"> <div class="card h-100"> <h4 class="card-header">Card Title</h4> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-lg-4 mb-4"> <div class="card h-100"> <h4 class="card-header">Card Title</h4> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div> </div> <!-- /.row --> <!-- Portfolio Section --> <h2>Portfolio Heading</h2> <div class="row"> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Project One</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Project Two</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Project Three</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Project Four</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Project Five</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Project Six</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p> </div> </div> </div> </div> <!-- /.row --> <!-- Features Section --> <div class="row"> <div class="col-lg-6"> <h2>Modern Business Features</h2> <p>The Modern Business template by Start Bootstrap includes:</p> <ul> <li> <strong>Bootstrap v4</strong> </li> <li>jQuery</li> <li>Font Awesome</li> <li>Working contact form with validation</li> <li>Unstyled page elements for easy customization</li> </ul> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.</p> </div> <div class="col-lg-6"> <img class="img-fluid rounded" src="http://placehold.it/700x450" alt=""> </div> </div> <!-- /.row --> <hr> <!-- Call to Action Section --> <div class="row mb-4"> <div class="col-md-8"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p> </div> <div class="col-md-4"> <a class="btn btn-lg btn-secondary btn-block" href="#">Call to Action</a> </div> </div> </div> <!-- /.container --> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © Your Website 2020</p> </div> <!-- /.container --> </footer> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> </body> </html>
Terry White is a professional technical writer, WordPress developer, Web Designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him