19 powszechnie używanych tagów HTML, które warto znać dla początkujących
Opublikowany: 2022-12-08Jeśli chcesz zostać programistą front-end, jedną z najczęstszych rad, jakie otrzymasz, jest nauczenie się języka HTML. Hypertext Markup Language, w skrócie HTML, jest podstawą większości stron internetowych.
HTML składa się z różnych rzeczy, takich jak znaczniki, atrybuty i elementy. Skupimy się na tagach HTML. Używamy tagów HTML, aby informować przeglądarki, jak uporządkować zawartość w nagłówki, tytuły, akapity, obrazy i wiele innych. Znaczniki HTML są zatem jak słowa kluczowe, które określają, w jaki sposób przeglądarka będzie wyświetlać lub formatować zawartość.
Serwery odczytują znaczniki HTML od góry do dołu. Nie ma ograniczeń co do liczby tagów HTML, które powinna zawierać strona internetowa.
- Wszystkie znaczniki HTML są ujęte w
<> - Każdy znacznik HTML pełni inną funkcję
- Większość tagów HTML ma otwierający
<tag>i zamykający</tag>
Tagi HTML a elementy HTML a atrybuty HTML
Większość ludzi używa terminów znaczniki HTML i elementy zamiennie. Ale czy są takie same? Z technicznego punktu widzenia elementy HTML i znaczniki HTML różnią się.
Tagi HTML definiują elementy HTML. Aby to osiągnąć, zawartość jest opakowywana przy użyciu nazwy tagu otwierającego i zamykającego, które odpowiadają treści tagu, z którym pracujemy.
To jest przykład elementu HTML:
<p> This is a paragraph </p><p> jest przykładem znacznika HTML
Atrybuty HTML dostarczają dodatkowych informacji o elementach HTML w dokumencie. Atrybuty znajdują się w elementach HTML.
To jest przykład atrybutu HTML
<button id=" SubmitOrder" class="btn">Order</button>Tagi HTML, które każdy powinien znać
HTML jako język znaczników ewoluował przez lata, odkąd Tim Berners-Lee wprowadził go w 1993 roku. Pierwsza wersja HTML miała 18 znaczników. Nowe tagi są dodawane z każdą wersją HTML; ostatnią aktualizacją był HTML5 w 2014 roku.
Dokładne porównanie HTML i HTML5 pokazuje, że ten ostatni ma znaczniki semantyczne, takie jak <article>, <header> i <footer>, które jasno opisują treść. Obecnie mamy ponad 100 tagów HTML. Oto niektóre z najpopularniejszych tagów, które powinieneś znać:
<!DOCTYPE>
DOCTYPE nie jest technicznie tagiem, ale deklaracją, która mówi przeglądarce, jaki rodzaj pliku zostanie załadowany. Ten znacznik informuje przeglądarkę o typie kodu HTML, który zostanie załadowany.
W HTML5 możesz zadeklarować swój plik jako
<!DOCTYPE html>Lub
<!doctype html>Uwaga: Deklaracja nie ma znacznika zamykającego i nie jest rozróżniana wielkość liter.
<html> </html>
Znacznik <html> ….. </html> występuje po znaczniku DOCTYPE. Ten znacznik definiuje dokument jako stronę internetową; każdy inny element zostanie zagnieżdżony w środku. Znacznik HTML określa początek i koniec dokumentu HTML.
Znacznik <html> jest reprezentowany jako;
<html>Content</html><głowa></głowa>
Sekcja nagłówka dokumentu HTML jest reprezentowana przez znacznik <head>. Znacznik ten jest zawarty w znaczniku <html> i podaje ogólne informacje o stronie internetowej.
Znacznik <head> zawiera inne znaczniki, które podają specyfikę strony internetowej, takie jak tytuł i autor strony. Zawartość tego znacznika nie jest wyświetlana na stronie internetowej
To jest składnia znacznika <head>;
<head> …….. </head><tytuł></tytuł>
Tag <title> deklaruje tytuł strony internetowej. Ten tag jest zawarty w tagu <head>. Znacznik <title> pojawi się na pasku tytułu lub na karcie w oknie przeglądarki, ale nie na rzeczywistej stronie internetowej.
Składnia znacznika <title> to;
<title>HTML Tags for Beginners</title>Wewnątrz znacznika <head> pojawi się jako;
<head> <title>HTML Tags for Beginners</title> </head><body> </body>
Tag <body> wyświetla całą widoczną zawartość strony internetowej. Obrazy, linki, zwykły tekst, filmy i inne elementy można znaleźć w tagach <body> i </body>.
Niektóre inne znaczniki, które znajdziesz w treści, to znacznik <p> dla akapitu, znacznik <a> dla obrazów, znacznik <strong> dla pogrubionego tekstu i znacznik <ol> dla uporządkowanej listy, by wymienić tylko kilka.
Składnia znacznika <body> to;
<body> Content </body><h1> do <h6> Znaczniki
W dokumencie HTML może znajdować się do 6 znaczników nagłówków. Każdy ze znaczników jest reprezentowany przez liczbę zaczynającą się od 1 do 6 jako <h1>, <h2>, <h3>, <h4>, <h5> i <h6>.
H1 to największy znacznik nagłówka, a H6 to najmniejszy.
W dokumencie HTML znaczniki nagłówków mogą być reprezentowane w następujący sposób:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>Znaczniki od <h1> do <h6> są zawarte w znaczniku <body>.
Na przykład znacznik ,<H1> zostanie ujęty jako;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
Znacznik <p> </p> lub po prostu znacznik akapitu jest używany, gdy chcesz uporządkować treść w akapicie. Naciśnięcie przycisku „Enter” w dokumencie HTML w edytorze kodu nie spowoduje utworzenia nowego akapitu.
Jeśli chcesz mieć więcej niż jeden akapit, musisz użyć kilku znaczników <p> </p> w swoim dokumencie. Znaczniki akapitu powinny być ujęte w znaczniku <body>.
Składnia znacznika akapitu to;
<p> ….some content here….</p>Jeśli chcesz mieć cztery akapity, Twój kod będzie miał strukturę;
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><b> </b>
Znacznik <b> </b> lub po prostu pogrubiony sformatuje zawartość między otwierającym <b> a zamykającym </b> jako pogrubiony.
Pogrubiony znacznik może znajdować się między nagłówkiem, takim jak H1, a nawet w obrębie znacznika akapitu.
Oto przykłady pogrubionego tagu;
<b> Bold Tag </b>Wyrażenie „Bold Tag” zostanie pogrubione.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>Wydanie piąte będzie pogrubione.
<i> </i>
Znacznik kursywy, oznaczony przez <i>, powoduje pochylenie tekstu wewnątrz znaczników.
Na przykład, jeśli mamy
<i> These are italics </i>Słowa „ to jest kursywa ” będą wyświetlane kursywą.
<u> </u>
Znacznik podkreślenia lub <u> jest używany, gdy chcesz podkreślić określony fragment tekstu w dokumencie HTML.
Na przykład, jeśli mamy;
<u> underline these words </u>Fraza między znacznikami zostanie podkreślona.
<środek> </środek>
Znacznik Center, <center>, służy do wyśrodkowania treści w dokumencie HTML.
Na przykład, jeśli mamy tag h2 zapisany jako <h2> Centering Content in HTML </h2> , możemy go wyśrodkować w następujący sposób;
<center> <h2> Centering Content in HTML </h2> </center><rozpiętość></rozpiętość>
Tag Span, <span>, to ogólny kontener wbudowany, który nie ma domyślnego stylu. Możesz użyć znacznika span do grupowania tekstów, którym chcesz nadać styl.
Możesz umieścić tag wewnątrz innych tagów, takich jak nagłówki i akapity;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><dział></dział>
Znacznik podziału, w skrócie div, to znacznik, który umożliwia grupowanie różnych znaczników w dokumencie HTML.
Tagowi div można nadać „klasę”, aby dodać zewnętrzną stylizację za pomocą CSS.
W ten sposób reprezentowany będzie div zawierający znaczniki h1, h2 i akapit.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em></em>
Wyróżnienie lub znacznik <em> służy do podkreślenia pewnych słów w dokumencie HTML.
Treść między znacznikami <em> będzie wyświetlana ukośnie lub kursywą.
Wyróżniona treść w akapicie, która może pojawić się w edytorze kodu, pojawi się jako;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
Znacznik <sup> lub indeks górny pozwala umieścić załączony tekst nad resztą. Doskonałym przykładem jest sytuacja, w której chcesz podnieść liczbę X do kwadratu i przedstawić ją matematycznie, aby otrzymać X 2
Składnia dla <sup> w znaczniku akapitu będzie następująca;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
Indeks dolny lub znacznik <sub> jest przeciwieństwem znacznika indeksu górnego. Treść zawarta w tagu <sub> pojawi się poniżej normalnego wiersza tekstu. Doskonałym przykładem jest zapisanie wzoru chemicznego wody jako H 2 0.
Składnia znacznika indeksu dolnego będzie następująca;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> to samozamykający się tag oznaczający przerwę. Cała zawartość po <br> rozpocznie się w nowej linii.
Składnia dla <br> w akapicie będzie następująca;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p><ol></ol> i <li> </li>
Znacznik uporządkowanej listy lub <ol> musi być używany z innym znacznikiem, takim jak <li>.
Oba mogą pojawić się w edytorze kodu jako;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>Podczas renderowania w przeglądarce zawartość będzie wyświetlana jako numerowana.
<img src=””/>
Możesz dodać obraz, aby uzyskać atrakcyjność wizualną, a nawet logo. W takim przypadku przydatny jest samozamykający tag graficzny <img src=””/>.
Składnia tagu obrazu będzie następująca;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>Treść ujęta w cudzysłów reprezentuje źródłowy adres URL.
Podsumowanie
Istnieje ponad 100 tagów HTML, ale powyższe to te, które powinieneś znać jako początkujący. HTML jest obsługiwany w większości edytorów kodu, dzięki czemu masz pewność, że nigdy nie popełnisz błędu, gdy zaczniesz się uczyć.