Services

Tutorials Cheat Sheets Quizzes/Tests Resources Site Map Contact

Featured Sites

24K Music Videos

HTML Layouts

Originally, websites were shapeless creations that displayed content from top to bottom without variation. Later on, tables were used to break up and position various portions of content, allowing for multiple columns and other novelties that are old hat to us now.

With the advent of CSS, the process of laying out a website became much more varied, allowing for responsive layouts and other timely upgrades. HTML5, with its new elements, allows for webpages to be laid out in a neat, orderly fashion, and be fully responsive and beautifully styled. It's hard to imagine those old days, now!

The HTML5 semantic elements that are used to layout (or define sections of) a webpage are:

Element	Description
<article>	Defines an Article Section
<aside>	Defines Section Aside From Main Content (Sidebar, Etc.)
<details>	Defines a Detail Section With Show/Hide Toggle
<figcaption>	Defines a Caption in the <figure> Element
<figure>	Defines Self-Contained Content Like Photos/Code/Etc.
<footer>	Defines the Footer Section
<header>	Defines the Header Section
<main>	Defines the Main Section
<menu>	Defines the Menu Section
<nav>	Defines the Navigation Section
<section>	Defines a Section
<summary>	Defines a Heading for the <details> Element

The six basic layout elements used on most webpages are, in order or appearance:
<header>, <nav>, <section>, <article>, <aside>, <footer>

With those, and a dash of CSS, you can lay out websites in various manners similar to the following:

HTML Layout

The code to do this is very simple, but won't look like much if you try it out (since it has absolutely no styling):


            <!DOCTYPE html>

            <html>

                  <head></head>

                  <body>

                        <header><h1>Welcome!</h1></header>

                        <section>

                              <nav> Link | Link | Link | Link </nav>

                              <article><h2>Topic</h2><p>Contenty stuff goes here...</p></article>

                        </section>

                        <footer><p>Footer Stuff Here</p></footer>

                  </body>

            </html>

... but with these basics, you can expand to create a variety of webpage layouts, and all that remains it to arrange and style it with CSS!

← Previous

Table of Contents