Etykietka (pl. tagi, czasami tag) jest elementem język HTML, który służy do oznaczania tekstu źródłowego strony internetowej. Tagi to skróty lub skróty angielskich słów w nawiasach ostrych.<>np. tag
…
skrót od angielskiego słowa ustęp, czyli tekst zawarty w tym znaczniku zostanie rozpoznany przez przeglądarki jako akapit.Każdy tag w HTML ma specjalne znaczenie i odpowiada za wyświetlanie określonych danych. Wielkość liter w nazwach tagów nie ma znaczenia, na przykład tag
…
i tag…
- To jest to samo. Oznacza to, że znaczniki można pisać zarówno małymi literami, jak i wielkie litery. Wcześniej powszechnie przyjmowano, że wszystkie znaczniki są pisane wielkimi literami, aby znaczniki różniły się od zwykłego tekstu. Teraz nie jest to konieczne, ponieważ wiele edytorów ma podświetlanie składni.Klasyfikacja tagów
W HTML jest ponad 90 tagów. Z reguły jeden tag wpływa tylko na część dokumentu, na przykład tag nagłówka pierwszego poziomu
…
. W takich przypadkach stosuje się sparowane tagi: otwarcie I zamknięcie. Znacznik otwierający (na przykład) tworzy efekt, a zamknięcie ( ) kończy ją. Jak widać na przykładzie, tag zamykający zawsze ma ten znak ( / ) to ukośnik. Te tagi nazywają się sparowany.
Niektóre tagi mają jednorazowy efekt tam, gdzie się pojawiają. Na przykład znacznik z poziomym paskiem
lub tag wyświetlania obrazu
Typy tagów
Ponadto tagi dzielą się na kilka typów, które różnią się funkcjami:
- znaczniki tytułu dokumentu;
- elementy blokowe;
- elementy wbudowane;
- elementy uniwersalne;
- listy;
- stoły;
- ramki.
Ten podział nie jest ścisły, więc niektóre tagi znajdują się w różnych grupach. Na przykład tagi do tworzenia list
- I
- Element zaczyna się od tagu początkowego.
- Element kończy się tagiem zamykającym.
- Zawartość elementu to wszystko, co znajduje się pomiędzy otwierającym i zamykającym znacznikiem. Treścią może być tekst i/lub inny element HTML.
- Element składa się tylko ze znacznika otwierającego.
- puste elementy — ,
,
,, - elementy zwykłego tekstu —
- dotyczą zarówno list, jak i elementów blokowych.
Struktura tagu
Po załadowaniu do przeglądarki same znaczniki nie są wyświetlane, ale wpływają na sposób wyświetlania ich zawartości. Jeśli tag jest błędnie napisany, jest ignorowany w całości.
Wszystkie tagi mają pewną strukturę, której należy przestrzegać podczas pisania. Ponadto prawie wszystkie tagi mają różne atrybuty, które mogą zmienić sposób wyświetlania treści.
Przyjrzyjmy się poprawnej strukturze tagów zawierających atrybuty:
Na przykład podałem dwa zupełnie różne tagi. Pierwszy pojedynczy - odpowiedzialny za wyświetlanie obrazków, atrybut - src="logo.jpg". druga … para jest odpowiedzialna za tworzenie linków, atrybut to href="witryna".
Wniosek 1: Atrybuty mogą mieć sparowane i niesparowane znaczniki.
Wniosek 2: Atrybuty mogą mieć tylko znaczniki początkowe, znaczniki końcowe nie mają atrybutów.
Zdjęcie do wyjaśnienia:
Rysunek 1. Struktura tagu html
Zadanie za uważność i znajomość składni HTML
Spójrzmy na przykład prostej strony internetowej, którą przyjrzeliśmy się w samouczku.
Element HTML to podstawowa jednostka strukturalna strony internetowej napisana w HTML.
Sparowane i pojedyncze tagi HTML
Składnia elementów HTML składających się z sparowanych znaczników to:
Uwaga: nie zapomnij umieścić symbolu „” w tagu zamykającym / ", informuje przeglądarkę, że twój element się zakończył i że to, co zostanie napisane po nim, jest już innym elementem. Jeśli nie umieścisz znaku " / " w tagu zamykającym, przeglądarka przyjmie go jako nowy element zagnieżdżony w poprzednim, który według przeglądarki nadal nie jest zamknięty.
Składnia elementów HTML składających się z pojedynczych znaczników to:
Elementy składające się z pojedynczych znaczników nazywane są pustymi. W HTML jest 16 pojedynczych tagów:
Elementy zagnieżdżone
Elementy HTML składające się z sparowanych tagów mogą zawierać dowolne inne elementy lub mogą być zagnieżdżone w innych elementach, przy czym głębokość zagnieżdżania elementów nie jest ograniczona.
Poniższy przykład ma trzy elementy, z których dwa są zagnieżdżone:
Mój pierwszy akapit
Gdy jeden element jest zagnieżdżony w innym, należy zadbać o to, aby zagnieżdżony element zaczynał się i kończył wewnątrz tego samego elementu. Na przykład poniższy kod jest niepoprawny:
Ten bardzo
ciekaweTutaj element wychodzi poza żywioł Przykład z poprawnym zagnieżdżeniem:
Ten bardzo ciekawe
Tutaj element poprawnie zagnieżdżony - jest całkowicie w elemencie Przeglądarka ignoruje białe znaki w kodzie HTML, więc możesz wykorzystać je na swoją korzyść, czyniąc kod czytelnym. Białe znaki obejmują: znaki tabulacji, łamania linii i zwykłe spacje, mogą być używane w dowolnej ilości. Przykładowy kod, który używa białych znaków:
Mój pierwszy akapit
Białe znaki
Mój pierwszy tytuł
Przykładowy kod mógłby zostać napisany bez użycia białych znaków, ale taki kod byłby mniej czytelny:
Mój pierwszy tytuł
Mój pierwszy akapit
Ponieważ kod w dokumencie HTML z czasem staje się coraz większy i bardziej złożony, staje się jasne, że użycie białych znaków faktycznie poprawia czytelność kodu.
Przeczytałeś już, że cały język składa się z tagów. W tym samouczku przyjrzymy się bliżej tagom HTML. W języku HTML znaczniki są podzielone na pojedyncze (nie sparowane) i sparowane. Tak więc pojedyncze znaczniki HTML składają się z jednego znacznika, to znaczy nie mają znacznika zamykającego. A sparowane deskryptory mają tag otwierający i zamykający.
Pojedyncze tagi HTML
Pojedyncze tagi nie mają tagu zamykającego. Na przykład:
, . Kiedyś pisano to tak:
, , teraz ten styl pisania pojedynczych tagów nie ma znaczenia, więc nie pisz w ten sposób. Najczęściej używane pojedyncze tagi:
- przenieść do Nowa linia,
- linia podziału,
Sparowane tagi HTML
Sparowane tagi dużo więcej. Deskryptor pary ma znacznik otwierający i zamykający. Znacznik pary tworzy pojemnik. Zawartość kontenera jest tym, co znajduje się między tagiem otwierającym i zamykającym. W przykładzie z tego artykułu widziałeś tag
Co to są tagi w HTML?
, więc jest to tag pair, zawartość tego tagu to tekst „Co to są tagi w HTML?”. Jego początkiem jest tag, i koniec
.Głównym błędem początkujących w pisaniu sparowanych tagów jest pomyłka w zagnieżdżaniu. Na przykład to jest poprawny wpis:
Pogrubiony akapit
. A oto błąd:Pogrubiony akapit
, dokument HTML o takim układzie nie jest uważany za prawidłowy. Aby nie pomylić zagnieżdżenia, zrób tak: utwórz sparowane tagi, następnie umieść w nich inne, a na końcu wpisz tekst wewnątrz obu tagówJak poprawnie napisać pary tagów
.Co nowego w HTML5 pod względem tagów?
Język HTML5 jest rozszerzeniem HTML4, więc zachował większość lub wszystkie tagi z HTML4 i dodał własne. HTML5 wprowadził specjalne tagi do podziału witryny na główne bloki: nagłówek, menu, stopka, pasek boczny i treść.
Dlaczego ważne jest, aby nauczyć się korzystać z tagów?
Wyszukiwarki Yandex i Google są wrażliwe na układ Dokumenty HTML sprawdzanie ich ważności. Szukają słów kluczowych zawartych w specjalnych deskryptorach i tak dalej. Ale ta sekcja nie dotyczy tego. Dotyczy to promocji (SEO).
Jak nauczyć się wszystkich tagów HTML?
Tak, jest dużo tagów. Ale nie trzeba ich specjalnie uczyć. Kiedy będziesz ćwiczyć pisanie, wszystkie deskryptory, sparowane i pojedyncze, będą łatwe do zapamiętania. Oczywiście z biegiem czasu.
Tagi HTML jest podstawą języka HTML. Tagi służą do rozgraniczenia początku i końca elementów w znaczniku.
Każdy dokument HTML składa się z drzewa elementów HTML i tekstu. Każdy element HTML jest identyfikowany przez znacznik początkowy (otwierający) i końcowy (zamykający). Znaczniki początkowe i końcowe zawierają nazwę znacznika.
Wszystkie elementy HTML są podzielone na pięć typów:
