Folha de referências do HTML Essentials: tags, atributos e muito mais

A construção de páginas da web começa com HTML. Embelezá-los e torná-los interativos virá depois. Mas, para começar a criar sites estáticos funcionais, você precisa entender o HTML. (Quer uma introdução rápida a esta linguagem de marcação? Leia nosso HTML FAQ.)

Como parte do aprendizado do idioma, há uma longa lista de elementos que você precisa adicionar ao seu vocabulário HTML. E esta tarefa pode parecer assustadora no início, é por isso que criamos a seguinte folha de dicas. Fornece uma maneira fácil de descobrir / compreender / recuperar elementos HTML sempre que precisar deles.

A folha de dicas cobre tags e atributos para estruturar páginas da web, formatar texto, adicionar formulários, imagens, listas, links e tabelas. Também inclui tags que foram introduzidas em códigos HTML5 e HTML para caracteres especiais comumente usados.

DOWNLOAD GRÁTIS: Esta folha de dicas está disponível como um PDF para download de nosso parceiro de distribuição, TradePub. Você terá que preencher um pequeno formulário para acessá-lo apenas pela primeira vez. Download

A folha de referências do HTML Essentials.

A folha de referências do HTML Essentials

... ... ... ... ...

...

Atalho	Açao
Tags básicas
...	A primeira e a última tag de um documento HTML. Todas as outras marcas ficam entre essas marcas de abertura e de fechamento.
...	Especifica a coleção de metadados para o documento.
	Descreve o título da página e aparece na barra de título do navegador.
...	Inclui todo o conteúdo que será exibido na página da web.
Informação do Documento
Menciona o URL base e todos os links relativos ao documento.
Para obter informações adicionais sobre a página, como autor, data de publicação, etc.
Links para elementos externos, como folhas de estilo.
	Contém informações de estilo de documento, como CSS (Cascading Style Sheets).
	Contém links para scripts externos.
Formatação de Texto
... OU ...	Coloca o texto em negrito.
...	O texto é colocado em itálico e em negrito.
...	Coloca o texto em itálico, mas não o deixa em negrito.
...	Texto tachado.
...	Cita o autor de uma citação.
...	Marca uma parte excluída de um texto.
...	Mostra uma seção que foi inserida no conteúdo.
...	Para exibir cotações. Freqüentemente usado com o marcação.
...	Para orçamentos mais curtos.
...	Para abreviações e formulários completos.
...	Especifica os detalhes do contato.
...	Para definições.
...	Para trechos de código.
...	Para escrever subscritos
...	Para escrever sobrescritos.
...	Para reduzir o tamanho do texto e marcar informações redundantes em HTML5.
Estrutura do Documento
...	Diferentes níveis de títulos. H1 é o maior e H6 é o menor.
...	Para dividir o conteúdo em blocos.
...	Inclui elementos embutidos, como uma imagem, ícone, emoticon, sem estragar a formatação da página.
...	Contém texto simples.
	Cria uma nova linha.
	Desenha uma barra horizontal para mostrar o final da seção.
Listas
...	Para uma lista ordenada de itens.
...	Para uma lista não ordenada de itens.
...	Para itens individuais em uma lista.
...	Lista de itens com definições.
...	A definição de um único termo alinhado com o conteúdo do corpo.
...	A descrição do termo definido.
Links
...	Marca âncora para hiperlinks.
...	Tag para vincular a endereços de e-mail.
...	Etiqueta de âncora para listar números de contato.
...	Tag âncora para vincular a outra parte da mesma página.
...	Navega para uma seção div da página da web. (Variação da tag acima)
Imagens
	Para exibir arquivos de imagem.
Atributos para o marcação
src = ”url”	Link para o caminho de origem da imagem.
alt = ”texto”	O texto exibido quando o mouse passa sobre a imagem.
altura = ””	Altura da imagem em pixels ou porcentagens.
largura = ””	Largura da imagem em pixels ou porcentagens.
alinhar = ””	Alinhamento relativo da imagem na página.
fronteira = ””	Espessura da borda da imagem.
	Link para um mapa clicável.
	Nome da imagem do mapa.
