Dlaczego musimy używać div?

13

Dziś rano, kiedy pisałem trochę html i haml, przyszło mi do głowy, że sposób użycia div jest niedorzeczny. Dlaczego div nie jest dorozumiane? Wyobraź sobie, że to:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

było to:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

Jeśli założono część elementu „klasa div”, HTML byłby bardziej semantyczny i nieskończenie bardziej czytelny dzięki pasującym znacznikom zamykającym!

Jest to podobne do HAML, gdzie mamy:

.content Hello, World!

Który staje się:

<div class='content'>Hello, World!</div>

Wydaje mi się, że jedyną rzeczą, która musiałaby się wydarzyć, aby działało to w przeglądarkach, jest to, że przeglądarki mogłyby zacząć interpretować każdy element bez istniejącej definicji elementu HTML jako sugerującej <div class="<element name>">.

Może to być całkowicie kompatybilne wstecz; w przypadku selektorów CSS i jQuery itp. „div.hero-img” może nadal działać i być wymaganą składnią do wybierania elementów.

Wiem o nowej specyfikacji komponentów internetowych, ale jest to znacznie bardziej skomplikowane niż sugerowane tutaj. Czy możesz sobie wyobrazić, jak przyjemnie byłoby spojrzeć na źródło strony i zobaczyć HTML, który tak wyglądał ?!

Dlaczego więc musimy używać div?

Jeśli spojrzysz na listę elementów HTML5 Mozilli , każdy element ma znaczenie semantyczne, a następnie przechodzimy do <div>niego i mówi:

„Reprezentuje ogólny pojemnik bez specjalnego znaczenia”.

... a następnie wymieniają dowolne elementy, które dodają do HTML5, takie jak <details>.

Oczywiście, jeśli ta koncepcja dorozumianych div zostanie dodana do specyfikacji HTML, normalizacja zajmie dziesięć lat, co stanowi milion lat w sieci.

Myślę, że musi być dobry powód, dla którego to się jeszcze nie wydarzyło. Proszę, wytłumacz mi to!

Jordan Davis
źródło
W rzeczywistości istnieją dwa nie-semantyczne kontenery: div i span
Lie Ryan

Odpowiedzi:

7

Problem 1: Białe spacje

Uważam, że tak się nie stało. Chociaż jednym z dobrych powodów, że tak się nie stało i prawdopodobnie nie powinno tak się stać, jest to, że white-spacesw CSS classesdefiniuje się wiele klas dla elementu, podczas gdy w HTML one definiują attributes.

Wyjaśnij (lub poproś przeglądarkę o przetworzenie) następującego kodu:

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

Czy familydefinicja drugiej klasy lub atrybutu elementu HTML? Jak zapewne widać z parsera tej witryny, uważa, że ​​jest to atrybut.

Więc jeśli chcę <div class="pet family">, nie ma sposobu na zdefiniowanie dwóch klas, co jest jednym z dwóch głównych powodów, dla których używałbym klasy zamiast identyfikatora.

Problem 2: Przekaż zgodność!

Używanie <div>s zmusza nas (przynajmniej niektórych z nas) do prawidłowego wcięcia i skomentowania naszego kodu, co jest dobrą praktyką dla wszystkich języków programowania.

Zamiast tego zamiana bloków HTML w zmienne spowodowałaby duże zamieszanie wśród nowych programistów co do tego, co jest, a co nie robi czegoś konkretnego w HTML .

Ponadto, spowoduje to zabawny efekt uboczny, że należy rozpocząć porównanie starego kodu przed nowymi tagów HTML5, by upewnić się, że nie pochodzą z tej samej nazwie co zrobiłeś dla swojej klasy div ...

Ten sam problem dotyczy variablesużywania reserved wordsw niektórych językach. PHP rozwiązało to za pomocą znaku dolara, więc podobne podejście w HTML dałoby coś niewiele lepszego niż obecne użycie <div class="something">.

