Home » Tecnologia
Linguagem HTML: Tags e diferenças entre HTML, HTML e XHTML
Linguagem HTML: A linguagem da web
Gostou? Recomende:
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
Participe do Simulado de HTML
Veja também:
Compartilhe com seus amigos:
// Comentários
Nenhum comentário