HTML Layouts

Before learning about how to create web page layouts in HTML, you need to learn a few HTML elements that have no specific use while adding content to the page but are highly useful while defining layouts.

These elements are generally used to group multiple HTML elements into one for the purpose of adding common CSS styles and group as a single content in a column or grid.

Every HTML element has a default display value either block or inline.

HTML Block-level Elements

A block-level element always starts on a new line and takes up the full width available on the screen. The <div> element is a block-level element.

<div>Hello</div>
<div>World</div>

Result

List of Block level elements in HTML

<address>	<article>	<aside>	<blockquote>	<canvas>
<dd>	<div>	<dl>	<dt>	<fieldset>
<figcaption>	<figure>	<footer>	<form>	<h1>-
<h6>	<header>	<hr>	<li>	<main>
<nav>	<noscript>	<ol>	<p>	<pre>
<section>	<table>	<tfoot>	<ul>	<video>

HTML Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary for its content.

<span>Hello</span>
<span>World</span>

Result

Hello World

List of Inline elements in HTML

<a>	<abbr>	<acronym>	<b>	<bdo>
<big>	<br>	<button>	<cite>	<code>
<dfn>	<em>	<i>	<img>	<input>
<kbd>	<label>	<map>	<object>	<output>
<q>	<samp>	<script>	<select>	<small>
<span>	<strong>	<sub>	<sup>	<textarea>
<time>	<tt>	<var>

The <div> Element

The <div> element is often used as a container for other HTML elements. Grouping multiple HTML elements using <div> makes it easier to create visually appealing layouts and style those elements as a group.

The <div> element has no required attributes but style, class and id are added for styling purposes.

<div style="background-color:black;color:white;padding:15px;">
  <h3>Kathmandu</h3>
  <p style="text-align: justify">Kathmandu is the capital city and largest city of Nepal with a population of 1.5 million in the city proper and 5 million in its wider urban agglomeration across the Kathmandu Valley which includes the towns of Lalitpur, Kirtipur, Bhaktapur making the total population roughly 2.5 million people and the municipalities across Kathmandu valley.</p>
</div>

The <span> Element

The <span> element is often used as a wrapper for some text that needs to be displayed inline with other contents but requires a unique styling. It also has no required attributes but style, class and id are added for the purpose of adding styles.

<h3>My <span style="color:red">Important</span> Heading</h3>

My Important Heading

HTML class Attribute

The HTML class attribute is used to define common styles for elements with the same class name. The class name is case sensitive and can be used on any HTML element.

<style>
.topics {
  background-color: lightblue;
  margin: 15px;
  padding: 15px;
} 
</style>

<div class="topics">
  <h3>HTML</h3>
  <p>HTML is the backbone structure of a web page.</p>
</div>

<div class="topics">
  <h3>CSS</h3>
  <p>CSS deals with the overall appearance of the web page.</p>
</div>

<div class="topics">
  <h3>Javascript</h3>
  <p>Javascript adds effects to make the page more appealing.</p>
</div>

The HTML class attribute can also be used on inline elements. In CSS, a period (.) character followed by the class name is used to specify the class while adding styles.

<style>
.note {
  color: red;
  font-weight: bold;
}
</style>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

HTML elements can have more than one class name. Each class name must be separated by a space. Different HTML elements can have the same class. A class name must not start with a numerical character and must not have a white space.

HTML id Attribute

The id attribute specifies a unique id for an HTML element within a web page. The id value can be used by CSS to add styles and mostly used by JavaScript to perform certain tasks. A hash (#) character followed by the id name of the element is used to specify the id in CSS. The id can be added to any HTML element and must not contain a whitespace. An id must not be used more than once within a web page.

<style>
#heading {
  background-color: lightblue;
  padding: 40px;
  text-align: center;
} 
</style>

<h3 id="heading">My Heading</h1>

My Heading

HTML Layouts

Web pages often display contents in multiple columns like a magazine or a newspaper do. HTML5 offers semantic elements that can be used to define different parts of a web page.

HTML5 Semantic Elements

Element	Description
<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 multi-column layouts in a web page which are listed below.

1. HTML tables
2. CSS float property
3. CSS flexbox
4. CSS framework
5. CSS grid

HTML Tables

The only way, a web layout can be created using HTML only is using <table> . The <table> is not a layout tool though as it is used to display tabular data. One can build a web page layout on table though, but, it will be a lot tougher to redesign such web pages. Moreover, search engines do not rank web pages with nested tables very well while it will be impossible to create a web page using tables without nesting them.

CSS Floats

Float is easy to learn and most commonly used in web page designs. Floating elements are tied to the document flow which may harm the flexibility though.

CSS Flexbox

CSS Flexbox ensures the web page elements remain well organized on any screen sizes. It is a new layout model in CSS3 but this layout approach does not work in IE10 and earlier versions of most of the browsers.

CSS Grid

The CSS Grid Layout offers a grid-based tabular layout system with rows and columns which makes it easier to design web pages, but, it also does not work on IE, Edge or earlier versions of most of the browsers.

CSS Frameworks

CSS framework like Bulma, Tailwind, Bootstrap, Semantic UI, Foundation or Materialize can be used to create web page layouts. They will help you create web designs faster and easier but you will need to learn one of them first.

---

Try It Yourself »

---

0 Like 0 Dislike 0 Comment Share Tweet