HTML-rakenteella on ratkaiseva rooli verkkosivujen rakentamisessa. Se määrittää, kuinka sisältö järjestetään ja näytetään verkkosivulla. Tässä on johdatus HTML-perusrakenteeseen:
1. Doctype
Doctype(Document Type Declaration) määrittää verkkosivun käyttämän HTML-version. Se tulee sijoittaa HTML-tiedoston alkuun.
2. html-tunniste
html-tunniste on jokaisen HTML-tiedoston juurielementti. Se kiteyttää verkkosivun koko sisällön.
3. head tag
Head-tunniste sisältää verkkosivua koskevia tietoja, jotka eivät näy suoraan selaimessa. Täällä määritellään sivun otsikko, sisällönkuvauskentät, linkit CSS- ja JavaScript-tiedostoihin sekä monet muut elementit.
4. body tag
body-tunniste sisältää kaiken verkkosivulla näkyvän sisällön. Täällä määritellään elementit, kuten teksti, kuvat, videot, linkit ja muut käyttöliittymäkomponentit.
5. Sisäkkäiset tunnisteet
HTML käyttää hierarkkista rakennetta avaavien ja sulkevien tagien kanssa. Alatunnisteet sijoitetaan ylätunnisteiden sisään. Esimerkiksi p-tunniste(kappale) voi sisältää span-tageja(sisäinen teksti), vahvoja tunnisteita(lihavoitu teksti) ja monia muita tunnisteita.
6. Yleiset tunnisteet
HTML tarjoaa joukon tageja sisällön muotoiluun ja näyttämiseen. Esimerkiksi h1-h6-tunnisteet(otsikot), p-tunniste(kappale), img-tunniste(kuva), tunniste(linkki) ja monet muut.
Tässä on esimerkki täydellisestä HTML-sivurakenteesta:
<!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>© 2022 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
Yllä olevassa esimerkissä meillä on täydellinen HTML-sivu, jossa on pääelementit, kuten doctype, html tag, head tag ja body tag. Head-osiossa määritämme sivun otsikon, käytettävät CSS- ja JavaScript-tiedostot. Runko-osio sisältää elementtejä, kuten otsikko-, pää- ja alatunniste, jotka näyttävät verkkosivun sisällön.
Käyttämällä oikeaa HTML-rakennetta voit rakentaa hyvin organisoituja, luettavia ja interaktiivisia verkkosivuja.