Semântica dos Elementos
Semântica dos Elementos
Desenvolvendo com Padrões Web, a organização e a função dos elementos é um dos fatores mais importantes. Cada elemento da página desenvolve uma função, uns elementos são títulos, outros parágrafos, outros servem para criar menus, outros servem apenas para dividir e separar outros elementos, e assim existem vários elementos que usamos durante a construção do site que dará um significado para cada parte do layout.
No código, este elemento é marcado de acordo com sua função e para marcar esse elemento, usamos as tags corretas para que essa informação possa ser passada para aplicações e sistemas por aí afora.
É importante que os elementos estejam marcados corretamente, isso será útil para uma série de motivos futuros. Por exemplo, os sistemas de busca poderão diferenciar títulos de textos normais, poderão saber o que é um endereço e o que não é. Outras aplicações poderão usar essas marcações para executar suas atividades. Sem contar que a formatação via CSS fica muito mais fácil, já que você não precisará encher sua página de código desnecessário e sem significado algum.
Abaixo, segue uma lista em ordem alfabética de tags e suas respectivas funções:
| Tag/Elemento | Função | Exemplo |
|---|---|---|
| <!- COMENTÁRIO -> | Cria um comentário no código. | |
| <!DOCTYPE > | Informa às aplicações sobre o tipo de documento visualizado. | |
| <a></a> | Cria um link/âncora. | <a href="URL">Texto do link</a> |
| <abbr></abbr> | Define uma abreviação. | <abbr title="EUA">Estados Unidos da América</abbr> |
| <acronym></acronym> | Define um acronimo. | <acronym title="World Wide Web">WWW</acronym> |
| <address></address> | Define um elemento que carregue um endereço. | <address>Rua da Direita com a Esquerda, 3.</address> |
| <b></b> | Marca um texto como negrito. | <b>Texto</b> |
| <blockquote></blockquote> | Define uma citação grande. | <blockquote><p>Citaçõa longa.</p></blockquote> |
| <body></body> | Define o corpo de todo o documento. É onde contém todo o conteúdo da página. | |
| <br /> | Insere uma quebra de linha. | |
| <caption></caption> | Define um título para a tabela. Ele deve ser colocado logo após a tag TABLE. |
<table> <caption>Título da Tabela<caption> <tr> <td>Texto</td> </tr> </table> |
| <cite></cite> | Define uma citação. | <cite>The end is not as fun as the start - U2</cite> |
| <div></div> | Define uma divisão, uma seção do documento. | <div>menu, cabeçalho, rodapé, etc...</div> |
| <fieldset></fieldset> | Define um grupo de formulários. Ele é usado dentro da tag FORM. |
<form> <fieldset> <input type="text" /> <input type="submit" value="Enviar" /> </fieldset> </form> |
| <form></form> | Define uma destinada a formulários. Formulários são usados para enviar dados a um determinado endereço. |
<form> <fieldset> <input type="text" /> <input type="submit" value="Enviar" /> </fieldset> </form> |
| <label></label> | Envolve o enunciado explicativo do campo e o campo de formulário. |
<label> Busca <input type="text" /> </label> |
| <head></head> | O head é responsável em levar informações sobre o site, sobre o documento. Lá você colocará tags meta, título, estilos, javascripts, etc. | <head>title, metatags, estilos, etc...</head> |
| <h1></h1> até <h6></h6> | As tags de títulos vão até o nível 6. Você consegue usar e definir prioridades para os títulos de sua página. |
<h1>Título de primeiro nível</h1> <h2>Título de segundo nível</h2> <h3>Título de terceiro nível</h3> <h4>Título de quarto nível</h4> <h5>Título de quinto nível</h5> <h6>Título de sexto nível</h6> |
| <img /> | Insere uma imagem na página. | <img src="imagem.jpg" /> |
| <optgroup></optgroup> | Define um grupo de opções em um Select. |
<select> <optgroup label="Bob's"> <option value ="bob picanha">Big Bob</option> <option value ="duplobacon">Duplo Bacon</option> </optgroup> <optgroup label="McDonalds"> |
| <span></span> | Serve para criar um grupo de elementos inline. | <span>Aqui vai o texto <b>negrito</b></span> |
| <p></p> | Define um parágrafo de texto. | <p>Parágrafo de um texto</p> |