Por que devo USAR o HTML semântico?

Você poderia simplesmente dizer: “porque é a coisa certa para a web“, mas os benefícios vão muito além disso. Por exemplo, torna mais fácil para os leitores de tela interpretar as informações de um web site para os usuários com deficiência visual.

SEO e HTML semântico são amigos próximos. O objetivo do SEO é ajudar os motores de busca entender melhor sobre o que se trata o conteúdo de uma página e classificá-la melhor. Um robô de busca basicamente tem capacidades ainda menores do que um leitor de tela.

Não devemos, por exemplo, utilizar as tags p nunca deve ser utilizada para aplicar espaço a uma página web. Este elemento do HTML deve ser utilizado unicamente para indicar (marcar) parágrafos.

Estrutura das página

Uma página consiste em um título, um ou mais subtítulos e conteúdo. Este conteúdo pode conter parágrafos, listas, citações, imagens e tabelas. Todos estes tipos de informação têm sua própria marca, que são os elementos HTML.

Separar apresentação do conteúdo

As tags HTML nunca devem ser usadas para aplicar a apresentação, tais como: cor da fonte, tamanho da fonte, alinhamento e por aí vai… Isso tudo é trabalho das CSS (Cascading Style Sheets). A algum tempo escrevi sobre Elementos HTML em desuso onde cito vários elementos que foram descontinuados.

Títulos (cabeçalhos) h1 até h6

Um bom documento tem títulos e subtítulos. Estas posições variam em importância, iniciando por H1 (título mais relevante da página) até H6 (título menos importante da página). Não lembro de ter visto em um site escrito de forma semântica o uso dos elementos H5 e H6, no máximo o uso até o nível H4.

Seguindo uma semântica rigorosa, sugiro que você deva ter apenas um H1 por página. Vejo muitos sites utilizando o elemento H1 para marcar o nome do site. Provavelmente no seu site cada página terá um assunto especifico, neste caso escolha por marcar o título do assunto como sendo o título principal da página, ou seja, marcar com H1.

Para otimização de uma página é fundamental que a palavra-chave da página esteja dentro do elemento H1 e ainda em outras posições da página como links, parágrafos, etc.

Imagens

Imagens são usadas de todas as formas dentro de documentos, e você deve aplicar a semântica adequada para elas. O atributo alt deve ser usado se a imagem acrescenta significado ao documento. Este deve descrever o que a imagem está mostrando.

Se você estiver usando imagens para substituir o texto, certifique-se que você esteja usando um texto também em seu HTML. Para isso use CSS. Você tem que fazer isso porque tanto as pessoas com deficiências visuais e motores de busca não podem ler o texto em suas imagens. Para aplicar este método deixo o mesmo texto que está escrito na imagem no meu HTML. No CSS escondo o texto usando text-indent com um valor negativo (Exemplo -1000px). Tenha cuidado, usando esta técnica você corre o risco de ser punido pelos buscadores.

Abreviaturas e siglas

Sempre que usar uma sigla em seus textos ou artigos utilize o abbr para descrever o significado de tal sigla. Isso é bom para a densidade de palavras-chave também!

Tabelas

Tabelas não devem ser usadas para estruturação de layouts, apenas para dados tabulares. Caso você monte seu site utilizando tabelas, o usuário que acessar seu site com um leitor de telas terá uma enorme dificuldade em entender o conteúdo fornecido por você. Abaixo algumas dicas para utilização de tabelas.

Devo utilizar Frames?

Muito simples: NÃO USE. Motores de Busca e principalmente leitores de telas tem certa dificuldade em trabalhar com página desse tipo.

Conclusão

Usando html semântico para marcar suas páginas, você pode criar páginas que são mais acessíveis, tanto para as pessoas com deficiência, bem como aos motores de busca. Marcação semântica ajuda os motores de busca determinar qual é a relevância do conteúdo de uma página.

Quer ter um site acessível aos motores de busca e acima de tudo aos leitores de tela? Use o HTML semântico sempre.

Referência
Semantic HTML and Search Engine Optimization e semantic-html.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS
• Mais de 600 Brushes com efeito de luz para Photoshop

• Listas ordenadas;
• Listas não-ordenadas;
• Listas de definição.

Um exemplo básico da utilização das listas é em um mecanismo de navegação, uma barra de navegação ou um menu lateral. Infelizmente ainda encontramos sites na internet que não utilizam a marcação de listas para marcar o conteúdo de navegação do site.
Todas as listas devem conter mais do que um elemento.

Listas Ordenadas

Utilizada para marcar uma ordenação no conteúdo. Quando a informação tem uma seqüência a ser respeitada. Para iniciar a marcação utilizamos o elemento ol. Depois para marcamos os itens das listas, utilizamos o elemento li. As listas são renderizadas com uma marcação seqüencial antes do conteúdo da lista. Veja o exemplo:

