Struttura di una pagina HTML

Struttura di una pagina HTML

Eecco il Capitolo 2 del tutorial, dedicato alla struttura di una pagina HTML.

2. Struttura di una Pagina HTML

Ogni pagina web scritta in HTML segue una struttura di base.
Questa struttura è come il “telaio” su cui poggia tutto il contenuto: testi, immagini, link e così via.

Ecco la versione più semplice di una pagina HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Il mio primo sito</title>
</head>
<body>
    <h1>Ciao Mondo!</h1>
    <p>Questa è la mia prima pagina HTML.</p>
</body>
</html>

Analizziamola riga per riga

  1. <!DOCTYPE html>

    • Dice al browser che il documento è scritto in HTML5 (la versione più recente e usata).

    • Non è un tag, ma una dichiarazione.

  2. <html></html>

    • Racchiude tutto il contenuto della pagina.

    • È il “contenitore principale”.

  3. <head></head>

    • Qui vanno le informazioni “invisibili” per l’utente ma fondamentali per il browser.

    • Dentro il <head> troviamo:

      • <meta charset="UTF-8"> → Serve a mostrare correttamente i caratteri speciali (come le lettere accentate).

      • <title> → Il titolo della pagina che appare nella scheda del browser.

  4. <body></body>

    • Contiene tutto ciò che l’utente vede: testi, immagini, video, link, ecc.

    • Qui è dove “costruiremo” la pagina.

Elementi e Attributi

  • Elemento: un blocco di codice racchiuso tra un tag di apertura <p> e uno di chiusura </p>.

  • Attributo: un’informazione aggiuntiva che modificherà il comportamento dell’elemento.

    • Esempio: <p align="center">Testo centrato</p>

Commenti in HTML

A volte vorrai scrivere note nel codice per ricordarti qualcosa:

<!-- Questo è un commento e non verrà mostrato -->

Nota: In HTML, la spaziatura e l’andata a capo non influenzano l’aspetto finale, ma un codice ordinato è molto più leggibile.

English version

Here is Chapter 2 of the tutorial, dedicated to the structure of an HTML page.

2. Structure of an HTML Page

Every web page written in HTML follows a basic structure.

This structure is like the "framework" on which all the content rests: text, images, links, and so on.

Here is the simplest version of an HTML page:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>My first website</title>

</head>

<body>

<h1>Hello World!</h1>

<p>This is my first HTML page.</p>

</body>

</html>

Let's analyze it line by line.

<!DOCTYPE html>

  • Tells the browser that the document is written in HTML5 (the most recent and widely used version).
  • It's not a tag, but a declaration.

<html> … </html>

  • Contains all the page content.
  • It's the "main container."

<head> … </head>

  • This is where the information that's "invisible" to the user but essential for the browser goes.
  • Inside the <head>, we find:

    • <meta charset="UTF-8"> → Used to correctly display special characters (such as accented letters).
    • <title> → The page title that appears in the browser tab.
<body> … </body>

  • Contains everything the user sees: text, images, videos, links, etc.
  • This is where we'll "build" the page.

Elements and Attributes

  • Element: A block of code enclosed between an opening <p> tag and a closing </p> tag.
  • Attribute: Additional information that will modify the element's behavior.
    • Example: <p align="center">Centered text</p>

HTML Comments

Sometimes you'll want to write notes in your code to remind yourself of something:

<!-- This is a comment and won't be displayed -->

Note: In HTML, spacing and line breaks don't affect the final appearance, but tidy code is much more readable.

Puoi seguire anche il mio canale YouTube https://www.youtube.com/channel/UCoOgys_fRjBrHmx2psNALow/ con tanti video interessanti


I consigli che offriamo sono di natura generale. Non sono consigli legali o professionali. Quello che può funzionare per una persona potrebbe non essere adatto a un’altra, e dipende da molte variabili.
Per supportare e far crescere il canale in modo semplice, rapido e gratuito, potete fare acquisti su amazon usando il mio link di affiliazione.
Questo implica che io prenda una commissione ogni volta che qualcuno faccia un qualsiasi acquisto utilizzando il mio link di affiliazione https://amzn.to/4cgJ3Ls

Commenti