A área da imagem de um mapa de imagem.
Atributos para o marcação
forma = ”"	Forma da área da imagem.
coords = ””	Coordenadas da área da imagem do mapa.
Formulários
...	A tag pai de um formulário HTML.
Atributos para o marcação
ação = ”url”	O URL onde os dados do formulário são enviados.
método = ””	Especifica o protocolo de envio do formulário (POST ou GET).
enctype = ””	O esquema de codificação de dados para envios POST.
autocompletar	Especifica se o preenchimento automático do formulário está ativado ou desativado.
novalidar	Especifica se o formulário deve ser validado antes do envio.
aceitar charsets	Especifica a codificação de caracteres para envios de formulários.
alvo	Mostra onde a resposta de envio do formulário será exibida.
...	Grupos de elementos relacionados no formulário /
...	Especifica o que o usuário deve inserir em cada campo do formulário.
...	Uma legenda para o elemento fieldset.
Especifica que tipo de entrada deve ser obtida do usuário.
Atributos para o marcação
tipo = ””	Determina o tipo de entrada (texto, datas, senha).
nome = ””	Especifica o nome do campo de entrada.
valor = ””	Especifica o valor no campo de entrada.
tamanho = ””	Define o número de caracteres para o campo de entrada.
maxlength = ””	Define o limite de caracteres de entrada permitidos.
obrigatório	Torna um campo de entrada obrigatório.
largura = ””	Define a largura do campo de entrada em pixels.
altura = ””	Define a altura do campo de entrada em pixels.
placeholder = ””	Descreve o valor do campo esperado.
padrão = ””	Especifica uma expressão regular, que pode ser usada para procurar padrões no texto do usuário.
min = ””	O valor mínimo permitido para um elemento de entrada.
max = ””	O valor máximo permitido para um elemento de entrada.
Desativado	Desativa o elemento de entrada.
...	Para capturar sequências de dados mais longas do usuário.
...	Especifica uma lista de opções que o usuário pode escolher.
Atributos para o marcação
nome = ””	Especifica o nome de uma lista suspensa.
tamanho = ””	Número de opções fornecidas ao usuário.
múltiplo	Define se o usuário pode escolher várias opções da lista.
obrigatório	Especifica se a escolha de uma opção é necessária para o envio do formulário.
auto-foco	Especifica que uma lista suspensa entra automaticamente em foco após o carregamento de uma página.
...	Define itens em uma lista suspensa.
valor = ””	Exibe o texto para qualquer opção fornecida.
selecionado	Define a opção padrão que é exibida.
...	Tag para criar um botão para envio de formulário.
Objetos e iframes
	Descreve o tipo de arquivo incorporado.
Atributos para o
altura = ””	A altura do objeto.
largura = ””	A largura do objeto.
tipo = ””	O tipo de mídia que o objeto contém.
	Um quadro embutido para incorporar informações externas.
nome = ””	O nome do iframe.
src = ””	O URL de origem do conteúdo dentro do quadro.
srcdoc = ””	O conteúdo HTML dentro do quadro.
altura = ””	A altura do iframe.
largura = ””	A largura do iframe.
Adiciona parâmetros extras para personalizar o iframe.
...	Incorpora um aplicativo ou plug-in externo.
Atributos para o
altura = ”“	Define a altura da incorporação.
largura = ”“	Define a largura da incorporação.
tipo = ””	O tipo ou formato da incorporação.
src = ””	O caminho de origem do arquivo incorporado.
Mesas
...	Define todo o conteúdo de uma tabela.
Uma descrição da tabela.
Cabeçalhos para cada coluna da tabela.
Define os dados do corpo da tabela.
Descreve o conteúdo do rodapé da tabela.
Conteúdo para uma única linha.
	...	Os dados em um único item de cabeçalho.
	...	Conteúdo em uma única célula da tabela.
Agrupa colunas para formatação.
Uma única coluna de informações.
Novas tags HTML5
...	Especifica o cabeçalho da página da web.
	Especifica o rodapé da página da web.
...	Marca o conteúdo principal da página da web.
...	Especifica um artigo.
	Especifica o conteúdo da barra lateral de uma página.
...	Especifica uma seção específica na página da web.
...	Para descrever informações extras.
...	Usado como um título para a tag acima. Está sempre visível para o usuário.
...	Cria uma caixa de diálogo.
...	Usado para incluir gráficos e figuras.
	Descreve um elemento.
...	Destaca uma parte específica do texto.
	Conjunto de links de navegação em uma página da web.
...	Um item específico de uma lista ou menu.
...	Mede dados dentro de um determinado intervalo.
...	Coloca uma barra de progresso e rastreia o progresso.
...	Exibe texto que não suporta anotações Ruby.
...	Exibe detalhes dos caracteres da tipografia do Leste Asiático.
...	Uma anotação Ruby para tipografia do Leste Asiático.
...	Identifica a hora e a data.
Uma quebra de linha dentro do conteúdo.
Objetos de personagem ¹HTML5
" OU & quot;	Aspas
& lt;	Menor que sinal (
> OU & gt;	Sinal maior que (>)
OU & nbsp;	Espaço inquebrável
© OU &cópia de ;	Símbolo de direitos autorais
™ OU & ucirc;	Símbolo de marca registrada
@ OU & Uuml;	Símbolo “arroba” (@)
& OU & amp;	Símbolo e comercial (&)
• OU & ouml;	Bala pequena
¹Ignore o espaço antes do ponto-e-vírgula ao digitar o caractere HTML.

Crie um site para uma experiência prática

Depois de ter entendido o básico do código HTML e ter um conhecimento prático de CSS e JavaScript, tente construir um site Como fazer um site: para iniciantesHoje irei orientá-lo no processo de criação de um site completo a partir do zero. Não se preocupe se isso parecer difícil. Vou guiá-lo em cada passo do caminho. consulte Mais informação . Além disso, certifique-se de salvar nosso Folha de dicas de propriedades CSS3 A folha de dicas de propriedades CSS3 essenciaisDomine a sintaxe CSS essencial com nossa folha de dicas de propriedades CSS3. consulte Mais informação e Folha de dicas de JavaScript A última folha de dicas do JavaScriptObtenha uma rápida atualização dos elementos JavaScript com esta folha de dicas. consulte Mais informação para uso futuro!