HTML Layout Guide | Nikhil Learn Hub

Basic Single‑Column Layout

When to use:

Single‑column layouts are perfect for simple pages such as blog posts, documentation, and landing pages, especially on mobile devices where vertical scrolling is natural.

Structure:

<header> with logo and navigation.
<main> containing the page content.
<footer> for copyright and links.

HTML Skeleton:

<body>
    <header>Header content</header>
    <main>Main content</main>
    <footer>Footer content</footer>
</body>

Two‑Column Layout (Content + Sidebar)

Many websites use a main content area with a sidebar for related links, navigation or advertisements. The HTML structure stays simple and the visual layout is handled by CSS or frameworks like Bootstrap.

Example Structure:

<main>
    <article>Main article content</article>
    <aside>Sidebar with links</aside>
</main>

Header, Navigation & Footer

A typical application layout places the main navigation inside the page header and uses a footer for global information. This pattern is combined with either single‑ or multi‑column content areas.

Example Layout Markup:

<header>
    <nav>Site navigation</nav>
</header>

<main>
    <section>Section 1</section>
    <section>Section 2</section>
</main>

<footer>Footer content</footer>