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.
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.
É 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:
HTML5
Html5 é a mais nova versão do HTML e trouxe inúmeras novidades de uma forma mais simplificada para escrever os códigos nesta linguagem.
Como novidade veio uma série de novas tags estruturais, de formulários e outras. A maneira de escrever o código ficou um pouco mais limpa e simplificada com uma separação mais nítida entre HTML e CSS, bem como um padrão único para qualquer tipo de navegador ou dispositivo.
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.
Um documento HTML precisa obedecer às recomendações do W3C, isto pode ser importante para efeitos de validação. 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 (https://www.luis.blog.br/html-e-xhtml/)
2 - Documentos XHTML devem ter um elemento root
<html>
<head> ... </head>
<body> ... </body>
</html>
3 - As tags devem estar aninhadas
Errado:
Correto:
4 - As tags devem obrigatoriamente ser fechadas
Errado:
Correto:
5 - Elementos vazios devem ser fechados
Errado:
Linha horizontal: <hr>
Imagem: <img src="senac.gif">
Correto:
Linha horizontal: <hr / >
Imagem: <img src="senac.gif" / >
6 - Elementos XHTML devem ser escritos em letras minúsculas
Errado:
<P>Isto é um parágrafo</P>
</BODY>
Correto:
<p>Isto é um parágrafo</p>
</body>
7 - O valor dos atributos deve estar entre aspas
Errado:
Correto:
8 - Atributo minimizado não é permitido
Errado:
<input checked>
Correto:
<input checked="checked" />
9 - O atributo ID substitui o atributo NAME
Errado:
Correto:
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
<header>, <section>, <aside>, <article>, <footer> e outras. Novas tags do HTML5
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
COMPARTILHE: Facebook Twitter WhatsApp