XHTML Tutorial - Kapitel 4: Rubriker och stycken
I förra kapitlet lärde vi oss de nödvändiga taggarna för att lägga grunden för ett HTML-dokument, och nu ska vi titta lite närmare på själva innehållet. Vi ska börja med två av huvud-komponenterna i de flesta vanliga text-sidor och artiklar, nämligen rubrik (överskrift) och text-stycken.Som du såg i vårt förra exempel så är det inte nödvändigt att använda sig av några taggar alls i dokumentets <body> om allt man vill göra är att få ut sitt meddelande. All text som skrivs där kommer ju att skrivas ut på skärmen ändå. Men, ibland kanske man vill formatera texten en aning och dela upp den i lite mer logiska bitar så att det blir lättare att läsa, och så att sökmotorerna kan snappa upp de viktiga bitarna, och här kommer taggarna <h*> och <p> in.
Jag säger <h*> eftersom det finns sex "header"-taggar, <h1> till <h6>, och det är för att du ska kunna prioritera rubrikerna. Tanken är att man använder <h1> för sidans huvudrubrik, och sedan <h2> för underrubriker, <h3> för ännu mindre viktiga underrrubriker, osv.
Nummerordningen spelar även en roll i sökmotorernas indexering, eftersom den hjälper dem att prioritera nyckelfraserna på sidan.
Taggen för text-stycken (paragrafer) är enklare eftersom det bara är ett <p>. Den använder man främst för dela upp texter i kortare bitar som är lättare att läsa eftersom den skapar ett litet glapp mellan styckena. Det är inte alls nödvändigt att dela upp texten i <p>-stycken, men det anses som god form att göra det.
Låt oss sätta samman dessa taggar i ett nytt exempel:
<html>
<head>
<title>Ett exempel på rubriker och stycken</title>
</head>
<body>
<h1>Ett exempel på rubriker och stycken</h1>
<h2>Den första underrubriken</h2>
<p>
Lite text för vårt första stycke.
</p>
<p>
Ännu lite mer text för vårt andra stycke.
</p>
<h2>Den andra underrubriken</h2>
<p>
Ett tredje och sista text-stycke.
</p>
</body>
</html>
<head>
<title>Ett exempel på rubriker och stycken</title>
</head>
<body>
<h1>Ett exempel på rubriker och stycken</h1>
<h2>Den första underrubriken</h2>
<p>
Lite text för vårt första stycke.
</p>
<p>
Ännu lite mer text för vårt andra stycke.
</p>
<h2>Den andra underrubriken</h2>
<p>
Ett tredje och sista text-stycke.
</p>
</body>
</html>
Det är nu också viktigt att du inte börjar använda header-taggarna bara för att göra en textrad större. Det finns mycket bättre och mer specifika metoder för att formatera text, och vi ska börja titta på några av dem i nästa kapitel som handlar om fet och kursiv text.
| < Tidigare: Head och Body |