HTML: Master the Structure Behind Every Web Page

HTML is the fundamental markup language used to describe the structure and meaning of content on a Web page. In this handout, we will explore HTML elements, tags and attributes, and learn how they form a hierarchical document structure. We will also examine semantic HTML, which gives meaning to sections such as headers, navigation, main content, articles and footers, and analyse the HTML document structure from DOCTYPE to head and body. Finally, we will study the Document Object Model, the tree-like representation created by the browser that allows JavaScript to access and modify the current page.

HTML

Fullscreen Download

Key points

HTML (HyperText Markup Language) = markup language used to describe the structure and meaning of Web page content; HTML ≠ programming language.

HTML element = structural unit consisting of an opening tag, optional attributes, content, and usually a closing tag.

Tag ≠ element: a tag is a markup identifier enclosed in angle brackets, while an element represents the complete HTML structure.

HTML elements → form a hierarchical tree of parent-child relationships; correct nesting preserves the document’s logical structure.

Void elements = elements without content or closing tags, such as <img>, which uses attributes to reference images and provide alternative text.

Attributes → provide additional information or configuration for elements; href identifies link destinations, src references resources, and alt provides image alternatives.

Block ≠ inline: block elements normally start on a new line and occupy available width; inline elements flow within surrounding text.

Block and inline behavior → browser defaults that CSS can modify; they are not immutable properties of HTML elements.

HTML document structure → <!doctype html> activates standards-compliant mode; <html> contains the document; <head> provides metadata; <body> contains page content.

Document metadata → lang declares the language, charset specifies character encoding, and viewport configures the initial display on mobile devices.

<title> ≠ <h1>: the former identifies the document in browser interfaces, while the latter defines a first-level heading within its content.

Semantic elements → communicate content roles: <header> introduction, <nav> navigation, <main> primary content, <aside> supplementary content, and <footer> concluding information.

<article> ≠ <section>: an article represents self-contained content, while a section groups thematically related content within a larger structure.

Semantic HTML → improves document interpretation by browsers, search engines, and assistive technologies, supporting accessibility and meaningful navigation.

DOM (Document Object Model) = hierarchical, in-memory representation of a document, organized into nodes representing elements, text, and other structures.

HTML source ≠ DOM: HTML provides the initial document, while the DOM represents its current structure and may change during interaction.

JavaScript → accesses and modifies DOM nodes, attributes, and content, enabling interface updates without changing the original HTML file.

HTML processing → browser parses HTML → constructs DOM in memory → builds the displayed interface; subsequent JavaScript operations can modify the DOM.

febogamedev | October 13, 2026 | 4:08 pm

PREVIOUS LESSON

NEXT lessons

Do you want to help me write articles like this one?

Contact me!

Sostieni il progetto

Tutti i materiali che condivido nascono da una convinzione molto semplice: una buona formazione non dovrebbe limitarsi a insegnare quali pulsanti premere, ma aiutare a comprendere le idee, i principi e i processi che stanno dietro agli strumenti.

Per questo dedico una parte significativa del mio tempo a studiare, organizzare e produrre contenuti gratuiti dedicati al multimedia, al design e alla comunicazione visiva. Articoli, lezioni, approfondimenti e risorse che hanno l’obiettivo di rendere accessibili argomenti spesso affrontati in modo frammentario o superficiale.

Questo lavoro richiede però tempo, ricerca e cura. Ogni guida, ogni video, ogni materiale pubblicato gratuitamente è il risultato di molte ore di studio, scrittura e revisione.
Sostenere il progetto attraverso Patreon significa permettermi di continuare a produrre contenuti educativi di qualità, mantenerli accessibili al maggior numero possibile di persone e dedicare più energie alla costruzione di una risorsa che possa essere utile a studenti, professionisti e appassionati.

Se credi che una conoscenza più profonda, rigorosa e consapevole del multimedia abbia valore, il tuo contributo non sostiene soltanto il mio lavoro: aiuta a rendere queste risorse disponibili per tutta la comunità.
Grazie per il supporto e per la fiducia.

PARTECIPA AL PATREON

Patreon è troppo impegnativo?

Puoi sostenermi anche con una donazione libera, senza abbonamento e senza impegno.
Anche un piccolo contributo mi aiuta a continuare a creare giochi, contenuti didattici e materiali gratuiti con più libertà.

Donazione libera

Regala uno strumento utile

Support the project

All the materials I share stem from a very simple conviction: good training should not be limited to teaching which buttons to press, but should help people understand the ideas, principles, and processes behind the tools.

That is why I dedicate a significant portion of my time to researching, organizing, and producing free content focused on multimedia, design, and visual communication—articles, lessons, in-depth analyses, and resources aimed at making accessible topics that are often addressed in a fragmented or superficial way.

However, this work requires time, research, and care. Every guide, video, and piece of material published for free is the result of many hours of study, writing, and revision.
Supporting the project via Patreon enables me to continue producing high-quality educational content, keep it accessible to as many people as possible, and devote more energy to building a resource that benefits students, professionals, and enthusiasts alike.

If you believe that a deeper, more rigorous, and informed understanding of multimedia is valuable, your contribution does more than just support my work: it helps make these resources available to the entire community.
Thank you for your support and trust.

JOIN THE PATREON

Is Patreon too demanding?

You can also support me with a voluntary donation—no subscription or commitment required.

Even a small contribution helps me continue creating games, educational content, and free materials with greater freedom.

voluntary donation

Give a useful tool as a gift

FEBO

Privacy policyCookie policy