HTML layouts divide a webpage into parts: a header at the top, a menu (nav), the main content, a sidebar (aside), and a footer at the bottom. This makes the page easy to scan, helps search engines understand it, and keeps your code tidy.
Here, you will learn about HTML5 semantic elements and four ways to build a layout: CSS frameworks, floats, Flexbox, and Grid.
London is the capital city of England. It is the most populous city in the United Kingdom.
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.
HTML has several semantic elements that define the different parts of a web page.
Use these elements to create a clear document outline, improve accessibility, and boost SEO:
<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 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 <details> elementRead more about semantic elements in our HTML Semantics chapter.
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template.
Get started for free ❯Free account
New
Coding fundamentals as bite-sized lessons and challenges.
