Principais Tags HTML
Olá Pessoal.
Neste post vamos listar as principais tags HTML.
Essa lista serve como base para iniciantes e estudantes na área de Desenvolvimento Front-End e afins.
TAG
DESCRIÇÃO
<html>
O elemento HTML <html> representa a raiz de um HTML, ou seja, todos os outros elementos devem ser escritos após esse elemento.
<head>
O elemento <head> providencia informações gerais sobre o documento, incluindo seu título e links para scripts e folhas de estilos.
<link>
O Elemento <link> especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo.
<meta>
O elemento <meta> define qualquer informação de metadados que não podem ser definidos por outros elementos.
<style>
O elemento<style> contém informações de estilo para um documento ou uma parte do documento. As informações de estilo geralmente estão no arquivo CSS do site.
<title>
O elemento <title> define o título do documento, mostrado na barra de título de um navegador ou na aba da página.
Separação e Organização de Conteúdo
Elementos de separação de conteúdo permitem organizar o conteúdo do documento em partes lógicas.
<article>
O Elemento <article> representa uma composição independente em um documento. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário e etc. Em resumo é um conteúdo independente.
<aside>
O elemento <aside> representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo do seu entorno. Porém que poderia ser considerado separado do conteúdo. Essas seções são, muitas vezes, representadas como barras laterais.
<footer>
O elemento de Rodapé <footer> representa um rodapé. Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.
<header>
O elemento <header> representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.
<h1> até <h6>
Os elementos HTML <h1>–<h6> representam seis níveis de título de seção. <h1> é o nível de seção mais alto e <h6> é o mais baixo.
<main>
O elemento em seu documento ou aplicação. Entende-se como conteúdo principal relacionado ou diretamente com o tópico central da página com a funcionalidade central da aplicação. O mesmo deve ser único na página, ou seja, dentro da página <main> não devem ser incluídos nas seções da página ou aplicação, tais como todos os mecanismos, elemento de navegação, informações de copyright e campos de busca ( a não ser , é claro, caso a função principal do documento seja fazer algum tipo de busca ).
<nav>
O Elemento de Navegação (<nav>) representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.
<section>
O elemento <section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.
Conteúdo Textual
Use os elementos HTML de conteúdo textual para organizar blocos ou seções, esses elementos identificam o propósito ou a estrutura do conteúdo.
<blockquote>
O Elemento HTML <blockquote> indica que o texto incluído é uma longa citação. Normalmente, este é processado visualmente pelo recuo.
<div>
O elemento de divisão <div> é um contêiner genérico para conteúdo. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como article ou nav).
<dl>
O HTML Definition List (<dl>) engloba uma lista de pares de termos e termos. Um uso comum para este elemento é para implementar um glossário.
<figure>
O Elemento <figure> representa o independente, frequentemente com uma legenda <figcaption> e é referido como uma unidade única.
<hr>
O elemento<hr> representa uma quebra temática entre os elementos de nível de parágrafo. Nas versões anteriores do HTML, representa uma linha horizontal. Pode continuar sendo exibido como uma linha horizontal nos navegadores, mas agora está definida em termos semânticos, em vez de termos de apresentação.
<li>
O elemento <li> é usado para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai: uma lista ordenada (ol), uma lista desordenada (ul) ,ou um menu (menu).
<ol>
O Elemento <ol> (ou Elemento HTML de lista ordenada) representa uma lista de itens ordenados. A característica desses itens ordenados em uma lista são mostradores com uma contagem que os precede.
<p>
O elemento representa um parágrafo. Em letras visuais, separados por letras, como os blocos identificados em branco.
<pre>
HTML texto pré-formatado <pre> é uma tag utilizada para representar o texto pré-formatado. Um texto dentro desse elemento é exibido em uma fonte não proporcional da mesma maneira que o texto original foi disposto no arquivo. Espaços em branco são pequenos no texto da mesma forma em que este foi digitado.
<ul>
O elemento <ul> ( HTML de Lista de itens da lista representa um elemento sem ordem de ordem rígida, ou seja, uma lista.
Semânticas Textuais Inline
Usa-se a semântica textual inline para definir o significado, estrutura, ou estilo de uma palavra, linha, ou de qualquer outro tipo de texto.
<a>
O elemento <a> em HTML (ou elemento âncora), com o atributo hrefcria-se uma hiperligação nas páginas web, arquivos, endereços de ligações, na mesma página ou endereços na URL (links).
<b>
O elemento HTML <b> representa bold e tem a função de enfatizar o local marcado como negrito.
Não tem função semântica, apenas visual.
<br>
O elemento HTML quebra-de-linha <br> produz uma quebra de linha em um texto.
<code>
O elemento HTML<code> apresenta seu conteúdo estilizado de maneira a indicar que o texto é um pequeno fragmento de código.
<em>
O elemento HTML <em> marca o texto que tem ênfase. O
<i>
O elemento HTML<i> representa uma parte do texto que é destacada do restante, conhecido como “itálico” normalmente.
<span>
O elemento HTML <span> é um contêiner genérico em linha para conteúdo fraseado. Ele pode ser usado para agrupar elementos para fins de estilo.
<strong>
Exibe o texto como negrito, porém tem funções semânticas.
<time>
O elemento HTML time representa o <time>tempo tanto no formato de 24 horas ou como uma data precisa no calendário Gregoriano (com informações de tempo e fuso horário)
Imagem e Multimídia
HTML suporta vários recursos multimídia como imagens, áudio e vídeo.
<area>
O elemento HTML<area> define uma região hot-spot em uma imagem, e, opcionalmente, associa-lo com um Hyperlink.
<audio>
O elemento audioé utilizado para embutir o conteúdo de um documento HTML.
<img>
O elemento HTML<img> (ou HTML Image Element ) representa a inserção de imagem no documento.
<video>
O elemento HTML<video> representa a inserção de vídeo no documento.
Conteúdo Integrado
Além do normal de multimídia, o HTML pode incluir uma variedade de conteúdos, embora nem todos os conteúdos possuam outros objetos de fácilidade de interação.
<embed>
O elemento HTML<embed> incorpora conteúdo externo no ponto especificado no documento. Este conteúdo é fornecido ou outra fonte de conteúdo interativo, como um navegador externo.
<iframe>
O elemento HTML <iframe> (ou elemento HTML inline frame) representa um de navegação aninhado em contexto incorporando outra página HTML atual.
<source>
O elemento sourceé utilizado para especificar recursos de mídia de elementos picture, audioou video em HTML5. É um elemento vazio. É normalmente usado para disponibilizar vários formatos suportados por diferentes navegadores. |
Script
Com o intuito de permitir a criação de conteúdo com aplicações Web, HTML foi projetado com suporte a ferramentas de scripting, sendo mais promininte sendo JavaScript. Certos elementos suportam essa capacidade.
<canvas>
O elemento HTML Canvas ( <canvas>) pode ser utilizado para desenhar gráficos usando scripts (geralmente JavaScript ). Por exemplo, além de desenhar gráficos, ele pode ser usado para fazer composições de fotos e também para animações. Você poderá colocar conteúdos alternativos dentro do bloco <canvas>. Este conteúdo será exibido também em navegadores antigos e em navegadores com JavaScript desabilitado.
<noscript>
O elemento HTML<noscript> define uma seção de html a ser inserido se um tipo de script não é suportado pela página ou se o script está desativado no navegador.
<script>
O elemento HTML<script> é usado para incluir ou referenciar um script executável.
Demarcando Edições
Estes elementos de texto permitiram que partes foram alteradas.
<del>
O Elemento HTML de Texto Excluído representa uma parte do texto que foi excluído HTML (ou elemento de um documento). Este elemento é (não) renderizado pelos navegadores com uma linha entre o texto.
<ins>
O Elemento HTML<ins> (ou Texto Inserido em HTML ) HTML representa um intervalo de texto que foi adicionado a um documento.
Conteúdo Tabulado
Estes elementos são usados para criar e manipular dados em tabelas.
<table>
O elemento
permite a criação de tabelas para organização de conteúdo no site ou aplicação.
Formulários
HTML provê de vários elementos que podem ser usados juntos para criar formulários que o usuário pode preencher e mandar para o site ou aplicativo. Há muito mais informação no guia de formulários HTML.
<button>
O Elemento HTML<button> representa um botão clicável.
<fieldset>
O elemento HTML<fieldset> é usado para agrupar elementos, assim como rótulos ( label), dentro de um formulário web.
<form>
O elemento HTML<form> representa uma seção de um documento que contém controles interativos que permitem ao usuário submedidor de um determinado servidor web.
<input>
O elemento HTML |
<label>
Um elemento HTML<label> representa uma legenda para um item em uma interface do usuário. Ele pode estar associado com um elemento de controle, sendo usado dentro do elemento label, ou atributo for. Tal controle é chamado ou controle etiquetado do elemento etiqueta. Uma entrada pode ser associada a diversas etiquetas (<label>s).
<legend>
O Elemento HTML <legend> (ou Elemento HTML Campo “Legend” ) representa um rótulo para o conteúdo do seu ancestral fieldset.
<option>
Em um Web, o elemento HTML <option> é usado para criar um controle que representa um item dentro de um elemento HTML5 select, optgroupou datalist.
<output>
| O elemento de saída (<output>) é um elemento não qual um site ou aplicativo pode inserir os resultados de um cálculo ou o resultado de uma ação do usuário. |
<select>
O elemento HTML select (<select>) representa um controle que apresenta um menu de opções. As opções dentro do menu são servidas pelo elemento option, que podem agrupados por elementos . As opções podem ser pré-selecionadas para o usuário. optgroup
<textarea>
O elemento HTML <textarea> representa um controle de edição para uma caixa de texto, útil quando você permite ao usuário informar um texto extenso em formato livre, como um comentário ou formulário de retorno.
Elementos Interativos
HTML oferece uma seleção na criação de elementos interativos que auxiliam os usuários.
<details>
O elemento HTML details ( <details>) é usado como uma ferramenta de onde o usuário irá obter informações adicionais.
<dialog>
O elemento HTML<dialog> representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.
<menu> (pt-BR)
<summary>
O elemento HTML Summary ( ) é utilizado como um sumário<summary> ou legenda para o conteúdo de um elemento details.
Componentes Web
Componentes Web são uma tecnologia relacionada ao HTML que faz possível, essencialmente, a criação e customização de elementos como se fossem parte normal do HTML. Além disso, você pode criar versões personalizadas de elementos padrão do HTML.
<content>
O elemento HTML<content> — uma parte obsoleta do conjunto de tecnologias Web Components — era usado dentro do Shadow DOM como um ponto de inserção e não deveria ser usado em HTML comum.
<template>
O elemento HTML <template> é um mecanismo para encapsular um conteúdo usando o lado do cliente que não é renderizado quando a página é carregada, mas pode ser colocado posteriormente em tempo de execução JavaScript.
Fonte Original: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
1 comentário
Estevão Machado · julho 28, 2023 às 5:33 pm
Muito bom mesmo!