HTML Layout Elements and Techniques

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the element

Example

Cities
London
Paris
Tokyo
London
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.

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.

Footer

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
CSS framework
CSS float property
CSS flexbox
CSS grid

CSS Frameworks

If we want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - we just need to remember how the float and clear properties work.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices. Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)

Setting The Viewport

To create a responsive website, add the following tag to all your web pages:

Example

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive

Example

<img src="img_girl.jpg" style="width:100%;">

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size
Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different browser window sizes.

Example

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width".

Example

<h1 style="font-size:10vw">Hello World</h1>

HTML Computer Code Elements

HTML contains several elements for defining user input and computer code.

Example

`<code>`
x = 5;
y = 6;
z = x + y;
`</code>`

HTML <kbd> For Keyboard Input

The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

Example

Define some text as keyboard input in a document:
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

HTML <samp> For Program Output

The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

Example

Define some text as sample output from a computer program in a document:

`<p>`Message from my computer:`</p>`
`<p><samp>`File not found.`<br>`Press F1 to continue`</samp></p>`

HTML <code> For Computer Code

The HTML <code>element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Example

Define some text as computer code in a document:
`<code>`
x = 5;
y = 6;
z = x + y;
`</code>`

HTML <var> For Variables

The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Example

Define some text as variables in a document:
`<p>`The area of a triangle is: 1/2 x `<var>`b`</var>` x `<var>h</var>`
, where `<var>`b`</var>` is the base, and `<var>`h`</var>` is the vertical height.`</p>`