Jeśli spojrzysz na HTML narzut 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.
Przykład: To jest zdanie tekstu.
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 zdanie pogrubienie, dodaj otwierające i zamykające znaczniki przed i po tym słowie.
Przykład: To jest zdanie 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 zdanie 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ą być zamknięte, zanim będzie można zamknąć pudełko zawierające.
Przykład: To jest zdanie 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. i 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 zdanie tekstu i ma też trochę tekst pisany kursywą także.
To jest kolejny 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:
.treść główna a {
kolor: #F00;
}
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 — a nawet może całkowicie uszkodzić wygląd strony, jeśli przeglądarki nie mogą dowiedzieć się, jak poprawnie renderować stronę, ponieważ elementy HTML i tagi są poza miejsce.
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.