Dlaczego musimy używać div?

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!

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">.

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ć.

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.

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

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://..."

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.

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ń.

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.