Divitis i Classitis – choroba młodego webmastera

Autor: Jacek Brożek, dodano: 17-03-2010
Kategoria: Programowanie i tworzenie

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">Autor: 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>Autor: 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 autorze umieściłem w emfazie („słabszej” niż strong), ponieważ informacja o autorze 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!

Ocena 2.76/5 (55.1%) (531 głosów)

Komentarze:


  • Dodał: Bartek Bilicki data: 2010-03-17
    świetny debiut :) życzę powodzenia!

  • Dodał: Gość data: 2010-03-18
    Dobrze, że zwrócono uwagę na to, przydatne

  • Dodał: Gość data: 2010-03-18
    Czy przy nadmiarowym użyciu (em) lub strong, strona nie będzie pozycjonowana najniżej jak się da ? 100 000 i w dół.

  • Dodał: Jacek Brożek data: 2010-03-18
    Zbyt dużo eksponowanego, jako wartościowy, tekstu z pewnością nie będzie sprzyjało robotom wyszukiwarek. Jednak sądzę, że użycie większej ilości elementów em i strong nie powinno zrobić żadnych problemów. Miło by było, jakby wypowiedział się na ten temat ktoś z obszerniejszą wiedzą o SEO.

  • Dodał: domel data: 2010-04-23
    Wg mnie trochę niedopracowane. A jeśli chcesz mieć inne tło graficzne pod tekstem i inne tło w body? Chcąc nie chcąc musisz dać diva.
  • mdr133
    Dodał: Gość data: 2010-04-27
    Świetny artykuł. Można się czegoś nauczyć. Ja osobiście nie nadużywam DIV-ów a z class wogóle nie korzystam, ale jak już wcześniej powiedziałem artykuł jest bardzo dobry dla amatorów i nie tylko. Gratuluje autorowi.

  • Dodał: Jacek Brożek data: 2010-04-28
    Dzięki mdr133 ;)
    Co do wypowiedzi użytkownika domel: w tekście nie ma mowy o tym, żeby całkowicie zrezygnować z divów (przy dzisiejszych standardach są niezastąpione ;) ). W tym artykule chodziło mi raczej o kwestię ich nadużywania i wykorzystywania diva z klasą "do wszystkiego". Div jest uniwersalny, ale żeby wyeksponować tekst polecam odpowiednie do tego znaczniki (a dano nam ich "kilka" :))

  • Dodał: Yavane data: 2010-06-29
    Nie lepiej styl ze <span> było dać w zewnętrznym pliku ?

  • Dodał: Gość data: 2010-07-27
    Bzdurny artykuł. Taka konstrukcja pokazana jako "rozwiązanie" nie sprawdzi się w 90% przypadków. Gdy pozycjonujemy warstwy, zmieniamy tło, dodajemy coś nowego, nie zastosujemy nagłówków (np. h1) i innych tego typu (em, span itd.)...

  • Dodał: Jacek Brożek data: 2010-08-29
    Yavane - te bzdury typu wewnętrzne style dodał CMS... nie poradzę nic na to (ale brawo za spostrzegawczość)
    Gość (kimkolwiek jesteś ;) - może Ty tego nie stosujesz, ale są tacy, którzy właśnie tak robią, bo to jest poprawne. Jeśli masz inny styl to go używaj, ale mam tylko nadzieję, że tekstu na obrazkach nie zostawiasz ;)
  • Dzięki
    Dodał: luqo data: 2012-01-18
    Bardzo wartościowa "uwaga". Wielkie dzięki.

  • Dodał: 2muchDIV data: 2012-02-08
    <b>Dziękuję za ten bardzo pomocny artykuł.</b>

  • Dodał: tomi data: 2012-08-06
    Nawet wiem skąd ci wpadł pomysł na opisanie tej "choroby" identycznie wyjaśnione jak w książce "Standardy Przyszłości HTML 5 i CSS3)

  • Dodał: Radix data: 2014-09-09
    uywanie strong,em i h w dalszej perspektywie jest malo elastyczne. Osobiscie uzywam metody <span class=""> zamiast nich. Dla przykladu: w projektach responsywnych i z ruchomymi elementami ulatwia to rozlozenie logiczne elementow bo nazywamy je po swojemu, a nie po standardowemu.
    Dla przykladu z HTML5 element <aside> - w zalozeniu ma to byc pasek boczny, ale co jezeli w naszym responsywnym projekcie lub projekcie gdzie uzytkownik moze zmieniac skorki ten pasek wraz z trescia ma wedrowac w rozne miejsca w tym zmieniac sie z formy pionowej do poziomej?
    Jedyny pozytek w stosowaniu standardow w tym wzgledzie to zrozumialosc kodu dla ew. pozostalych czlonkow zespolu.

  • Dodał: Xn data: 2017-06-11
    I właśnie o tą zrozumiałośc chodzi. Należy używać main, section (z nagłówkiem), aside, header, footer i w razie potrzeby zmieniać ich sposób pozycjonowania.

    Jak spojrzałam kiedyś w kod strony ZTM to pozostało mi jedynie zrobić facepalma. 10 zagłębień divów - suma classitis, divitis i table-tltr-it-is.


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.