Website Layout: What It Is and the Main Types of HTML Layout

Every website, large or small, goes through a stage where the approved design is turned into code. This is where the website layout is built: each page gets its structure, its order of headings, text and images, and the styles that make it look the way the designer intended. The work is done by front-end developers who know HTML and CSS well. This guide explains what website layout means, the main types of HTML layout, the tools developers use and how to check the result.

The word comes from print, where a layout sets out the headlines, columns and images on a page so that readers can take in the information easily. A web page layout does the same job on screen.

In web development, layout covers two things: how the elements of a page (text, headings, images, buttons, forms, banners) are arranged, and the code that puts them there. The developer builds a structure that matches the design and stays flexible, so the page displays correctly in different browsers and on screens of any size. You may also hear this stage called front-end coding or HTML and CSS markup.

Layout is one stage of website development. It does not cover the site’s functions, such as the database, payments or user accounts, which back-end developers handle. Layout is about how content is shown and how easy it is to read and use.

The base of any HTML layout is HTML, the markup language that describes the structure of a page with tags: headings, paragraphs, lists, images, links and sections. CSS is the second essential part. It controls how everything looks: position, size, fonts, colours, spacing and how the layout changes on different screens. As well as writing HTML and CSS, a front-end developer usually:

• prepares and optimises images, icons and fonts for the web;
• adds JavaScript for interactive elements such as menus, sliders and pop-ups;
• tests how the pages display, both during the work and before launch.

Table Layout

Table layout was the first way to arrange pages in early web design. The page was built as a grid of table cells with the <table>, <tr> and <td> tags, and each piece of content sat in its own cell. It was simple to understand, but hard to change and impossible to adapt to small screens.

Today table layout is obsolete. The HTML standard states that tables must not be used as layout aids, because they confuse screen readers and software that reads data from pages. Tables are still the right choice for tabular data, such as a price list or a timetable.

Block Layout with div and CSS

Block layout replaced tables. Each part of the page, such as the header, logo, banner or content area, is a block, usually a <div> tag, and CSS sets its size, position and appearance. The code is lighter and easier to maintain, and the same HTML can be arranged differently on each screen.

Modern CSS layout relies on two tools built for this job: flexbox, for arranging items in a row or column, and CSS grid, for two-dimensional grids of rows and columns. Older tricks such as floats are rarely needed now.

Responsive Layout

A responsive layout adjusts to the screen it is shown on, from desktop monitors to tablets and phones. Elements do not have fixed positions. Widths are flexible, and media queries change the arrangement at set screen widths, so content stays readable on any device.

Responsive layout is now the standard for new websites, and Google recommends it for mobile-first indexing. Our guide to responsive web design explains how it works and why it matters.

Semantic HTML Layout

Semantic HTML uses tags that describe what each part of the page is, not only how it looks: <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>, along with headings in a logical order. The structure follows the meaning and importance of the content.

As MDN explains, semantic markup helps screen reader users find their way around a page, helps search engines understand the content and makes the code easier for developers to maintain. In practice, a good modern layout combines all three: semantic HTML, CSS grid and flexbox, and responsive rules.

A front-end developer works mainly with code. On a well-run project, design, layout and back-end work are split between specialists, but the developer still needs to read design files and sometimes prepare graphics. The main groups of tools are:

• Code editors. Visual Studio Code, WebStorm, PhpStorm, Sublime Text and Notepad++;
• Design tools. Figma, where developers inspect and measure the design, and Adobe Photoshop and Illustrator for images and graphics;
• Testing tools. The developer tools built into Chrome, Firefox and Safari, the W3C validators for HTML and CSS, and browser testing services such as BrowserStack.

The most common problems are:

1. Differences between browsers. Chrome, Safari, Firefox and Edge can display the same code slightly differently, so pages have to be checked in each of them, including Safari on iPhone.
2. Designs that are hard to build. A designer who does not know how layouts work may draw something that is slow or awkward to code, or that breaks on small screens. Agreeing the structure early with wireframes avoids most of these problems.
3. Non-standard fonts and effects. Some fonts, animations and visual effects load slowly or do not work the same on every device, so they need a fallback.

Signs of a Well-Coded Layout

• Clean code. HTML describes the structure, while styles and scripts sit in separate CSS and JavaScript files;
• A close match to the design at every screen size;
• Correct headings. A clear H1 for the page, then H2 to H6 in a logical order;
• Consistent display in all major browsers. The page looks and works the same in each of them;
• Real text, light images. Text is written as text, not placed inside pictures, so search engines and screen readers can read it. Images are compressed and have alt text.

Before the pages go live, check them against these points:

1. Match with the design. Fonts, colours and spacing between blocks follow the design file.
2. Responsiveness. The site displays correctly on phones, tablets and desktops of different sizes.
3. Browser support. The same applies in every major browser (cross-browser testing).
4. Valid code. The W3C Markup Validation Service shows errors in the HTML.
5. Loading speed. Google PageSpeed Insights measures how fast the pages load on mobile and desktop.
6. Working elements. Links, buttons, forms, menus and other interactive elements all do what they should, including with a keyboard.

If every point checks out, the layout is ready for content and launch. For a fuller checklist, see our guide on how to test a website. If you need a website designed and built, see our website design services.