div i span

W języku HTML znaczniki div i span są elementami używanymi do definiowania części dokumentu , dzięki czemu można je zidentyfikować, gdy konieczna jest unikalna klasyfikacja. Tam, gdzie inne elementy HTML, takie jak p (akapit), em (wyróżnienie) i tak dalej, dokładnie reprezentują semantykę treści, dodatkowe użycie znaczników span i div prowadzi do lepszej dostępności dla czytelników i łatwiejszej konserwacji dla autorów. Tam, gdzie żaden istniejący element HTML nie ma zastosowania, span i div mogą wartościowo reprezentować części dokumentu, dzięki czemu można zastosować atrybuty HTML, takie jak class , id , lang lub dir .

span reprezentuje wbudowaną część dokumentu, na przykład słowa w zdaniu. div reprezentuje część dokumentu na poziomie bloku , taką jak kilka akapitów lub obraz z podpisem. Żaden element nie ma żadnego znaczenia sam w sobie, ale pozwala atrybutom semantycznym (np. lang="en-US" ), stylizacji CSS (np. kolor i typografia) lub skryptom po stronie klienta (np. animacja, ukrywanie i powiększanie) być zastosowany.

Przykłady

Na przykład, aby ustawić określoną część tekstu w akapicie na czerwono, można użyć opcji span w następujący sposób:

Składnia HTML (kod internetowy używany do dodawania formatowania do tekstu)	Wyrenderowany wynik (widziany przez odwiedzających stronę)
< styl rozpiętości = "kolor: czerwony;" > jestem czerwona! </ rozpiętość >	jestem czerwony!

Historia

Element span został wprowadzony do HTML w drugim szkicu html-i18n grupy roboczej ds. internacjonalizacji w 1995 r. Jednak dopiero w HTML 4.01 stał się częścią języka HTML, pojawiając się w wersji roboczej HTML 4 W3C w 1997 r.

W 1995 r. wprowadzono funkcję span w celu oznaczania dowolnego zakresu tekstu w wierszu, ponieważ „potrzebny jest ogólny kontener do przenoszenia atrybutów LANG i BIDI w przypadkach, gdy żaden inny element nie jest odpowiedni”. Nadal służy temu ogólnemu celowi, chociaż od tego czasu zdefiniowano znacznie bogatszy zakres elementów semantycznych, a także istnieje wiele innych atrybutów, które mogą wymagać zastosowania.

div definiuje „podział” dokumentu, element na poziomie bloku, który bardziej różni się od elementów powyżej i poniżej niż rozpiętość materiału wbudowanego.

Różnice i zachowanie domyślne

Istnieje wiele różnic między div i span . Najbardziej zauważalną różnicą jest sposób wyświetlania elementów. W standardowym HTML div jest elementem na poziomie bloku , podczas gdy span jest elementem wbudowanym . Blok div wizualnie izoluje sekcję dokumentu na stronie i może zawierać inne komponenty na poziomie bloku. Element span zawiera część informacji wbudowaną w otaczającą treść i może zawierać tylko inne komponenty wbudowane. W praktyce domyślne wyświetlanie elementów można zmienić za pomocą kaskadowych arkuszy stylów (CSS), chociaż nie można zmienić dozwolonej zawartości każdego elementu. Na przykład, niezależnie od CSS, span nie może zawierać elementów podrzędnych na poziomie bloku.

Praktyczne zastosowanie

span i div służą wyłącznie do sugerowania logicznego grupowania zamkniętych elementów.

Istnieją trzy główne powody używania tagów span i div z atrybutami class lub id :

Stylizacja za pomocą CSS

<span> i <div> często zawierają atrybuty class lub id w połączeniu z CSS w celu zastosowania układu, typografii, koloru i innych atrybutów prezentacji do części treści. CSS stosuje się nie tylko do stylizacji wizualnej: wypowiedziane na głos przez przeglądarkę głosową styl CSS może wpływać na szybkość mowy, akcent, bogactwo, a nawet pozycję w obrazie stereofonicznym .

Z tych powodów oraz w celu wsparcia bardziej semantycznej sieci, atrybuty dołączone do elementów w HTML powinny opisywać ich cel semantyczny, a nie tylko ich zamierzone właściwości wyświetlania w jednym konkretnym medium. Na przykład kod HTML w <span class="red-bold">hasło za krótkie</span> jest semantycznie słaby, podczas gdy <em class="warning">hasło za krótkie</em> używa elementu em , aby podkreślić (pojawiający się jako tekst kursywą) i wprowadza bardziej odpowiednią nazwę klasy. Przy prawidłowym użyciu CSS takie „ostrzeżenia” mogą być wyświetlane czerwoną, pogrubioną czcionką na ekranie, ale po wydrukowaniu mogą zostać pominięte, ponieważ wtedy jest już za późno, aby coś z nimi zrobić. Być może podczas mówienia należy dać im dodatkowy stres i niewielką redukcję tempa mowy. Drugi przykład to semantycznie bogatszy znacznik, a nie tylko prezentacyjny.