mavrosxristoforos
źródło
Czy byłby jakiś problem z facetem, który wynalazł „klasę”, określając, że <z:name1 attr1=foo attr2=bar> ... <z/name2 attr3=boz ... </z>byłoby to semantycznie równoważne, <div class="name1" attr1="foo" attr2="bar">...</div><div class="name2" attr1="boz"> ... </div>ale wysłanie przez modem 14,4K zajmuje dużo mniej czasu?
supercat
Nie sądzę. Ale byłaby to tylko inna składnia do napisania dokładnie tego samego, bez ulepszania koncepcji w <div class="">jakikolwiek sposób. Z drugiej strony, po co to definiować, z:name1czy z/name2jest to znacznik HTML, classa nie jego id? I znów pojawia się problem białych znaków. Musiałoby być z:"name1 name2"zatem zadeklarowanie dwóch klas, które prawie znów stają się tym samym.
mavrosxristoforos,
Istnieje wiele możliwości składni. Chodziło mi o to, że w erze, w której wiele osób używało modemów 14,4K lub wolniejszych, powinna istnieć forma, która przynajmniej uwzględniała problemy z przepustowością.
supercat
Zdecydowanie to rozumiem. Jako programista stron internetowych wciąż staram się minimalizować wszystko, aby tworzyć szybsze witryny i nie tylko. Uważam jednak, że pod wieloma względami jest to dobre podejście.
mavrosxristoforos,
5

Używamy <div>zamiast tego, co łaskocze, na co masz ochotę, ponieważ ułatwia przetwarzanie i renderowanie przez przeglądarkę.

Jako przeciw-przykład XML pozwala na tworzenie dowolnych nazw znaczników. Możliwość tworzenia dowolnych nazw znaczników wiąże się z kosztami przetwarzania. Parsery XML muszą zbudować słownik znaczników używanych w dokumencie jako część / podczas parsowania dokumentu.

Korzystając z <div>przeglądarek, wiedz, że jest tam pojemnik i że może go zignorować lub przekazać do innego narzędzia w łańcuchu, które może coś z nim zrobić.


źródło
Jestem prawie pewien, że gdyby przeglądarki wykorzystały wspomnianą metodę domyślną div, koszt przetwarzania byłby znikomy. Korzyści z czytania i zapisywania byłyby ogromne.
Jordan Davis
3
<div>oznacza mniej złożoności, co zawsze jest dobrą rzeczą. HTML w jego rdzeniu składa się z dwóch rodzajów konstrukcji: poziomu bloku i wbudowanego znacznika. Więcej sposobów wyrażania tego samego powoduje tylko bałagan, którym jest HTML.
ułatwia przetwarzanie i renderowanie przez przeglądarkę. ” To nie jest tak naprawdę prawda. Przeglądarka jest wymagana do parsowania nierozpoznanych tagów, a wszystkie metody DOM i selektory CSS muszą nadal nad nimi pracować zgodnie z oczekiwaniami, a przeglądarki nadal będą stosować CSS do nierozpoznanych elementów. Jedyną rzeczą, której przeglądarka nie robi z nierozpoznanymi tagami, jest zastosowanie domyślnych stylów (stylów użytkownika) i zachowań.
Lie Ryan
3

Sugerujesz zezwolenie autorom stron internetowych na dodawanie dowolnych nazw elementów do HTML w celach prywatnych (niestandardowych). Ma to duży problem: dodanie nowych elementów do standardu HTML będzie niebezpieczne, ponieważ różni autorzy mogą już używać tej samej nazwy elementu do celów prywatnych - zmieniając w ten sposób semantykę strony z mocą wsteczną. Ludzie nie są zadowoleni, gdy nowe wersje przeglądarek psują istniejące strony internetowe, więc nie można tego robić.

Ten sam problem dotyczy używania dowolnych nazw atrybutów do celów prywatnych. Dlatego HTML5 wymaga przedrostka „data-” dla atrybutów użytku prywatnego, aby nie kolidowały z nowymi atrybutami w standardzie.

Div i span są zdefiniowane jako semantycznie neutralne elementy, co oznacza, że ​​możesz ich używać do celów prywatnych bez obawy, że semantyka zmieni się w przyszłych przeglądarkach. Jasne, wymaga kilku dodatkowych znaków, aby dodać nazwę klasy, ale kompatybilność z przodu sprawia, że ​​warto.

JacquesB
źródło
2

Twój własny przykład pokazuje jedną właściwość, dlaczego divy nie są aż tak śmieszne.

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

