close

Introduksjon til HTML-struktur: Grunnleggende elementer og syntaks

HTML-struktur spiller en avgjørende rolle i å bygge nettsider. Den definerer hvordan innhold organiseres og vises på en nettside. Her er en introduksjon til den grunnleggende HTML-strukturen:

1. Doctype

Doctype(Document Type Declaration) definerer HTML-versjonen som nettsiden bruker. Den skal plasseres i begynnelsen av HTML-filen.

2. HTML-tag

HTML-koden er rotelementet til hver HTML-fil. Den innkapsler hele innholdet på nettsiden.

3. head tag

Head-taggen inneholder informasjon om nettsiden som ikke vises direkte i nettleseren. Det er her tittelen på siden, metakoder, lenker til CSS- og JavaScript-filer og diverse andre elementer er definert.

4. body tag

Body-taggen inneholder alt innholdet som vises på nettsiden. Det er her elementer som tekst, bilder, videoer, lenker og andre brukergrensesnittkomponenter er definert.

5. Nestede tagger

HTML bruker en hierarkisk struktur med åpnings- og lukkekoder. Underordnede tagger er plassert inne i overordnede tagger. For eksempel kan p-taggen(avsnitt) inneholde span-tags(innebygd tekst), sterke koder(fet tekst) og mange andre koder.

6. Vanlige tagger

HTML gir en rekke tagger for formatering og visning av innhold. For eksempel h1-h6-taggene(overskrifter), p-taggen(avsnitt), img-taggen(bilde), en tag(lenke) og mange andre.

 

Her er et eksempel på en fullstendig HTML-sidestruktur:

<!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 eksemplet ovenfor har vi en komplett HTML-side med hovedelementene som doctype, html tag, head tag og body tag. I head-delen definerer vi sidetittelen, CSS- og JavaScript-filene som skal brukes. Brødtekstdelen inneholder elementer som topptekst, hovedtekst og bunntekst for å vise innholdet på nettsiden.

 

Ved å bruke riktig HTML-struktur kan du bygge godt organiserte, lesbare og interaktive nettsider.