Using This Page as Your HTML Layout Guide
This page is designed to help you learn and reference HTML layout tags while you code!
- Keep this page open in a browser window.
- Open your VS Code (or any text editor) in another window side-by-side.
- As you build your HTML structure:
- Observe the Layouts: See how different HTML elements are used on this page. The colored boxes and labels (e.g.,
<header>) visually represent these elements. - Click & Learn: Click on any labeled/colored block on this page, or select a tag from the “HTML Tag Details” panel at the bottom.
- Get Info & Snippets: The panel will show you the tag’s purpose, common properties, and a basic code snippet you can adapt for your own HTML.
- Observe the Layouts: See how different HTML elements are used on this page. The colored boxes and labels (e.g.,
- Experiment: Try to recreate similar structures in your VS Code file, using this page as your guide.
Understanding HTML Page Structure
This is the main page <header>. It often contains the site title, logo, and primary navigation (though navigation can also be separate).
This is the <main> content area of the page. It should house the primary, unique content of this specific page, excluding headers, footers, and sidebars that are repeated across multiple pages.
Anatomy of an Article
This <header> is specific to the <article> below. Articles can have their own headers and footers.
Introduction Section
This is a <section> within the article. Sections are used to group thematically related content. For example, an introduction, a main body, and a conclusion could each be a section. This paragraph also includes an example of a <span> element, used for inline styling or grouping of text.
Core Content Section
Another <section>. You can nest sections if needed, but ensure each section has a clear thematic purpose, often introduced by a heading.
This is a <div> element inside the section. Use <div> when no other semantic HTML5 element (like <section>, <article>, <nav>) is appropriate. It’s often used for styling hooks or for grouping elements for layout purposes (e.g., with Flexbox or Grid).
HTML Tag Details
Tag: –
Category: –
Purpose: –
Key Properties/Attributes: –
Basic Code Snippet:
Select a tag to see an example...