HTML Structural Markup

Structural markup is the foundation of every web page. It defines how content is organized and helps both users and machines understand the page.

What is structural markup?

Structural markup is the way we organize content on a web page using HTML elements. It creates a clear layout and logical order of information.

A properly structured page is easier to read, easier to navigate, better for accessibility, and better for search engines (SEO).

Without structure, a page would be just one long block of text. With structure, content is divided into meaningful parts.

Main parts of a web page

Header (<header>)

The header is the top part of the page. It introduces the website or a section.

• Logo (usually a link to the homepage)
• Navigation menu
• Introductory text
• Search form

A page can have multiple header elements, but usually only one main header.

Main (<main>)

The main element contains the primary content of the page.

• Only one <main> per page
• Content must be unique
• Should not include header, footer, or navigation

Footer (<footer>)

The footer is the bottom part of the page or section.

• Copyright
• Contact information
• Social media links
• Additional links

Logo in the header

The logo represents the brand and is placed in the header.

• Usually wrapped inside a link
• Links to the homepage
• Can be text, image, or both

Navigation (<nav>)

Navigation helps users move around the website.

• Links to other pages
• Links to sections of the same page

The <nav> tag is used only for the main navigation.

Anchor links

Anchor links allow navigation within the same page.

1. Add a unique id to an element
2. Use a link with href="#id"

Example: href="#about" scrolls to id="about".

Each id must be unique.

Sections (<section>)

Sections group related content into logical blocks.

• Usually contain a heading
• Contain related content

Benefits:

• Better readability
• Better SEO
• Easier code maintenance

The section tag can be used multiple times and is less specific than header or footer.

Links vs Buttons

Use <a> (link) when:

• Going to another page
• Opening another website
• Scrolling to a section
• Downloading a file

Link = navigation

Use <button> when:

• Submitting a form
• Opening a menu
• Showing or hiding content
• Triggering JavaScript

Button = action

Rule: if it changes the URL → use link. If it changes behavior → use button.

HTML entities

Some characters cannot be typed directly or have special meaning in HTML.

Formats:

• &name;
• &#number;
• &#xhex;

Examples:

• &copy; → ©
• &lt; → <
• &gt; → >

Symbols like < and > must be written as entities to display them as text.