close

Introduktion till HTML-struktur: grundläggande element och syntax

HTML-struktur spelar en avgörande roll för att bygga webbsidor. Den definierar hur innehåll organiseras och visas på en webbsida. Här är en introduktion till den grundläggande HTML-strukturen:

1. Doctype

Doctype(Document Type Declaration) definierar HTML-versionen som webbsidan använder. Den ska placeras i början av HTML-filen.

2. HTML-tagg

HTML-taggen är rotelementet i varje HTML-fil. Den kapslar in hela innehållet på webbsidan.

3. head tagg

Head-taggen innehåller information om webbsidan som inte visas direkt i webbläsaren. Det är här sidans titel, metataggar, länkar till CSS- och JavaScript-filer och olika andra element definieras.

4. body tagg

Body-taggen innehåller allt innehåll som visas på webbsidan. Det är här element som text, bilder, videor, länkar och andra användargränssnittskomponenter definieras.

5. Kapslade taggar

HTML använder en hierarkisk struktur med öppnings- och stängningstaggar. Underordnade taggar placeras inuti föräldrataggar. P-taggen(stycke) kan till exempel innehålla span-taggar(inbäddad text), starka taggar(fet text) och många andra taggar.

6. Vanliga taggar

HTML tillhandahåller en rad taggar för formatering och visning av innehåll. Till exempel h1-h6-taggarna(rubriker), p-taggen(stycke), img-taggen(bild), en tagg(länk) och många andra.

 

Här är ett exempel på en komplett HTML-sidstruktur:

<!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>

I exemplet ovan har vi en komplett HTML-sida med huvudelementen som, doctype tagg html, head tagg och body tagg. I huvudsektionen definierar vi sidtiteln, CSS- och JavaScript-filerna som ska användas. Brödsektionen innehåller element som sidhuvud, huvud och sidfot för att visa innehållet på webbsidan.

 

Genom att använda rätt HTML-struktur kan du bygga välorganiserade, läsbara och interaktiva webbsidor.