Znaczniki html, które musisz znać
Wstęp
W języku HTML5 istnieje ponad 100 znaczników!
Strasznie dużo prawda? Wiele osób, które dopiero zaczynają naukę języka HTML, chce się ich wszystkich nauczyć "na blachę". Jest to bardzo ambitny pomysł (szacunek!), ale niekoniecznie dobry.
Nauka wszystkich znaczników zajmie Ci sporo czasu, a przy okazji masz bardzo duże szanse żeby się całkowicie zniechęcić i porzucić naukę już w przedbiegach. Co gorsza, nauka ich wszystkich zwyczajnie mija się z celem.
Prawda jest taka, że twórcy stron internetowych stosują zaledwie niewielką część z dostępnej puli znaczników.
Mogłoby się zatem przydażyć (z dużym prawdopodobieństwem), że sporej części wyuczonych znaczników nigdy już więcej nie spotkałbyś na swojej drodze. Szkoda czasu i energii! Lepiej zaoszczędzony czas przeznaczyć na coś bardziej przydatnego np. naukę CSS.
Poniżej pręzentuję listę, według mnie, najważniejszych znaczników HTML. Klikając w wybrany znacznik zostaniesz przeniesiony do krótkiego opisu.
Jeśli opanujesz całą tę listę, to możesz z czystym sumieniem uznać, że znasz język HTML w więcej niż wystarczającym stopniu. Jendak nawet poniższej listy nie musisz się uczyć naraz - wręcz odradzam. Pamiętaj, że w nauce najważniejsza jest praktyka, zatem to właśnie na niej skup się najbardziej.
Niech ta lista będzie dla Ciebie wyznacznikiem tego, jak dobrze znasz język HTML.
Lista najczęściej stosowanych znaczników
(w kolejności alfabetycznej)
- <!-- -->
- <!DOCTYPE>
- <a>
- <article> (dodany w HTML5)
- <b>
- <body>
- <br>
- <button>
- <div>
- <em>
- <footer> (dodany w HTML5)
- <form>
- <h1> do <h6>
- <head>
- <header> (dodany w HTML5)
- <hr>
- <html>
- <i>
- <img>
- <input>
- <label>
- <li>
- <link>
- <main> (dodany w HTML5)
- <meta>
- <nav> (dodany w HTML5)
- <ol>
- <p>
- <picture> (dodany w HTML5)
- <pre>
- <section> (dodany w HTML5)
- <script>
- <select>
- <span>
- <strong>
- <style>
- <table>
- <tbody>
- <td>
- <textarea>
- <th>
- <title>
- <tr>
- <u>
- <ul>
- <video> (dodany w HTML5)
Jeśli chcesz zobaczyć pełną listę (wszystkich) znaczników, to znajdziesz ją tutaj.
<!-- -->
Znacznik komentarza.
Komentarze nie są wyświetlane przez przeglądarkę, ale są widoczne w źródle strony.
Przykład:
<!--To jest komentarz. Komentarze nie są wyświetlane przez przeglądarkę.-->
<p>To jest paragraf</p>
<p>To jest drugi paragraf</p>
<!DOCTYPE>
Deklaracja <!DOCTYPE> musi występować jako pierwszy element w dokumencie HTML - nawet przed znacznikiem <html>.
Deklaracja ta inforumje przeglądarkę, że jest to dokument HTML oraz w jakiej wersji języka HTML dokument został stworzony.
Jeżeli mowa o HTML5 to deklaracja wygląda tak: <!DOCTYPE html>. Właśnie tę deklarację warto zapamiętać, ponieważ
jeśli będziesz tworzyć nową stronę internetową to z pewnością będzie to HTML w wersji 5.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł</title>
</head>
<body>
Treść
</body>
</html>
<a>
Znacznik hiperłącza - popularnie link.
Znacznik ten jest używany do linkowania z jednej strony do innej strony.
Najważniejszym atrybutem znacznika <a> jest href, którego wartość zawiera adres linkowanej strony internetowej.
Innym, istotnym atrybutem <a>, jest target. Określa on gdzie linkowana strona ma zostać otwarta.
Najczęściej ten atrybut jest pomijany, co oznacza tak naprawdę domyślną jego wartość _self - otwarcie strony w tym
samym oknie/zakładce.
Jeśli już ktoś określa wartość dla target to zazwyczaj jest to _blank, czyli otwarcie strony w nowym oknie lub zakładce.
Przykład:
<a href="https://www.google.pl">Wyszukiwarka Google</a><article>
W sekcji <article>...</article> możemy zawrzeć tekst, który stanowi spójną całość czyli np. artykuł na blogu.
Co mam na myśli pisząc "spójną całość"? Pomyśl o tekście, który z powodzeniem mógłbyś umieścić na innej stronie
i nie straciłby on nic na swoim przekazie - nie byłby wyrwany z kontekstu. Taki tekst jest świetnym kandydatem
do umieszczenia go w sekcji <article>...</article>.
Z kolei pomyśl o małym fragmencie tekstu, np. gdybym umieścił na innej stronie fragment niniejszego opisu:
"on nic na swoim przekazie - nie byłby wyrwany". Osoba, która przeczyta taki krótki fragment, będzię
całkowicie zmieszana, nic nie zrozumie. Takiego niekompletnego fragmentu nie powinieneś zatem
umieścić w sekcji <article>...</article>.
Przykład:
<article>
Tekst artykułu o znacznikach html.
</article>
<b>
Znacznik pogrubionego tekstu.
Jeśli otoczysz tekst tym znacznikiem to tekst zostanie wyświetlony jako pogrubiony.
Specyfikacja HTML5 zaleca użycie innego znacznika, a mianowicie <strong>, który będzie miał dokładnie taki sam efekt
jak <b>.
Przykład:
<b>Pogrubiony tekst</b> - normalny tekst.<body>
Wszystkie ustawienia strony (niewidoczne dla użytkownika) powinny być zawarte w sekcji <head>...</head>, natomiast treść
strony (widoczna dla użytkownika), musi być zawarta w sekcji <body>...</body>.
Zatem wszystko, co ma być widoczne dla odwiedzających Twoją stronę: tekst, obrazki, video, linki itd. musisz umieścić
w sekcji <body>...</body>.
Przykład:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Treść strony
</body>
</html>
<br>
Znacznik końca linii.
Znacznik <br> stosuję się, gdy tekst ma przejść do następnej linii.
Żeby to lepiej zobrazować, wyobraź sobie, że
piszesz e-mail do znajomego. Idę o zakład, że bardzo często używasz klawisza enter. Po jego wciśnięciu kursor przeskakuje
do następnej linii i tam kontynuujesz pisanie. Znacznik <br> ma dokładnie takie samo działanie.
Pewnie rodzi ci się w głowie pytanie "Po co używać znacznika <br> skoro można użyć wygodniejszego entera?".
Otóż enter w kodzie HTML jest ignorowany przez przeglądarkę. Zatem jesteś skazany na użycie znacznika <br>.
Chcesz zrobić kilka linijek przerwy? Użyj <br> kilkakrotnie np. <br><br><br>.
Przykład:
Pierwsza linia tekstu.<br>Druga linia tekstu.<button>
Znacznik przycisku, zazwyczaj używany w kontekście formularza.
Najważniejszym atrybutem znacznika <button> jest type, który może przyjmowac wartości:
type="button", czylizwykły przycisktype="submit", czyli zatwierdzający formularztype="reset", czyli resetujący wartości w całym formularzu
Przykład:
<button type="submit">Zapisz</button><div>
Z ang. division - wydział, sekcja.
Jest to blokowoy element HTML ogólnego przeznaczenia. Bardzo często używany w połączeniu z CSS do stworzenia układu (layoutu) strony.
Brzmi to dość tajemniczo, ale wynika to z braku jasno określonego przeznaczenia elementu div.
Pomyśl o znaczniku końca linii <br>. Łatwo zrozumieć jego przeznaczenie - użyjesz go gdy chcesz aby tekst przeszedł do
nowej linii.
Podobnie ze znacznikiem <button>. Użyjesz go, gdy będziesz chciał wyświetlić przycisk.
Z <div> już nie jest tak łatwo... Jedyną jego cechą jest to, że tworzy nową sekcję.
Jest to jeden z najogólniejszych znaczników, jakie znajdziesz w języku HTML. Co za tym idzie, jeden z najczęściej stosowanych.
W wersji 5 języka HTML dodano kilka nowych znaczników, które zachowują się tak samo jak <div>, ale nadają utworzonej
sekcji znaczenia:
<header><nav><article><main><aside><footer><section>
Zatem jeśli chcesz stworzyć np. sekcję stopki (ang. footer), to lepiej użyć znacznika <footer> niż <div>.
Efekt jest dokładnie ten sam, ale gdy ktoś czyta taki kod to od razu wie, jakie jest przeznaczenie tej sekcji.
Przykład:
<div>Sekcja 1</div>
<div>Sekcja 2</div>
<em>
Z ang. emphasize - podkreślenie, uwypuklenie.
Znacznik <em> jest stosowany jeśli fragment tekstu wymaga większego uwypuklenia (podkreślenie znaczenia)
niż otaczający go tekst.
Przykład:
Ja <em>uwielbiam</em> chodzić do kina!<footer>
Z ang. footer - stopka.
Znacznik <footer> jest stosowany w celu oznaczenia stopki całej strony internetowej, artykułu lub sekcjii.
Zwyczajowo zawiera informację o autorze i prawach autorskich.
Przykład:
<footer>Wszystkie prawa zastrzeżone.</footer><form>
Znacznik formularza.
Znacznik <form> jest wykorzystywany do stworzenia formularza. Znacznik ten same w sobie nie definiuje pól formularza
takich jak "Imię" czy "Nazwisko", ale jest rodzicem dla tych pól.
Najważniejszymi atrybutami znacznika <form> są action i method.
Przykład:
<form action="/send" method="post">
Imię: <input type="text" name="imie">
Nazwisko: <input type="text" name="nazwisko">
<input type="submit" value="Wyślij">
</form>
<h1> do <h6>
Znaczniki <h1>, <h2>, <h3>, <h4>, <h5>, <h6> są stosowane do oznaczenia nagłówka tekstu. Nagłówek znasz
doskonal z ksiązek i gazet. Tytuł rozdziału, tytuł podrozdziału, tytuł artykułu - to wszystko są nagłówki.
W książce, tytuł rozdziału będzie zazwyczaj napisany większą czcionką niż tytuł podrozdziału.
Zabieg z wielkością czcionki wskazuje na ważność danego nagłówka.
Dokładnie na tej samej zasadzie znaczniki <h1> do <h6> są używane w dokumencie HTML.
Dla przykładu, tytuł artykułu na blogu będzie oznaczony <h1> a podtytuł <h2>.
Takie stopniowanie ważności kończy się na znaczniku <h6>.
Przykład:
<h1>Tytuł artykułu</h1>
Teskt wstępu..
<h2>Podtytuł</h2>
Treść
<h2>Podtytuł</h2>
Treść
<h2>Podsumowaie</h2>
Treść
Podsumowanie
Poznałeś dzisiaj listę, według mnie, najważniejszych i co za tym idzie najczęściej stosowanych znaczników języka HTML. Uwierz mi na słowo, że istnieje bardzo niewielka szansa, że kiedykolwiek napotkasz na znacznik spoza tej listy.
Pamiętaj, że nieznajomość nawet sporej części z przedstawionych tu znaczników, nie powinna Cię powstrzymywać przed równoległym poznawaniu języka CSS. Język HTML bez CSS-a jest wyjątkowo nieefektowną i nudną materią.
