Dicionário de tags HTML

Felipe Castelli Mellão
4 min readOct 2, 2021

--

Aqui estou colocando tudo o que aprendi de tags HTML .

# Como funciona o HTML?

- `<!DOCTYPE html>` — No HTML, o doctype é a introdução “<!DOCTYPE html>” encontrada no topo de todos os documentos. Seu único propósito é evitar que o browser mude para os chamados “quirks mode” quando renderizar um documento; isto é, o “<!DOCTYPE html>” doctype garante que o browser faça um esforço na tentativa de seguir as especificações relevantes, em vez de usar um modo de renderização diferente e que seja incompatível com algumas especificações.

- `<html>` — O elemento HTML <html> (ou HTML root element) representa a raiz de um HTML ou XHTML documento. Todos os outros elementos devem ser descendentes desse elemento.

- `<head>` — Elemento providencia informações gerais (metadados) sobre documento, incluindo seu título e links para scripts e folhas de estilos.

- `<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>` — Define qualquer informação de metadados que não podem ser definidos por outros elementos HTML. (<base>, <link>, <script>, <style> ou <title>).

- `<title>` — Elemento HTML Título define o título do documento, mostrado na barra de título de um navegador ou na aba da página. Pode conter somente texto e quaisquer marcações contidas no texto não são interpretadas.

- `<body>` — Representa o conteúdo de um documento HTML. É permitido apenas um <body> por documento.

- `<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, sessões de cabeçalho, formulário de pesquisa, e outros.

- `<h1>` — Os elementos HTML <h1>–<h6> representam seis níveis de título de sessão. <h1> é o nível de sessão mais alto e <h6> é o mais baixo.

- `<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.

- `<a>` — O elemento HTML <a> (ou o Elemento Ancora HTML define uma hiperligação (hyperlink), o destino de uma hiperligação, ou ambos.

- `atributos da tag` — São características que estamos adicionando à nossa tag. Sempre dentro da tag de abertura. Por exemplo a tag `a` tem o atributo `href`, então escrevemos assim:

```html

<a href=”outrapagina.html”>Olá mundo!</a>

```

Cada atributo tem o seu valor, o seu significado. Devemos estudar para saber o que significa cada atributo.

Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as tags) e específicos (que são direcionados para cada Tag, através de especificação).

Os atributos possuem nome e um valor, existem atributos que você vai usar praticamente sempre e existem outros que serão mais raros. Como class ou id que pertencem ao CSS.

***A partir daqui estudar cada atributo que as tags tem***

- `<p>` — Tag para definir um parágrafo

`<button>` — Representa um botão clicável

`div` — É um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos(usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica(tal como article ou nav).

`<dl> description list` — Engloba uma lista de pares de termos e descrições. Um uso comum para este elemento é para implementar um glossário ou exibir metadados(uma lista de pares chave e valor)

`<dt> description title` — Identifica um termo na lista de definição. Este elemento pode ocorrer somente em um elemento filho de dl. Geralmente seguido por um elemento dd, ou multiplos dt na mesma linha indicam vários termos sendo definidos pelo próximo elemento.

`<dd> define description` — Fornece detalhes ou uma definição mais completa do termo precedente (definido por dt) numa lista de descrições (dl).

`<strong>` — Dá oa texto uma forte importância, e é tipicamente mostrado em negrito.

`<figure>` — Representa o conteúdo independente, frequentemente com uma legenda (figcaption), e é normalmente referido com uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição independente do fluxo principal. Normalmente, isso é uma imagem, uma ilustração, um diagrama, um techo de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

`<img>` — Representa a inserção de imagem no documento, sendo implementado também pelo HTML 5 para uma melhor experiência com o elemento (<figure>) e(<figcaption>).

`<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.

Por exemplo, um menu de navegação deve estar dentro um elemento <nav>, mas uma lista de resultados de pesquisa ou a exibição de um mapa e seus controles não possuem elementos específicos, e podem ser colocados dentro de uma <section>.

`<input>` — É usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um input varia consideravelmente dependendo do valor de seu atributo `type`. Estudar os atributos que aparecer no curso.

`type=search` — Um campo de texto com uma só linha para digitar termos de busca; Quebras de linha são automaticamente removidas do valor entrado.

--

--

Felipe Castelli Mellão

Web developer who loves interacting with people. I like the wonders and the mysteries of the world. Love in learning and teaching the things of life.