imgTag nie został poprawnie zamknięty . Niektóre tagi, takie jak img, br, hr, a inni nie mają żadnej treści, a zatem nie mogą być zamknięte. Parser wie o tym.

Z divdrugiej strony, tag powinien być zamknięty, ponieważ zawiera treść. Jeśli właśnie wymieszałeś własny tag, analizator składni nie miałby pojęcia, czy powinien oczekiwać, że tag zostanie zamknięty, czy nie.

Powód, dla którego niektóre elementy mają być zamknięte, a inne nie pochodzą z dziedzictwa SGML, co ładnie opisuje ten post na blogu: http://www.colorglare.com/2014/02/03/to-close-or-not- to-close.html

Pete
źródło
2

To kwestia zdefiniowania. Jeśli używasz XHTML, który jest czystym XML, a więc w pełni zdefiniowanym, możesz użyć własnej przestrzeni nazw, tutaj na przykład poprzez prefiks q::

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

Jeśli użyjesz XML do konwersji na (X) HTML, możesz całkowicie wygenerować z darmowego tagu „HTML” prawdziwy HTML <div class="hero-img">.


W niektórych tagach atrybut przestrzeni nazw z własnym (obojętnym) adresem URL:

xmlns:q="http://..."
Joop Eggen
źródło
1
+1 za proste rozwiązanie. Nie musi nawet zawierać przedrostka przestrzeni nazw i może po prostu zadeklarować domyślny NS dla ogólnego dokumentu i podać XSLT, aby przekształcić go w (X) HTML.
DougM
1
Przestrzeń nazw XML nie jest zdefiniowana przez prefiks, ale przez wartość deklaracji xmlns tego prefiksu. qtutaj jest całkowicie bez znaczenia prefiks (i jest niepoprawny XML), chyba że zadeklarowałeś xmlns gdzieś w dokumencie. Możesz także ponownie określić tę samą przestrzeń nazw z różnymi prefiksami lub ustawić domyślną przestrzeń nazw dla określonej sekcji dokumentu, i dopóki wartości xmlns są równe, te różne prefiksy będą traktowane jednakowo przy stosowaniu CSS lub w DOM.
Lie Ryan
@LieRyan to dobry punkt. Powinienem o tym wspomnieć. Zakładając, że fakt był znany. Dodano
Joop Eggen
0

Jednym z kluczowych elementów HTML jest posiadanie predefiniowanych elementów tagów. Dlatego.

Klasa div = jest sposobem na obejście tego „ograniczenia”.

I dlatego nie widzisz tych „domniemanych” konstrukcji.

Pieter B.
źródło
Powiedz to wszystkim inżynierom Google, którzy definiują nową specyfikację komponentów internetowych ... Rozumiem, co masz na myśli, ale ostatecznie w ciągu następnych kilku lat nastąpi eksplozja elementów generowanych przez programistów. Mój pomysł jest po prostu bardziej przyjazny dla użytkownika. Punkt jednak zajęty.
Jordan Davis
0

Celem elementu div jest sama struktura. Umożliwia grupowanie elementów w ramach jednego wspólnego elementu. Nie ma to nic wspólnego z białą przestrzenią, szybkością, renderowaniem, semantyką ani niczym innym. Pomaga ci w CSS pod względem stylizacji i javascript pod względem selektorów. Jeśli zmienisz go na inny element, zmienisz cel.

Tworzenie własnego nazwanego elementu, jak pokazano, ma problem polegający na tym, że wyszukiwarki i inne narzędzia nie wiedziałyby, co oznaczają twoje elementy. Co to jest „hero-img” i czym różni się od mojego „hero-image” i jak mój interfejs API powinien sobie z tym poradzić, kiedy odwiedzam twoją stronę? Jak przeglądarka powinna obsługiwać ten element? Czy jest to poziom blokowy czy wbudowany? Za dużo pytań.

Obrabować
źródło
0

Zasadniczo znaczniki div są przydatne do stosowania podziału lub sekcji na stronie internetowej. Możesz użyć znacznika div jako kontenera, w którym można zastosować inne elementy. Pomoże również w stosowaniu CSS i niektórych skryptów w określonym elemencie.

Ishan Shah
źródło