Grunderna i HTML
I den här artikeln förklarar vi grunderna i HTML.
Detta förklarar huvudtaggarna som DOCTYPE-deklarationen, <html>, <head> och <body>-taggarna. Den beskriver också taggar, attribut och specialtecken.
YouTube Video
Grunderna i HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>I början av filen deklarerar vi att detta är ett HTML5-dokument, vilket innebär att det följer reglerna för HTML5.
-
<html>Taggen
<html>är det yttersta elementet i ett HTML-dokument som omsluter hela innehållet. Varje HTML-fil innehåller endast en<html>-tagg, och alla andra taggar är inbäddade inom denna tagg. Attributetlang="en"i den öppnande<html>-taggen informerar webbläsaren om att dokumentet är skrivet på engelska. Detta hjälper till att informera skärmläsare och sökmotorer om dokumentets språk. -
<head>Taggen
<head>definierar metadata (information) för sidan. Detta inkluderar sidans titel, teckenkodning och inställningar för responsiv design. Responsiv design syftar på en metod som är utformad för att webbplatser eller appar ska anpassa sig och visas väl på olika enheter och skärmstorlekar. Detta gör det möjligt för användare att bekvämt visa innehåll på olika enheter såsom smartphones, surfplattor och datorer.<meta charset="UTF-8">sätter dokumentets teckenkodning till UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">är en inställning som optimerar visningen för mobila enheter. Sidan anpassas till enhetens skärmbredd.<title>representerar sidans titel som visas i webbläsarens flik. I det här exemplet är titeln 'Grunderna i HTML' satt. -
<body>Taggen
<body>innehåller den del som visar innehåll för användare. Inom denna tagg skrivs text, bilder, länkar, etc. -
<main>Taggen
<main>representerar sidans huvudinnehåll. Detta inkluderar rubriker och stycken. -
<h1>Taggen
<h1>representerar den viktigaste rubriken på sidan. Det är vanligt att använda taggarna<main>och<h1>endast en gång i ett dokument. -
<p>Taggen
<p>representerar ett stycke. -
<!-- Comment -->Du kan skriva kommentarer i HTML i detta format. Eftersom klient-sidan av HTML kan ses av vem som helst, inkludera inte känslig information såsom lösenord eller API-nycklar i kommentarer.
HTML har många taggar, men var uppmärksam på följande punkter här. En HTML-fil består av en DOCTYPE deklaration och en <html> tagg. Taggen <html> innehåller en <head> tagg och en <body> tagg. I HTML är alla taggar inneslutna inom <html> taggen, vilket uttrycker textens struktur genom föräldra-, barn- och syskonrelationer, liknande en trädstruktur. När du skriver HTML, fokusera också på dokumentstrukturen.
Taggar och attribut
Låt oss nu ta en titt på HTML-taggar och attribut.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Taggar är inneslutna i vinkelparenteser (<, >) och består vanligtvis av ett par av öppnings- och stängningstaggar. Det finns dock också enskilda taggar, som <meta>-taggen och <img>-taggen, som inte innehåller något innehåll. Enskilda taggar kräver ingen stängningstagg.
Taggar kan ha attribut, som ger ytterligare information till taggen. Attribut skrivs inuti öppningstaggen i formatet attributNamn="värde".
Här refereras <div> till som en tagg och <div>Content</div> som ett element.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Vanliga attribut i HTML inkluderar id, class och style. Attributet id används för att ge ett element en unik identifierare, och det kan endast finnas ett element med samma id på en sida. Det är användbart när man manipulerar specifika element med JavaScript eller CSS. Attributet class tillåter dig att gruppera flera element med CSS eller JavaScript genom att tilldela ett klassnamn. Du kan tilldela samma klass till flera element, vilket möjliggör att stilar delas. Attributet style specificerar CSS-stilar inline för ett element. Normalt definieras stilar i ett externt stilmall eller inom <style>-taggen, men detta attribut används när du vill specificera stilar direkt för enskilda element.
Specialtecken i HTML
Låt oss nu undersöka specialtecken i HTML.
I HTML finns det specialtecken som används för att visa specifika symboler och tecken. Dessa specialtecken kallas entiteter. Specialtecken börjar med & (ampersand), följt av ett namn eller ett nummer, och slutar med ; (semikolon).
Representativa specialtecken i HTML
Här är några vanliga specialtecken.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Exempel på hur man använder specialtecken i HTML
Särskilt vinkelparenteser (<, >) och dubbla citat måste användas korrekt i HTML.
Vinklade parenteser (<, >) och dubbla citattecken bör representeras som specialtecken i HTML, som visas nedan.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML-versioner
Låt oss ta en titt på HTML-versionerna här.
HTML-versionerna har utvecklats för att definiera strukturen och funktionaliteten hos webbsidor. Här är de huvudsakliga versionerna:.
-
HTML 1.0 (1993)
Den första HTML-versionen hade bara mycket grundläggande uppmärkningsfunktioner. Den definierade element som länkar, rubriker, stycken och listor.
-
HTML 2.0 (1995)
Den första standardiserade versionen, med fler tillagda element, inklusive stöd för formulär och tabeller.
-
HTML 3.2 (1997)
Fler layoutfunktioner lades till, vilket tillät inbäddning av stilelement och skript. Dessutom blev layouter med hjälp av
<table>-elementet vanliga. -
HTML 4.01 (1999)
Separationen av struktur och presentation avancerade, och CSS introducerades. Skapandet av standardkompatibla webbplatser blev rekommenderat. Dessutom förbättrades internationalisering och tillgänglighet av dokument.
-
HTML5 (2014)
Den senaste större versionen, som introducerade stöd för video och ljud, canvas, lokal lagring, geolocation och andra nya API:er. Den är mobilvänlig, vilket möjliggör utveckling av mer interaktiva webbapplikationer.
HTML5.2 är en version av HTML som rekommenderades 2017 och är en förbättrad version av HTML5. Sedan HTML5.2 uppdateras det kontinuerligt som HTML Living Standard, snarare än att ha ett statiskt versionsnummer.
HTML har utvecklats genom dessa versioner och blivit en mer flexibel och kraftfull webbteknologi.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.