Como escrever HTML de forma correcta

Por Bruno Carlos

Janeiro 13, 2008

Nos dias de hoje a facilidade com que se produzem páginas web é alucinante, é possível gerar páginas utilizando aplicações que não foram desenvolvidas com o propósito de as realmente gerar, como o Microsoft Word, Publisher, Photoshop, Corel Draw, etc. Os próprios editores gráficos de páginas web estão igualmente muito acessíveis, como o Adobe Dreamweaver (ainda me custa escrever Adobe antes do Dreamweaver), Microsoft Expression Web ou qualquer outra entre milhares de aplicações disponíveis livremente pela web fora. No entanto toda esta facilidade gera na maior parte das vezes páginas web que são autênticas aberrações, onde são desrespeitadas todos os web standards que tanto tempo levaram a consolidar.
Há tanta coisa a considerar quando se desenvolve uma página web, a usabilidade e acessibilidade, a optimização da mesma para os motores de pesquisa, a estrutura e validação do código desenvolvido, entre outras.
Penso que se alguém deseja desenvolver uma página web deve realmente aprender a faze-lo, este tutorial procura dar o empurrão inicial para começar a desenvolver código HTML de forma estruturada e digamos… bonita!!!

Vamos começar então pelo início…

Document Type Definition - DTD
Existem diferentes versões do HTML, portanto é necessário informar os browsers qual é a que está a ser utilizada. Para isso é necessário definir o DTD e deve ser escrito sempre no topo de um documento, é igualmente necessário definir os atributos xmlns e lang na tag html, o primeiro é a abreviação de “XML Name Space” e é possível obter mais informações sobre namespaces no site do W3C, no segundo atributo, lang, é especificada a língua em que o documento se encontra escrito, é possível visualizar as abreviaturas para as línguas existentes através do site ISO 639 standard.
O DTD informa o browser como deve ser lido e processado o HTML, torna-se ainda importante para a validação da página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt">

O cabeçalho
Definir o charset, de preferência UTF-8, que não é mais do que a codificação da página.
Definir o título da página e que, se possível seja dinâmico, ou seja que seja alterado de acordo com o conteúdo da página que está a ser apresentada, o que é bastante útil essencialmente para blogs.
Colocar os links para as folhas de estilo (incluindo uma para imprimir) assim como para os scripts (se existirem). De preferência colocar os ficheiros externos em pastas específicas (”CSS”, “Scripts” e “Imagens”), de notar que por exemplo o Wordpress, no seu “default template” coloca o ficheiro de estilos na raíz dos templates das páginas, no entanto é possível alterar facilmente essa situação, esta dica está obviamente relacionada com organização de ficheiros do que propriamente com a performance ou validação do site.

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Blog xpto</title>

    <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection" />

    <script src="scripts/fun.js" type="text/javascript"></script>

</head>

ID na Tag Body

Colocar um id no body é algo que apenas costumo fazer para projectos que sejam propícios a terem páginas com estilos diferentes. No entanto quando iniciamos a construção de um site nunca sabemos o quanto este irá crescer e as nossas necessidades futuras, portanto mais vale prevenir. Colocar o id no body permite definir propriedades no CSS únicas para uma determinada página.
Também é usual definir um DIV principal que agrega todo o conteúdo, o que permite aumentar o controlo sobre toda a página, como a largura da página quando esta é fixa ou máximos e mínimos para um largura fléxivel.

<body id="home">

    <div id="main">

Conteúdo Comum
Muito do conteúdo de um site é comum de página para página. Menus, barras laterais, rodapés,etc são exemplos de conteúdo que é comum nas diferentes páginas de um site, portanto faz sentido que este conteúdo seja “carregado” dinamicamente. Quer seja a partir de base de dados ou simples includes em PHP.

Menu
Na construção do menu deve-se optar por listas, o que permite ter um menu mais limpo ao nível da semântica.

        <div id="menu">

            <ul>

                <li><a href="index.php">Home</a></li>

                <li><a href="acerca.php">Acerca do Autor</a></li>

                <li><a href="contactos.php">Contactos</a></li>

            </ul>

        </div>
        <div id="main-content">

            <h2>Blog do xpto</h2>

            <img src="images/logo.jpg" alt="Logotipo xpto" />

            <div id="search-box">

                <input value="Procurar..." onfocus="this.value='';" />

                <div class="clear"></div>

            </div>

<div id="content">

Hierarquia no Conteúdo
Costumo definir normalmente uma classe em CSS para o conteúdo que me parece ser mais importante, ou seja aquele ao qual pretendo dar mais destaque, neste caso estou a considerar o post principal, mas é perfeitamente possível reutilizar este exemplo noutras situações. Para além disso parece-me importante que o conteúdo principal do site apareça em primeiro lugar, se alguém visualizar a página com o CSS desligado no browser necessitam de visualizar o conteúdo principal no topo e não no rodapé.

                <div class="main-post">

                    <h1>Notícia xpto</h1>

                    <p>Corpo da notícia</p>

                    <div class="post-footer">

                        <span class="date">12-12-2007</span>

                        <span class="author">Autor xpto</span>

                    </div>

                </div><!--main-post-->

                <div class="post">

                    <h2>Notícia 2</h2>

                    <p>Corpo da notícia</p>

                    <div class="post-footer">

                        <span class="date">12-12-2007</span>

                        <span class="author">Autor xpto</span>

                    </div>

                </div><!--post-->

            </div><!--content-->
            <div id="lateral-bar">

                <div id="popular-articles">

                    <ul>

                        <li><a href="post1.php">Post 1</a></li>

                        <li><a href="post2.php">Post 2</a></li>

                        <li><a href="post3.php">Post 3</a></li>

                    </ul>

                </div>

                <div id="archive">

                    <ul>

                        <li><a href="march.php">Março</a></li>

                        <li><a href="april.php">Abril</a></li>

                        <li><a href="may.php">Maio</a></li>

                    </ul>

                </div>

            </div>

</div>

<div id="footer">

            <p>Copyright xpto | <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.pt_PT">Alguns Direitos Reservados</a> |Powered by <a href="http://wordpress.org/">WordPress</a></p>

        </div>

    </div>

</body>

</html>

Estruturar o Código
Identar o código é fundamental, neste caso o código está identado por secções o que permite compreender de uma forma mais imediata toda a estrutura do mesmo. O código que é alinhado à esquerda é complexo de ler e compreender. No entanto é igualmente commplexo manter esta estrutura no resultado final porque normalmente são utilizados CMS, que fazem a divisão do site em diversas partes com identações diferentes, não ficando o resultado final uniforme ou tão bem estruturado como inicialmente idealizámos.

Outras dicas

Utilizar as header tags (h1-h6) para o propósito para o qual elas foram criadas, para criar títulos para secções e definir a hierarquia no conteúdo.
O HTML deve ser utilizado apenas para definir a estrutura da página e conteúdo, não o estilo, o qual deve estar definido na folha de estilos (CSS).
Utilizar parágrafos com a tag <p> e utilizar listas sempre que apropriado. Utilizar códigos para simbolos. Moderar a utilização de tags <br />.

Download

Código do Tutorial Como escrever HTML de forma correcta

Fontes:

W3C, CSS-Tricks, Web Devout, HTML Mastery (book)

Partilhar esta Entrada