post_ico3

O poprawności kodu słów kilka…

Przeglądając pewne forum programistyczne natknąłem się na ciekawą dyskusję. Jeden z forumowiczów uparcie przekonywał, że o jakości kodu HTML świadczy ilość błędów w walidatorze organizacji W3C. Czy faktycznie jest to najbardziej istotna kwestia przy tworzeniu poprawnego kodu HTML?

Błędna strona

Spójrzmy na przykład:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>Demo - strona o złym kodzie</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div id="page">
            <div id="top">
                <div class="title">Demo - strona o złym kodzie</div>
            </div>
            <div id="left">
                <div class="moduleTitle">Menu</div>
                <div class="list"><a href="">Link 1</a></div>
                <div class="list"><a href="">Link 2</a></div>
                <div class="list"><a href="">Link 3</a></div>
                <div class="list"><a href="">Link 4</a></div>
            </div>
            <div id="center">
                <div class="newsTitle">Tytuł news</div>
                <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
            </div>
            <div id="right">
                <div class="moduleTitle">O nas</div>
                <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
            </div>
        </div>
    </body>
</html>

Przykład można zobaczyć online tutaj.

Według walidatora strona zakodowana jest poprawnie, ale czy na pewno?

Poprawna strona

A teraz zobaczmy na ten przykład:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>Demo - strona o dobrym kodzie</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div id="page">
            <div id="top">
                <h1>Demo - strona o dobrym kodzie</h1>
            </div>
            <div id="left">
                <h3>Menu</h3>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </div>
            <div id="center">
                <h2>Tytuł news</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            <div id="right">
                <h3>O nas</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
    </body>
</html>

Przykład można zobaczyć online tutaj.

Według walidatora strona zakodowana jest poprawnie.

Mimo że, według walidatora obie strony są poprawne, to tak naprawdę tylko drugi przykład jest prawidłowo zakodowany. Dlaczego? W pierwszym kodzie użyłem aby znacznika div, który służy do budowania kontenerów na zawartość strony (a nie do tworzenia nagłówków, akapitów itp!). Z kolei na drugiej stronie wykorzystałem także h1, h2, h3, p, ul, li – zgodnie z ich przeznaczeniem.

O dobrej jakości kodu nie świadczy tylko ilość błędów według walidatora, ale również umiejętność wykorzystania znaczników zgodnie z ich przeznaczeniem – kod HTML staje się wtedy semantyczny. Dzięki temu wyszukiwarki lepiej indeksują strony. Bardzo trudno przejść w pełni walidację przy budowie dużych serwisów www, używających systemy CMS i edytory typu WISYWYG.

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...