Zagnieżdżanie znaczników HTML

Prawidłowe zagnieżdżanie tagów HTML zapobiega błędom HTML

Jeśli spojrzysz na HTML markup dla każdej dzisiejszej strony internetowej zobaczysz elementy HTML zawarte w innych elementach HTML. Te elementy, które są „wewnątrz” innych elementów, są znane jako zagnieżdżone elementy , i są one obecnie niezbędne do tworzenia dowolnej strony internetowej.

Co to znaczy zagnieżdżać znaczniki HTML?

Najłatwiejszym sposobem zrozumienia zagnieżdżenia jest myślenie Tagi HTML jako pudełka, w których przechowywane są Twoje treści. Twoje treści mogą zawierać tekst, obrazy i powiązane multimedia. Tagi HTML to pola wokół treści. Czasami trzeba umieścić pudełka w innych pudełkach. Te „wewnętrzne” pudełka są zagnieżdżone w innych.

Jeśli masz blok tekstu, który chcesz pogrubić w akapicie, będziesz mieć dwa elementy HTML jak również sam tekst.

|_+_|

Ten tekst posłuży nam jako przykład. Oto jak byłoby to napisane w HTML:

|_+_|

Przykład: To jest zdanie tekstu.

Aby stworzyć słowo wyrok pogrubienie, dodaj otwierające i zamykające znaczniki przed i po tym słowie.

|_+_|

Przykład: To jest wyrok tekstu.

Jak widać, mamy jedno pole (akapit), w którym znajduje się treść zdania, plus drugie pole ( silny para tagów), która renderuje to słowo jako pogrubione.

Kiedy zagnieżdżasz znaczniki, zamknij je w odwrotnej kolejności niż je otwierałeś. Otwierasz

pierwszy, a następnie , co oznacza, że ​​odwracasz to i zamykasz a potem

Innym sposobem myślenia o tym jest ponowne użycie analogii pudełek. Jeśli umieścisz pudełko w innym pudełku, musisz zamknąć to wewnętrzne, zanim będziesz mógł zamknąć pudełko zewnętrzne lub zawierające.

Dodawanie większej liczby zagnieżdżonych tagów

Co jeśli chcesz, aby były tylko jedno lub dwa słowa? pogrubienie i kolejny zestaw na kursywę ? Oto jak to zrobić.

|_+_|

Przykład: To jest wyrok tekstu i ma też trochę tekst pisany kursywą także.

Widać, że nasze zewnętrzne pudełko,

, zawiera teraz dwa zagnieżdżone znaczniki — i . Oba muszą zostać zamknięte, zanim będzie można zamknąć pudełko zawierające.

|_+_|

Przykład: To jest wyrok tekstu i ma też trochę tekst pisany kursywą także.

To kolejny akapit.

W tym przypadku mamy pudełka wewnątrz pudełek! Najbardziej zewnętrznym pudełkiem jest

lub podział . Wewnątrz tego pudełka znajduje się para zagnieżdżonych tagi akapitowe , a w pierwszym akapicie mamy następny oraz para tagów.

Dlaczego powinieneś dbać o zagnieżdżanie

Powodem nr 1, dla którego powinieneś dbać o zagnieżdżanie, jest to, czy zamierzasz używać CSS. Kaskadowe arkusze stylów polegaj na tym, aby tagi były konsekwentnie zagnieżdżane w dokumencie, dzięki czemu można określić, gdzie zaczynają się i kończą style. Nieprawidłowe zagnieżdżanie utrudnia przeglądarce ustalenie, gdzie zastosować te style. Spójrzmy na kod HTML:

|_+_|

Przykład: To jest wyrok tekstu i ma też trochę tekst pisany kursywą także.

To jestkolejny akapit.

Korzystając z powyższego przykładu, gdybyśmy chcieli napisać a Styl CSS to wpłynęłoby na link wewnątrz tego podziału i tylko ten link (w przeciwieństwie do innych linków w innych sekcjach strony), musielibyśmy użyć zagnieżdżenia, aby napisać ten styl, jako taki:

|_+_|

Inne względy

Ważna jest również dostępność i kompatybilność przeglądarki. Jeśli Twój kod HTML jest niepoprawnie zagnieżdżony, nie będzie tak samo dostępny dla czytników ekranu i starszych przeglądarek — może nawet całkowicie zepsuć wygląd strony, jeśli przeglądarki nie będą w stanie prawidłowo renderować strony, ponieważ elementy i tagi HTML są nie na miejscu.

Wreszcie, jeśli chcesz napisać całkowicie poprawny i poprawny kod HTML, będziesz musiał użyć poprawnego zagnieżdżenia. W przeciwnym razie każdy walidator oznaczy Twój kod HTML jako nieprawidłowy.