EDUCAÇÃO / TECNOLOGIA / UTILIDADE PÚBLICA

Linguagem HTML: Tags e diferenças entre HTML, HTML e XHTML

Linguagem HTML: A linguagem da web

Nada é tão sinônimo de web como HTML. Tudo na web tem como base HTML, desde um simples site institucional, até grandes aplicações de comércio eletrônico. A sigla HTML significa em inglês Hyper Text Markup Language, ou linguagem de marcação de textos, em português.

Conhecer HTML é tarefa fundamental para quem quer trabalhar com web. A linguagem é de fácil aprendizado, já quem tudo nela gira em torno de tags (marcação) de texto que tem significado próprio.

Diferença entre HTM e HTML

Alguns sites apresentam os nomes das páginas com a extensão .htm, enquanto que em outros a extensão usada é o .html. Afinal, qual a diferença entre a extensão html e htm?

A extensão .htm é característica do MS-DOS depois Windows. Para quem nunca trabalhou com DOS não deve saber, mas ele não aceitava mais que três caracteres na extensão de qualquer arquivo, daí vem a origem das extensões com três letras, por exemplo: .doc, .exe, .txt, etc.
 
A extensão .html é característica do UNIX que suportava mais de três caracteres
 
Para evitar problemas, foi feita a junção e, para efeitos de compatibilidade, foram mantidas as duas extensões. Diante disso é correto afirmar que não há diferença entre htm e html, ou seja, o conteúdo das páginas são os mesmos. Se houver em um mesmo site dois documentos com o mesmo nome, um arquivo chamado index.html e outro, index.htm, o servidor irá sempre apresentar o index.html.

Diferença entre HTML e XHTML

É muito comum ouvir falar em HTML, mas quando olhamos o código fonte de um site qualquer percebemos que ele é XHTML, então qual é o correto ou qual a diferença entre HTML e XHTML?

HTML

O HTML é a linguagem baseda web, todos os sites são construídos em HTML. Sua estrutura é baseada em um conjunto de tags, onde cada tag é usada para posicionar um conteúdo qualquer, como: texto, imagem, tabela, formulário, entre outros.

XHTML

O XHTML é o mesmo HTML, porém, ele é mais restritivo quando a forma de usar as tags. O termo XHTML é na verdade a junção da linguagem HTML com as especificações do XML, daí o X. As especificações mais comuns são:

  • Escrever o nome das tags em minúsculo;
  • Fechar todas as tags;
  • Usar um doctype no início da página;
  • Separar a estruturação(HTML) da formatação(CSS);
  • Entre outras.

HTML e XHTML

O futuro do HTML é o HTML 5 que deverá seguir a mesma linha do XHTML com suas regras de formação, porém com novas tags.

Letras maiúsculas e minúsculas

Para escrever as tags em HTML há alguma diferença entre letras maiúsculas e minúsculas?

Depende da versão do HTML que você estiver usando. Até a versão 4.01 não havia basicamente diferenças, já a versão XHTML 1.0 não permite que o nome das tags sejam escritos em letras maiúsculas.

Esta regra na é na verdade do XML, como o xhtml é a junção do html com as regras do XML, então passou a não ser aceito mais.
 
Na verdade ele aceita e processa com letras maiúsculas, mas ao fazer a validação do HTML haverá um erro.

Regras para escrever XHTML

Um documento XHTML precisa obedecer às recomendações do W3C para ser considerado válido. Veremos as nove principais regras para formação correta de um documento XHTML.

1 - Todo documento XHTML deve ter um <DocType>

Ver estrutura básica de um documento (http://www.luis.blog.br/html-e-xhtml.aspx

2 - Documentos XHTML devem ter um elemento root

<html>
<head> ... </head>
<body> ... </body>
</html>

3 - As tags devem estar aninhadas

Errado:

<b><i>This text is bold and italic</b></i>

Correto:

<b><i>This text is bold and italic</i></b>

4 - As tags devem obrigatoriamente ser fechadas

Errado:

<p>Isto é um parágrafo

Correto:

<p>Isto é um parágrafo</p>

5 - Elementos vazios devem ser fechados

Errado:

Quebra de linha: <br>
Linha horizontal: <hr>
Imagem: <img src="senac.gif">

Correto:

Quebra de linha: <br />
Linha horizontal: <hr / >
Imagem: <img src="senac.gif" / >

6 - Elementos XHTML devem ser escritos em letras minúsculas

Errado:

<BODY>
<P>Isto é um parágrafo</P>
</BODY>

Correto:

<body>
<p>Isto é um parágrafo</p>
</body>

7 - O valor dos atributos deve estar entre aspas

Errado:

<hr width=100%>

Correto:

<hr width="100%">

8 - Atributo minimizado não é permitido

Errado:

<option selected>
<input checked>

Correto:

<option selected="selected" />
<input checked="checked" />

9 - O atributo ID substitui o atributo NAME

Errado:

<img src="foto.gif" name="foto" />

Correto:

<img src="foto.gif" id="foto" />
 

Tags HTML

Um dos primeiros passos para quem quer trabalhar com HTML é conhecer suas tags e suas respectivas classificações. Abaixo você encontrará uma lista com as principais tags do HTML, divididas por categorias e com uma breve explicação sobre cada uma delas.

Tags estruturais do HTML

<doctype> Define o tipo de documento
<html> É a principal do documento
<head> É o cabeçalho do documento
<body> É o corpo do documento

Tags de texto em HTML

<p>  Cria um parágrafo
<h1> ao <h6>  Especifica 6 níveis de títulos, sem do h1 o maior e h6 o menor
<span> Define uma seção no documento, geralmente para formatação
<em> Cria texto enfatizado
<strong> Cria texto em negrito
<blockquote> Citação de textos
<pre> Texto pré-formatado

Tags de tabela em HTML

<table> Cria uma tabela
<tr> Cria uma linha na tabela
<td> Criar uma coluna na tabela
<th> Especifica que é uma coluna de cabeçalho
<tfoot> Grupos do conteúdo do rodapé em uma tabela
<thead> Grupos do conteúdo do cabeçalho em uma tabela
<tbody> Grupos do conteúdo do corpo em uma tabela

Tags de formulário em HTML

<form> Inicia um formulário
<input> Permite criar vários tipos de campos, como: caixa de texto, radio, checkbox, botões e outros.
<select> Cria uma caixa de seleção no formulário
<textarea> Campo do formulário para entrada de textos longos
<button> Botão (sem ação) em um formulário
<fieldset> Define bordas em torno de um elemento do formulário
<legend> Define uma legenda para um elemento fieldset
<label> Legenda para um elemento input

Tags de listas em HTML

<ul> Inicia uma lista não ordenada
<ol> Inicia uma lista ordenada
<li> Cada elemento de uma lista
<dl> Inicia uma lista de definição
<dt> Termo da lista de definição
<dd> Definição do termo

Tags de imagem e link

<img> Inserir uma imagem
<a> Cria um link

Tags do cabeçalho da página

<title> Título do documento
<meta> Permite criar várias entradas. Descrição, palavras-chave e outros
<script> Linka ou cria a entrada para um arquivo de script
<link> Linka um arquivo externo
<style> Inicia uma entrada de estilo CSS

Outras tags

<br> Quebra de linha
<div> Contêiner ou divisões na página
<hr> Linha horizontal
<iframe> Cria uma janela dentro da página e linka um arquivo externo nela

 

Veja também

Comentários

© 2008-2017 | LUIS.BLOG.BR | Política de Privacidade | Em Jesus Cristo eu confio