Webloop

CSS#1 – Web Semântica

Estou iniciando uma serie de Tutoriais e Dicas sobre CSS, acompanhe o blog que estarei postando muitas coisas legais sobre CSS e HTML que irá ajudar nos seus estudos, vamos começar falando sobre Semântica.

Semântica é uma web que tem toda sua informação identificada e organizada. Possibilitando que essa informação seja entendida de forma sensata não só por seres humanos, mas também por máquinas.

A Web Semântica é um projeto dirigido por Tim Berners-Lee, criador do HTML e da World Wide Web em conjunto com a World Wide Web Consortium (W3C). O objetivo deste projeto é melhorar as potencialidades da Web através da criação de ferramentas e de padrões que permitam atribuir significados claros aos conteúdos das páginas e facilitar a sua publicação e manutenção. A origem do HTML é semântica, vamos aos exemplos abaixo:

Observe a diferença sobre a tag <H1>.

Exemplo de HTML semântico:

[html]
<html>
<head>
<title>HTML Semântico</title>
</head>
<body>
<h1>Título da página</h1>
<p>O Browser sabe que a tag H1 acima, dá ênfase ao "Título da página" em tamanho e negrito. Sem qualquer intervenção de estilos.</p>
<p>Veja como não há nenhum atributo como fonts, cor, imagem ou etc. Qualquer browser consegue interpretar DA MESMA FORMA o contéudo desta página.</p>
</body>
</html>
[/html]


Exemplo de HTML NÃO semântico:

[html]
<html>
<head>
<title>HTML Não Semântico</title>
</head>
<body>
<font size="3">Título da página</font>
<br>
Esta página é HTML Puro, porém com estilo de tamanho. Ao invés de usar a tag H1, aqui usamos o "font size". Isso não é semântico.
</body>
</html>
[/html]

Até a próxima, não deixe de comentar!

2 respostas

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

13 + 1 =