<ol>
	<li>Rio Grande Do sul</li>
	<li>Minas Gerais</li>
	<li>Rio de Janeiro</li>
</ol>

Listas não-ordenadas.

O tipo de lista mais comum de se utilizar em sites são as listas não-ordenadas. Esse tipo de lista é utilizado quando a informação a ser mostrada não segue uma seqüência. Para iniciar uma lista não ordenada usamos o elemento ol. Para marcar os itens dessa lista usamos o mesmo elemento li. Veja o exemplo:

<ul>
<li>Criação de sites</li>
<li>Montagem e manutenção de computadores</li>
<li>Aulas particulares</li>
</ul>

Listas de definição

São poucos os desenvolvedores que utilizam as listas de definição. Essas listas são formadas por uma definição da lista e sua descrição. Para iniciar a lista utilizamos o elemento dl. Depois cada grupo de definição é marcado com dt. Para definir o termo da lista usamos o dd que devera estar contido dentro do elemento dt que por sua vez está dentro do elemento dl. Veja o exemplo.

<dl>
	<dt>Curso de web Standards</dt>
		<dd>Manhã/tarde/noite</dd>
		<dd>20/12/2009</dd>
	<dt>Curso de PHP</dt>
		<dd>noite</dd>
		<dd>22/12/2009</dd>
</dl>

Lista com vários níveis e não-ordenadas

<ul>
	<li>Países</li>
    	<ul>
        	<li>América do sul</li>
            	<ul>
                	<li>Brasil</li>
                    <li>Argentida</li>
                    <li>Paraguai</li>
                </ul>
            <li>América do norte</li>
            	<ul>
                	<li>Estados Unidos</li>
                    <li>Canadá</li>
                    <li>México</li>
                </ul>
		</ul>
	<li>Cidades</li>
       	<ul>
        	<li>Curitiba</li>
            <li>Salvador</li>
            <li>Floarianópolis</li>
        </ul>
</ul>

Lista com vários níveis, não-ordenadas e ordenadas

As listas podem ser usadas em conjuntos em um documento, ou seja, simultaneamente, uma lista dentro da outra. Podemos também criar níveis. No exemplo que segue temos uma lista não-ordenada dentro de uma lista ordenada.

<ol>
	<li>Países</li>
    	<ul>
        	<li>América do sul</li>
            	<ul>
                	<li>Brasil</li>
                    <li>Argentina</li>
                    <li>Paraguai</li>
                </ul>
            <li>América do norte</li>
            	<ul>
                	<li>Estados Unidos</li>
                    <li>Canadá</li>
                    <li>México</li>
                </ul>
		</ul>
	<li>Cidades</li>
       	<ul>
        	<li>Curitiba</li>
            <li>Salvador</li>
            <li>Floarianópolis</li>
        </ul>
</ol>

Veja os exemplos
Pessoal por hoje era isso! Uma ótima semana para todos. Fiquem com Deus.

Isso vai interessar você também

