W moim artykule chciałbym poruszyć niezauważaną i problematyczną kwestię nadużywania w kodzie HTML klas i elementów DIV. To tyle wstępu – teraz przejdźmy do praktyki.
Na początek chciałbym pokazać do uzyskania jakiego efektu zmierzamy:
Jak widać jest to prosty, przykładowy wpis (np. z bloga). Z zewnątrz wszystko wygląda nieźle, lecz zajrzyjmy co kryje się w środku.
[..]<body> <div id="wrapper"> <div class="category">Kategoria artykułów</div> <div class="title">To jest tytuł tego posta.</div> <div class="author">: Jacek Brożek</div> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum risus adipiscing arcu rhoncus egestas. Nullam eget purus nunc. Aliquam erat volutpat. Morbi gravida luctus diam non rutrum. Nulla in est mauris. Mauris dignissim mauris vel nulla accumsan quis scelerisque augue varius. Donec in facilisis sapien. Pellentesque nec ipsum eget tortor viverra congue et id ante.</div> </div></body></html>
#wrapper{ background: #eee; width: 500px; padding: 20px; margin: 30px;}.category{ font-size: 16px; font-weight: bold; text-decoration: underline;}.title{ font-size: 14px; color: #ff0000;}.author{ font-size: 12px; font-style: italic;}.content{ text-align: justify; font-size: 13px;}
Właściwie dopiero w tym miejscu powinien zakończyć się wstęp do tego artykułu i należałoby zadać pytanie: czy Twój kod wygląda podobnie? Czytelników, którzy pozytywnie odpowiedzieli na to pytanie szczególnie gorąco zachęcam do zapoznania się z dalszą częścią tego tekstu, ponieważ prawdopodobnie padliście ofiarą Classitis i Divitis.
Tak jak już wcześniej wspomniałem, te dwa dziwne pojęcia oznaczają nadmierne używanie w kodzie (x)HTML klas i elementów DIV. W tym momencie mógłbym napisać kolejny wykład na temat kaskadowości, dziedziczenia w CSS i zakończyć moją wypowiedź, jednak czy to by komuś pomogło? Podejrzewam, że nie. W dalszej części pokażę jak poradzić sobie z opisywanymi problemami za pomocą selektorów potomka.
Najpierw chciałbym pokazać, jak powinien wyglądać kod HTML naszego wpisu.
[..]<body> <div id="wrapper"> <h2>Kategoria artykułów</h2> <strong>To jest tytuł tego posta.</strong> <em>: Jan Kowalski</em> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum risus adipiscing arcu rhoncus egestas. Nullam eget purus nunc. Aliquam erat volutpat. Morbi gravida luctus diam non rutrum. Nulla in est mauris. Mauris dignissim mauris vel nulla accumsan quis scelerisque augue varius. Donec in facilisis sapien. Pellentesque nec ipsum eget tortor viverra congue et id ante.</p> </div></body></html>
Pierwszy rzut oka na powyższy kod i już widzimy znaczące zmiany. Kolejno:
- DIV o identyfikatorze wrapper pozostawiłem bez zmian.
- DIV o klasie category, zawierający nazwę kategorii zastąpiłem nagłówkiem (h2). Nie tylko pozbywamy się kolejnego DIV’a i klasy, ale dodatkowo informujemy wyszukiwarkę o wartościowym tekście.
- DIV o klasie title zastąpiłem tzw. mocną emfazą (mocnym wyróżnieniem). Zabieg ten również daje znać wyszukiwarkom o wartościowym tekście.
- DIV zawierający informacje o ze umieściłem w emfazie („słabszej” niż strong), ponieważ informacja o ze również może okazać się przydatna w wynikach wyszukiwania.Na koniec DIV o klasie content zastąpiłem zwykłym akapitem (p), bardziej nadającym się do prezentacji treści.
Teraz kolej na przebudowę naszego kodu CSS:
#wrapper{ background: #eee; width: 500px; padding: 20px; margin: 30px;}#wrapper h2{ font-size: 16px; font-weight: bold; text-decoration: underline;}#wrapper strong{ font-size: 14px; color: #ff0000; font-weight: normal;}#wrapper em{ font-size: 12px; display: block;}#wrapper p{ text-align: justify; font-size: 13px;}
Tak jak w kodzie html wrapper nie został zmieniony.
Jeśli chodzi o dalsze zmiany to za pomocą selektorów potomka sformatowałem pozostałe elementy naszego wpisu. Co do innych różnic w kodach CSS to:
- usunąłem z emfazy (em) pochylenie tekstu (emfaza jest domyślnie pochylona),
- dodałem do emfazy display: block, zmieniający sposób wyświetlania z inline (wyświetlanie w linii – domyślnie ustawiane) na blokowe (przenoszące emfazę do nowej linii).
Myślę, że dość dokładnie pokazałem początkującym webmasterom „nową drogę” (niekoniecznie na skróty) w radzeniu sobie z tym podstawowym problemem w kodowaniu stron internetowym. Udanego „klepania” i pomyślnych walidacji!
