close

Introduzione alla struttura HTML: elementi di base e sintassi

La struttura HTML gioca un ruolo cruciale nella creazione di pagine web. Definisce come il contenuto è organizzato e visualizzato su una pagina web. Ecco un'introduzione alla struttura HTML di base:

1. Doctype

Il Doctype(Document Type Declaration) definisce la versione HTML utilizzata dalla pagina web. Dovrebbe essere posizionato all'inizio del file HTML.

2. etichetta html

Il tag html è l'elemento principale di ogni file HTML. Incapsula l'intero contenuto della pagina web.

3. head taggare

Il tag head contiene informazioni sulla pagina Web che non vengono visualizzate direttamente sul browser. Qui è dove vengono definiti il ​​titolo della pagina, i meta tag, i collegamenti ai file CSS e JavaScript e vari altri elementi.

4. body etichetta

Il tag body contiene tutto il contenuto che viene visualizzato sulla pagina web. È qui che vengono definiti elementi come testo, immagini, video, collegamenti e altri componenti dell'interfaccia utente.

5. Tag nidificati

L'HTML utilizza una struttura gerarchica con tag di apertura e chiusura. I tag figlio vengono inseriti all'interno dei tag padre. Ad esempio, il tag p(paragrafo) può contenere tag span(testo in linea), tag forti(testo in grassetto) e molti altri tag.

6. Tag comuni

L'HTML fornisce una gamma di tag per la formattazione e la visualizzazione del contenuto. Ad esempio, i tag h1-h6(intestazioni), p tag(paragrafo), img tag(immagine), a tag(link) e molti altri.

 

Ecco un esempio di una struttura di pagina HTML completa:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

Nell'esempio sopra, abbiamo una pagina HTML completa con gli elementi principali come doctype, html tag, head tag e body tag. Nella sezione head, definiamo il titolo della pagina, i file CSS e JavaScript da utilizzare. La sezione del corpo contiene elementi come intestazione, principale e piè di pagina per visualizzare il contenuto della pagina web.

 

Utilizzando la struttura HTML corretta, puoi creare pagine Web ben organizzate, leggibili e interattive.