• A importância do HTML semântico
• Estrutura mínima de um documento (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML
• Breve introdução a (X)HTML

As três partes da estrutura são:

• Definição do tipo de documento (DOCTYPE ou DTD)
• Seção head
• Seção body

DOCTYPE

É a declaração do tipo de documento. Deve ser escrita na primeira linha do documento. DOCTYPE nada mais é que um endereço que o navegador consulta para saber como renderizar sua marcação, caso essa declaração não for localizada, o navegador seguirá suas regras padrões. Como cada navegador tem suas regras, isso pode causar sérios problemas de renderização, ou seja, sempre declare o DOCTYPE.

Tipos de DOCTYPE

Strict: Documentos que usam essa declaração não podem conter nenhum elemento e nem atributo em desuso pelo W3C e marcação de frames.
Transitional: Pode ter alementos a atributos em desuso, mas não marcação de frames
Frameset: Pode contem elementos de frames, e elementos e atributos em desuso pelo W3C.
O melhor a se usar é o strict, assim você está escrevendo marcação seguindo os padrões web. Mas não esqueça: usando essa declaração não podemos usar elementos e atributos em desuso.

Seção head

Oferece informações adicionais sobre o documento e nele é onde fica o título do documento, as metatags, links para arquivos CSS JavaScript relacionados com esse documento.
Seção body
Onde ficam os elementos destinados a marcar o conteúdo do documento.

Estrutura completa (X)HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>Título da página< /title>
< /head>
<body>
marcação da página
</body>
< /html>

Isso vai interessar você também

• A importância do HTML semântico
• Tipos de listas em (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML
• Breve introdução a (X)HTML

Isso vai interessar você também

• A importância do HTML semântico
• Tipos de listas em (X)HTML
• Estrutura mínima de um documento (X)HTML
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML
• Breve introdução a (X)HTML

Escrever todas as tags e atributos em letras minúsculas:

XML que deu origem ao XHTML é sensível ao tamanho de caixa de fonte, então com XHTML não é diferente. É obrigatório o uso de letras minúsculas ao escrever a sintaxe de elementos XHTML.
Exemplo:

• Errado:

<H1>Título principal</H1>
<P> Parágrafo de exemplo</P>
<td COLSPAN=”3”>

• Certo:

<h1>Título principal</h1>
<p> Parágrafo de exemplo</p>
<td colspan=”3”>

Aninhar as tags:

A primeira tag a ser aberta dever ser a última a ser fechada, a segunda tag é a penúltima e assim por diante.
Exemplo:

• Errado:

<div><p><em>Texto em destaque</div></p></em>

• Certo:

<div><p><em>Texto em destaque</em></p></div>

Fechar todas as tags abertas:

Toda tag que for aberta deve ser fechada, diferentemente do que ocorre com HTML. Em HTML podemos omitir a tag de fechamento, por exemplo, nas tags.

<p> e <li>

Exemplo:

• Errado:

<p>Parágarfo sem tag de fechamento.
<li>Um item da lista sem tag de fechamento

• Certo:

<p>Parágarfo com tag de fechamento.</p>
<li>Um item da lista com tag de fechamento</li>

Fechar elementos vazios:

Elementos vazios dever ter uma tag de fechamento ou a tag de abertura dever terminar com />
Exemplo:

• Errado:

<hr>
<br>
<img src=”foto.jpg” alt=”minha foto”>

• Certo:

<hr></hr>
<br></br>
<img src=”foto.jpg” alt=”minha foto”></img>

Como vimos acima podemos usar a tag de fechamento ou usar a terminação com barra como mostrado abaixo.

<hr />
<br />
<img src=”foto.jpg” alt=”minha foto” />

Procure adotar a opção de terminação com barra, assim terá um código menor e mais limpo.

Colocar valores dos atributos entre “ “:

Todos os valores de atributos devem ficar entre aspas, independente de ser texto ou número.
Exemplo:

• Errado:

 <td colspan=3>

• Certo:

<td colspan=”3”>

Escrever a sintaxe para atributos:

A sintaxe para atributos dever ser escrita com nome e valor.
Exemplo:

• Errado:

<input checked />

• Certo:

<input checked=”checked” />

Usar id ao invés de name:

O atributo name está em desuso e possivelmente será excluído das próximas versões do XHTML.
Exemplo:

• Errado:

<img src=”foto.jpg” alt=”minha imagem” name=”foto” />

• Certo:

<img src=”foto.jpg” alt=”minha imagem” id=”foto” />

Isso vale também para links internos, âncoras. Em XHTML use o atributo id no lugar de name.
Use:

<a id=”topo”>Topo</>

Ao invés de:

<a name=”topo”>Topo</>

OBS: Em documentos nos quais você precise de compatibilidade entre navegadores antigos, use ambos atributos, como mostrador abaixo.

<a id=”topo” name=”topo”>Topo</>
<img src=”foto.jpg” alt=”minha imagem” id=”foto” name=”foto” />

Atributo alt para imagens:

O uso do atributo alt é obrigatório. No caso de uma imagem que esteja fazendo um papel decorativo, use o atributo alt vazio, apenas dê um espaço entre as aspas.
Exemplo:

<img src=”foto.jpg” alt=”minha imagem” />
<img src=”barra_lateral.jpg” alt=” ” />

Bloco de comentários:

É comum o uso de comentários para marcar trechos de código. E também é comum o uso de uma seqüência de caracteres, dentro da tag de comentário, para destacar mais o comentário.
Evite o uso do clássico tracejado (-). Alguns navegadores mais antigos podem encontrar dificuldade na interpretação da seqüência desse caractere. Use sinais de iguais (=) ou a letra xis (x).
Exemplo:

• Errado:

<!--- ----------------------------------- menu lateral ----------------------------------- -->

• Certo:

<!-- ==================== menu lateral ====================== -->

Isso vai interessar você também

• A importância do HTML semântico
• Tipos de listas em (X)HTML
• Estrutura mínima de um documento (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Breve introdução a (X)HTML

Diferença de marcação e programação

Com certeza quem é da área de Web já ouviu alguém falar “sou programador (X)HTML”, “Tem que fazer a programação em (X)HTML” e por aí vai. Na verdade escrever desenvolver em (X)HTML nada tem a ver com programar. Programar é algo muito mais complexo, capazes de fazer comparação ente valores, realizar tomadas de decisão, consultar um banco de dados… algo impossível de se fazer com (X)HTML. Podemos citar alguns exemplos de linguagens de programação: PHP, ASP, JAVA, JavaScript, ActionScript entre outras.
Linguagens como (X)HTML e HTML são linguagens de marcação ou linguagem de publicação, que tem como principal objetivo estruturar conteúdos para serem visualizados na web. Jamais fale programar em (X)HTML.

Isso vai interessar você também

• A importância do HTML semântico
• Tipos de listas em (X)HTML
• Estrutura mínima de um documento (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML