Witam wszystkich. Ostatnio przy zabawie z małymi projektami natrafiłem na dziwny dylemat, który już od dłuższego czasu nie dawał mi spokoju. Podczas poszukiwań natrafiłem na tego typu wątek: https://stackoverflow.com/questions/354739/why-should-i-use-a-container-div-in-html
Ok, nieco to rozjaśnia sytuację, ale jak ma się to do sematycznych tagów rodem z HTML5 ? :D
Weźmy pod lupę tag main - każdy wie, czym on jest i powszechnie wiadomo, że może być tylko jeden taki na całą podstronę. Określna on oryginalną treść na całej bowiem stronie, której nie znajdzie się na innych podstronach.
Generalnie wyświetlany on jest blokowo (chyba że jakieś przeglądarki go nie interpretują). Czy zatem potrzebuje on kontenera w postaci div ?? A jeżeli tak, to jak to powinno wyglądać Waszym zdaniem ??
1. Po prostu tag main:
<main>
...content...
</main>
Czyli co tu dużo pisać.... po prostu block semantyczny typu main, który jest jednocześnie naszym selektorem którym będziemy stylować naszą główną treść.
2.
<div class="main" id="main">
<main>
...content...
</main>
</div>
Tutaj mamy przypadek, gdzie "kontenerem" owijamy cały nasz tag main, dlatego ma on klasę .main której nadajemy style, a dzięki #main możemy na samej górze strony wstawić link właśnie do tej głównej treści (przydatne, gdy mamy długi spis linków w nawigacji, zwłaszcza dla screen readerów).
3.
<main>
<div class="container">
...content...
</div>
</main>
Tym razem to kontener jest zawarty bezpośrednio w main. W nim znajdować się będzie nasza główna treść i to jego stylować będziemy.
4.
<main id="main">
<div class="container">
...content...
</div>
</main>
Czyli to samo co powyżej, tyle że tym razem nadaliśmy tagowi main ID aby można było do niego łatwo nawigować. Analogicznie, do div zamiast klasy "container" możemy po prostu nadać klasę "main" i po niej właśnie stylować naszą główną treść. Wizualizację pozostawiam Wam ;)
5.
<main class="main" id="main">
...content...
</main>
Czyli to samo co w punkcie pierwszym, tylko że nadaliśmy tu jeszcze klasę po której będziemy stylować i ID dzięki któremy łatwiej będzie nawigować do tego elementu. Przerost formy nad treścią ??
Temat moim zdaniem ciekawy, gdyż każdy chyba z nas wolałby odchudzić kod jak tylko się da. Ale spójrzmy chociaż na takowego Bootstrapa - ten chyba lubi korzystać z kontenerów jak mniemam ;p
A Wy, jakie podejście uznajecie za słuszne i stosowne i dlaczego ? Chciałbym poznać Wasze opinie i może jakieś konkretne źródła i informacje ? Bo jak mniemam Bootstrap nie robi tego bez powodu, a może się mylę ? :D
A może macie jeszcze jakieś inne podejście, którego nie wymieniłem powyżej ? Czekam na Wasze opinie :)
Pozdrawiam i życzę miłego dnia i spokojnego wieczoru :D