Jasność semantyczna

Ten rodzaj grupowania i etykietowania części zawartości strony może zostać wprowadzony wyłącznie po to, aby strona miała ogólnie większe znaczenie semantyczne. Nie da się przewidzieć, jak World Wide Web w nadchodzących latach i dekadach. Strony internetowe zaprojektowane dzisiaj mogą być nadal używane, gdy systemy informacyjne, których nie możemy sobie jeszcze wyobrazić, przeczesują, przetwarzają i klasyfikują sieć. Nawet dzisiejsze wyszukiwarki, takie jak Google i inne, używają zastrzeżonych algorytmów przetwarzania informacji o znacznej złożoności.

Od kilku lat konsorcjum World Wide Web Consortium (W3C) prowadzi duży projekt sieci semantycznej , którego celem jest uczynienie całej sieci coraz bardziej użyteczną i znaczącą dla dzisiejszych i przyszłych systemów informacyjnych.

Ruch mikroformatów jest próbą zbudowania idei klas semantycznych . Na przykład oprogramowanie obsługujące mikroformaty może automatycznie znaleźć element taki jak <span class="tel">123-456-7890</span> i umożliwić automatyczne wybranie numeru telefonu.

Dostęp z kodu

Po dostarczeniu znaczników HTML lub XHTML do przeglądarki klienta odwiedzającego stronę istnieje prawdopodobieństwo, że kod po stronie klienta będzie musiał poruszać się po wewnętrznej strukturze (lub Document Object Model ) strony internetowej. Najczęstszym powodem jest to, że strona jest dostarczana z kodem JavaScript po stronie klienta , który będzie generować dynamiczne zachowanie po wyrenderowaniu strony. Na przykład, jeśli najechanie kursorem myszy na link „Kup teraz” ma sprawić, że cena w innym miejscu na stronie zostanie podkreślona, kod JavaScript może to zrobić, ale JavaScript musi zidentyfikować element ceny, gdziekolwiek się on znajduje w znacznikach . Wystarczyłby następujący znacznik: <div class="price">$45.99</div> . Innym przykładem jest Ajax , w której na przykład kliknięcie łącza hipertekstowego może spowodować, że kod JavaScript pobierze tekst w celu wyświetlenia nowej oferty cenowej w miejsce bieżącej na stronie, bez ponownego ładowania całej strony. Kiedy nowy tekst wraca z serwera, JavaScript musi zidentyfikować dokładny region strony, który ma zostać zastąpiony nowymi informacjami.

Narzędzia do automatycznego testowania mogą również wymagać poruszania się po znacznikach strony internetowej przy użyciu atrybutów class lub id elementów span i div . W dynamicznie generowanym HTML może to obejmować użycie narzędzi do testowania stron, takich jak HttpUnit , członek rodziny xUnit , oraz narzędzi do testowania obciążenia lub warunków skrajnych, takich jak Apache JMeter , gdy są stosowane do witryn internetowych opartych na formularzach .

Nadużycie

Rozsądne użycie div i span jest istotną częścią znaczników HTML i XHTML. Czasami jednak są one nadużywane.

Różne struktury list dostępne w HTML mogą być lepsze od domowej mieszanki elementów div i span .

Na przykład to:

 
  
  
  
 <  ul  class  =  "menu"  >  <  li  >  Strona główna  </  li  >  <  li  >  Spis treści  </  li  >  <  li  >  Pomoc  </  li  >  </  ul  >

który produkuje

... jest zwykle preferowane zamiast tego:

 
  
  
  
 <  div  class  =  "menu"  >  <  span  >  Strona główna  </  span  >  <  span  > Spis   treści  </  span  >  <  span  >  Pomoc  </  span  >  </  div  >

który produkuje

 
 
  Strona główna Spis  treści  Pomoc

Inne przykłady semantycznego użycia HTML zamiast elementów div i span obejmują użycie elementów fieldset do podziału formularza internetowego, użycie elementów legend do identyfikacji takich podziałów oraz użycie etykiety do identyfikacji elementów wejściowych formularza zamiast div , elementy rozpiętości lub stołu używane do takich celów.

HTML5 wprowadził kilka nowych elementów; kilka przykładów obejmuje header , footer , nav i figure . Użycie semantycznie odpowiednich elementów zapewnia lepszą strukturę dokumentów HTML niż span czy div .

Zobacz też

Linki zewnętrzne

Grupowanie elementów: elementy DIV i SPAN