<dfn> - HTML: Linguagem de Marcação de Hipertexto

<dfn>
=====

Resumo
------

O elemento \*\*HTML `<dfn>` \*\*(ou *Elemento Definição* *HTML*) representa uma instância de definição de um termo.

>
> **Note:** **Notas de uso no** **HTML5:**- O elemento `<dfn>` marca o termo que será definido; a definição do termo deve ser data em torno de `<p>`, `<section>` ou uma lista de definições por grupo (usualmente um `<dt>`, `<dd>` pareado com o `<dt>`).
>
>
> * O valor exato do termo a ser definido é determinado pelas seguintes regras:
>     1. Se o elemento <dfn> tiver um atributo title, então o termo é o valor deste atributo.
>     2. Senão, se contiver somente um elemento `<abbr>` com um atributo `title`, então o termo é o valor deste atributo.
>     3. Caso contrário, o conteúdo do texto do elemento `<dfn>` é o termo a ser definido.
>
>
>

* *Categorias de conteúdo (en-US)* Conteúdo de fluxo (en-US), Conteúdo de fraseamento (en-US), conetúdo palpável.
* *Conteúdo permitido* Conteúdo de fraseamento (en-US), mas um elemento `<dfn>` não deve ser um descendente.
* *Omissão de tag* None, both the starting and ending tag are mandatory.
* *Elementos pais permitidos* Qualquer elemento que aceite conteúdo de fraseamento (en-US).
* *Interface DOM* `HTMLElement` (en-US)
Atributos
---------

Esse elemento inclui os atributos globais (en-US).

No HTML5, o atributo **title** tem um significado especial, como mencionado acima.

Exemplos
--------

Os exemplos a seguir são válidos em HTML5.

```html
<!-- Define "A Internet" -->
<p>
  <dfn id="def-internet">A Internet</dfn> é um sistema global de redes
  interconectadas que usam o Internet Protocol Suite (TCP/IP) para servir
  bilhões de usuários no mundo todo.
</p>
```

Posteriormente no mesmo documento:

```html
<dl>
  <!-- Define "World-Wide Web" a definição de referência para "A Internet" -->
  <dt>
    <dfn>
      <abbr title="World-Wide Web">WWW</abbr>
    </dfn>
  </dt>
  <dd>
    A World-Wide Web (WWW) é um sistema de documentos de hipertexto interligados
    acessados pela <a href="#def-internet">Internet</a>.
  </dd>
</dl>
```

### Resultado

*A Internet* é um sistema global de redes interconectadas que usam o Internet Protocol Suite (TCP/IP) para servir bilhões de usuários no mundo todo.

*WWW*

A World-Wide Web (WWW) é um sistema de documentos de hipertexto interligados acessados pela Internet.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-dfn-element |

Navegadores compatíveis
-----------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Elementos relacionados à lista de definições: `<dl>`, `<dt>`, `<dd>`
* `<abbr>`


<var> - HTML: Linguagem de Marcação de Hipertexto

<var>
=====

Resumo
------

O elemento HTML Variable (`<var>`) representa uma variável em uma expressão matemática ou um contexto de programação.

Contexto de utilização
----------------------

| Permitted content | Phrasing content |
| --- | --- |
| Tag omission | Both start and end tags are required |
| Permitted parent elements | Any element that accepts phrasing content (en-US). |
| Normative document | HTML, "The `var` element" |

Atributos
---------

Este elemento somente inclui os global attributes (en-US).

Interface DOM
-------------

Este elemento implementa a interface `HTMLElement` (en-US).

>
> **Note:** **Implementation note:** up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.
>
>
>

Propriedades típicas padrão de estilo
-------------------------------------

```css
var {
  font-style: italic;
}
```

Exemplo
-------

```html
<p>A simple equation: <var>x</var> = <var>y</var> + 2</p>
```

A simple equation: *x* = *y* + 2


article (artigo) - HTML: Linguagem de Marcação de Hipertexto

article (artigo)
================

Resumo
------

O *Elemento HTML Article* (<article>) representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuido de forma independente ou reutilizável, por exemplo, em sindicação. 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, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.

>
> **Note:** *Notas de uso:*
>
>
> * Quando um elemento `<article>` está aninhado, o elemento interior representa um artigo relacionado com o elemento exterior. Por exemplo, os comentários do post de um blog podem ser elementos `<article>` aninhados em `<article>` representando o post do blog.
> * Informações sobre o autor de um elemento `<article>` podem ser fornecidas através do elemento `<address>` ,mas ele não se aplica aos elementos `<article>` aninhados.
> * A data e hora de publicação de um elemento `<article>` pode ser descrita usando o atributo `pubdate` de um elemento `<time>`.
>
>
>

Contexto de uso
---------------

| Conteúdo permitido | Flow content |
| --- | --- |
| Omissão de tag | Nenhuma, tanto tag de início quanto de fim são obrigatórias |
| Elementos pai permitidos | Qualquer elemento que aceita flow content. Note-se que um elemento `<article>` não pode ser descendente de um elemento `<address>`. |
| Documento normativo | HTML5, section 4.4.4 |

Atributos
---------

Este elemento não possui outros elementos se não os global attributes, comuns a todos os elementos.

Interface DOM
-------------

Este elemento implementa a interface `HTMLElement` .

Exemplos
--------

```html
<article>
  <h4>Um artigo realmente impressionante</h4>
  <p>Lotes de texto incrível.</p>
</article>
```

### Resultado

<article>

#### Um artigo realmente impressionante

Lotes de texto incrível.

</article>

### Compatibilidade

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elementos de seção relacionados: `<body>`, `<nav>`, `<section>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`
* Sections and outlines of an HTML5 document.


<div> - HTML: Linguagem de Marcação de Hipertexto

<div>
=====

Resumo
------

O **elemento de divisão** \*\*HTML `<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>`).

* *Categoria de conteúdo* Flow content, palpable content.
* *Conteúdo permitido* Flow content.
* *Omissão de tag* Nenhuma, as tags de abertura e fechamento são obrigatórias. None, both the starting and ending tag are mandatory.
* *Elementos pais permitidos* Qualquer elemento que aceite conteúdo de fluxo.
* *Interface DOM* `HTMLDivElement`
Atributos
---------

Esse elemento inclui atributos globais.

No HTML 5, o atributo **align** no **<div>** é obsoleto.

Exemplos
--------

```html
<div>
  <p>
    Qualquer tipo de conteúdo aqui. Como <p>, <table>. Você dá o
    nome!
  </p>
</div>
```

### Resultado

Qualquer tipo de conteúdo aqui. Como <p>, <table>. Você dá o nome!

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-div-element |

Compatibilidade dos navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Semantic sectioning elements: `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`
* `<span>` element for styling of phrasing content


<hr> - HTML: Linguagem de Marcação de Hipertexto

<hr>
====

Sumário
-------

O **elemento HTML `<hr>`** representa uma quebra temática entre elementos de nível de parágrafo (por exemplo , uma mudança da cena de uma história, ou uma mudança de tema com uma seção). Nas versões anteriores do HTML, representava uma linha horizontal. Pode continuar sendo exibida como uma linha horizontal nos navegadores, mas agora está definida em termos semânticos, em vez de termos de apresentação.

* *Categorias de conteúdo (en-US)* Fluxo de conteúdo (en-US).
* *Conteúdo permitido* Nenhum, é um empty element (en-US).
* *Omissão de Tag* Deve conter a tag de início, mas não precisa ter uma tag de encerramento.
* *Elementos pai permitidos* Qualquer elemento que aceite fluxo de conteúdo (en-US).
* *Interface DOM* `HTMLHRElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais (en-US).

`align`
Deprecated

Non-standard

Define a regra de alinhamento na página. Se nenhum valor for especificado, o valor padrão é `left`.

`color`
Deprecated

Non-standard

Denife a regra da cor através do nome da cor ou um valor hexadecimal.

`noshade`
Deprecated

Non-standard

Deine a regra para não ter sombreamento.

`size`
Deprecated

Non-standard

Denife a altura, em pixels.

`width`
Deprecated

Non-standard

Define a regra de comprimento na página através de um valor em pixel ou porcentagem.

Exemplo
-------

```html
<p>
  Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.
  Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.
</p>

<hr />

<p>
  Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. Este
  é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.
</p>
```

O HTML acima irá produzir:

Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.

---

Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.

Notas
-----

Para alterar a aparencia da linha ou as lacunas entre ela e os parágrafos, utilize folhas de estilo em cascata.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-hr-element |

Compatibilidade nos Navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Elemento HTML parágrafo (en-US)


header (cabeçalho) - HTML: Linguagem de Marcação de Hipertexto

header (cabeçalho)
==================

Sumário
-------

O **elemento HTML** **`<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.

Experimente
-----------

>
> **Note:** **Notas de utilização:**
>
>
> * O elemento `<header>` não é separador de conteúdo (sectioning content), portanto, não introduz uma nova seção no outline.
>
>
>

* *Categoria de conteúdo (en-US)* Flow content (en-US), conteúdo palpável.
* *Conteúdo permitido*Flow content (en-US), mas não com descendentes de `<header>` ou `<footer>`
* *Omissão da tag* Nenhuma, as tags de abertura e fechamento são obrigatórias.
* *Elementos-pai permitidos* Qualquer elemento que aceite flow content (en-US). Note que o elemento `<header>` não deve ser descendente de `<address>`, `<footer>` ou outro elemento `<header>` .
* *Interface DOM* `HTMLElement` (en-US)
Atributos
---------

Este elemento não possui outros atributos além dos atributos globais (en-US), comuns a todos os elementos.

Exemplos
--------
```

<header>
  <h1>Título da Página Principal</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-header-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Uma descrição mais detalhada: O elemento header | HTML5 Doctor
* Outros elementos relacionados a seção: `<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<footer>`, `<section>`, `<address>`;
* Seções e outlines de um documento HTML5.


<a> - HTML: Linguagem de Marcação de Hipertexto

<a>
===

O **elemento** **`<a>`** em **HTML** (ou elemento âncora), com o atributo `href` cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL. O conteúdo dentro de cada `<a>` **precisará** indicar o destino do link.

Experimente
-----------

Atributos
---------

Os atributos do elemento incluem os atributos globais.

`download`

Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor:

* Sem um valor, o *browser* irá sugerir um nome de arquivo/extensão, gerado a partir de diversas origens:
    + O cabeçalho HTTP `Content-Disposition`
    + O segmento final no path (caminho) da URL
    + The media type (en-US) (from the (`Content-Type` header, the start of a `data:` URL (en-US), or `Blob.type` for a `blob:` URL)
* A definição de um valor o sugere como o nome do arquivo. Caracteres `/` e `\` são convertidos para *underscores* (`_`).Arquivos de sistema talvez proibam alguns caracteres em nomes de arquivos, então o navegador irá ajustar o nome sugerido caso necessário.

>
> **Note:** **Notes:**- `download` somente funciona para URLs de mesma origem (en-US), ou os esquemas `blob:` e `data:`
>
>
> * Se `Content-Disposition` tiver um diferente `filename` (nome do arquivo) que `download`, o cabeçalho tem prioridade. (Se `Content-Disposition: inline`, Firefox prioriza o cabeçalho enquanto o Chrome escolhe `download`.)
>
>
>

`href`

A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers:

* Sections of a page with fragment URLs(Seções de página com fragmentos URL)
* Pieces of media files with media fragments (Pedaços de arquivos de mídia com fragmentos da própria mídia)
* Números de telefone com `tel:` URLs
* Email addresses with(Endereço de email com) `mailto:` URLs
* Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do `registerProtocolHandler()` (en-US)

`hreflang`

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global `lang` attribute.

`ping`

Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições `POST` com o corpo `PING` para as URLs. Typically for tracking.

`referrerpolicy`
Experimental

Quanto do referrer para ser enviado quando acessar o link. Acesse `Referrer-Policy` para possíveis valores e seus efeitos.

`rel`

The relationship of the linked URL as space-separated link types (en-US).

`target`

Where to display the linked URL, as the name for a *browsing context* (a tab, window, or `<iframe>`). The following keywords have special meanings for where to load the URL:

* `_self`: No atual contexto de pesquisa. (Default)
* `_blank`: Normalmente uma nova aba, porém usuários podem configurar seus navegadores para abrir em uma nova janela.
* `_parent`: the parent browsing context of the current one. If no parent, behaves as `_self`.
* `_top`: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as `_self`.

>
> **Note:** Quando usando `target`, adicione `rel="noreferrer noopener"` para evitar "exploit" para `window.opener` API;
>
>
>

>
> **Warning:** **Note:** Linking to another page with `target="_blank"` will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using `rel="noreferrer noopener"`.
>
>
>

`type`

Hints at the linked URL's format with a MIME type (en-US). No built-in functionality.

### Obsolete attributes

`charset`

Hinted at the character encoding of the linked URL.

>
> **Note:** This attribute is obsolete and **should not be used by authors**. Use the HTTP `Content-Type` header on the linked URL.
>
>
>

`coords`

Used with the `shape` attribute. A comma-separated list of coordinates.

`name`

Was required to define a possible target location in a page. In HTML 4.01, `id` and `name` could both be used on `<a>`, as long as they had identical values.

>
> **Note:** Use the global attribute `id` instead.
>
>
>

`rev`

Specified a reverse link; the opposite of the `rel` attribute. Deprecated for being very confusing.

`shape`

The shape of the hyperlink's region in an image map.

>
> **Note:** Use the `<area>` element for image maps instead.
>
>
>

Properties
----------

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content,
 interactive content, palpable content.
  |
| Permitted content | Transparent, containing either
 flow content
 (excluding
 interactive content) or
 phrasing content.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content, or any element that accepts
 flow content, but not other `<a>` elements.
  |
| Implicit ARIA role | `link (en-US)` when `href` attribute is
 present, otherwise
 no corresponding role |
| Permitted ARIA roles | When `href` attribute is present:* `button (en-US)`
* `checkbox (en-US)`
* `menuitem (en-US)`
* `menuitemcheckbox (en-US)`
* `menuitemradio (en-US)`
* `option (en-US)`
* `radio (en-US)`
* `switch (en-US)`
* `tab (en-US)`
* `treeitem (en-US)`

When `href` attribute is not present:* any
 |
| DOM interface | `HTMLAnchorElement` (en-US) |

Examples
--------

### Linking to an absolute URL

#### HTML

```html
<a href="https://www.mozilla.com"> Mozilla </a>
```

#### Result

### Linking to relative URLs

#### HTML

```html
<a href="//example.com">Scheme-relative URL</a>
<a href="/pt-BR/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>
```

```
a {
  display: block;
  margin-bottom: 0.5em;
}
```

#### Result

### Linking to an element on the same page

```html
<!-- <a> element links to the section below -->
<p><a href="#Section\_further\_down"> Jump to the heading below </a></p>

<!-- Heading to link to -->
<h2 id="Section\_further\_down">Section further down</h2>
```

>
> **Note:** You can use `href="#top"` or the empty fragment (`href="#"`) to link to the top of the current page, as defined in the HTML specification.
>
>
>

### Linking to an email address

To create links that open in the user's email program to let them send a new message, use the `mailto:` scheme:

```html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
```

For details about `mailto:` URLs, such as including a subject or body, see Email links (en-US) or RFC 6068.

### Linking to telephone numbers

```html
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>
```

`tel:` link behavior varies with device capabilities:

* Cellular devices autodial the number.
* Most operating systems have programs that can make calls, like Skype or FaceTime.
* Websites can make phone calls with `registerProtocolHandler` (en-US), such as `web.skype.com`.
* Other behaviors include saving the number to contacts, or sending the number to another device.

See RFC 3966 for syntax, additional features, and other details about the `tel:` URL scheme.

### Using the download attribute to save a <canvas> as a PNG

To save a `<canvas>` element's contents as an image, you can create a link with a `download` attribute and the canvas data as a `data:` URL:

#### Example painting app with save link

##### HTML

```html
<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my\_painting.png">Download my painting</a>
</p>

<canvas width="300" height="300"></canvas>
```

##### CSS

```css
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
```

##### JavaScript

```js
var canvas = document.querySelector("canvas"),
  c = canvas.getContext("2d");
c.fillStyle = "hotpink";

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI \* 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
```

##### Result

Security and privacy
--------------------

`<a>` elements can have consequences for users' security and privacy. See `Referer` header: privacy and security concerns (en-US) for information.

Using `target="_blank"` without `rel="noreferrer"` and `rel="noopener"` makes the website vulnerable to `window.opener` (en-US) API exploitation attacks (vulnerability description).

Accessibility
-------------

### Strong link text

**The content inside a link should indicate where the link goes**, even out of context.

#### Inaccessible, weak link text

A sadly common mistake is to only link the words "click here" or "here":

```html
<p>Learn more about our products <a href="/products">here</a>.</p>
```

#### Strong link text

Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!

```html
<p>Learn more <a href="/products">about our products</a>.</p>
```

Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.

### onclick events

Anchor elements are often abused as fake buttons by setting their `href` to `#` or `javascript:void(0)` to prevent the page from refreshing, then listening for their `click` events .

These bogus `href` values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a `<button>` instead. In general, **you should only use a hyperlink for navigation to a real URL**.

### External links and linking to non-HTML resources

Links that open in a new tab/window via `target="_blank"`, or links that point to a download file should indicate what will happen when the link is followed.

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

#### Link that opens a new tab/window

```html
<a target="\_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>
```

#### Link to a non-HTML resource

```html
<a href="2017-annual-report.ppt"> 2017 Annual Report (PowerPoint) </a>
```

If an icon is used to signify link behavior, make sure it has alt text:

```html
<a target="\_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 Annual Report
  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
</a>
```

* WebAIM: Links and Hypertext - Hypertext Links
* MDN / Understanding WCAG, Guideline 3.2 (en-US)
* G200: Opening new windows and tabs from a link only when necessary
* G201: Giving users advanced warning when opening a new window
### Skip links

A **skip link** is a link placed as early as possible in `<body>` content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.
```

<body>
  <a href="#content">Skip to main content</a>

  <header>
    …
  </header>

  <main id="content"> <!-- The skip link jumps to here -->
```

```css
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}
```

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

* WebAIM: "Skip Navigation" Links
* How-to: Use Skip Navigation links
* MDN / Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.1
### Size and proximity

#### Size

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.

* Understanding Success Criterion 2.5.5: Target Size
* Target Size and 2.5.5
* Quick test: Large touch targets

#### Proximity

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

Spacing may be created using CSS properties like `margin`.

* Hand tremors and the giant-button-problem
Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-a-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<link>` is similar to `<a>`, but for metadata hyperlinks that are invisible to users.
* `:link` is a CSS pseudo-class that will match `<a>` elements with valid `href` attributes.


<area> - HTML: Linguagem de Marcação de Hipertexto

<area>
======

O *HTML `<area>` elemento* define uma região hot-spot em uma imagem, e, opcionalmente, associa-lo com um link de hipertexto (en-US). Este elemento é usado somente dentro de um `<map>` elemento.

* *As categorias de conteúdo (en-US)* de conteúdo de fluxo (en-US) , conteúdo fraseado (en-US) .
* *Permitida conteúdo* vazio; este é um elemento vazio.
* *Tag omissão* None, both the starting and ending tag are mandatory.
* *Permitida elementos pai* Qualquer elemento que aceita conteúdo fraseado (en-US) . O `<area>` elemento deve ter um ancestral `<mapa>`, mas ele não precisa ser um pai direta.
* *Interface DOM* `HTMLAreaElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais (en-US).

`accesskey`

Especifica um acelerador de navegação pelo teclado para o elemento. Pressionando ALT ou uma chave semelhante, em associação com o caractere especificado seleciona a forma de controle correlacionada com a seqüência de teclas. Os projetistas de página são avisados para evitar sequências de teclas já vinculados aos navegadores. Este atributo é global desde HTML5.

`alt`

Uma alternativa seqüência de texto para exibir em navegadores que não exibem imagens. O texto deve ser formulada de modo a que apresenta o usuário com o mesmo tipo de escolha como a imagem iria oferecer quando exibido sem o texto alternativo. Em HTML4, este atributo é necessário, mas pode ser uma string vazia (""). Em HTML5, este atributo é necessário apenas se o **href** atributo é usado.

`coords`

Um conjunto de valores que especificam as coordenadas da região de hot-spot. O número e o significado dos valores dependem do valor especificado para a **forma** de atributo. Para um `rect` forma ou retângulo, o **coords** valor é de dois pares x, y: left, top, right, e bottom. Para um `círculo` forma, o valor é `x, y, r` onde `x, y` é um par especificando o centro do círculo e `r` é um valor para o raio. Para um `poli` ou polígono <forma>, o valor é um conjunto de pares x, y de cada ponto no polígono: `X1, Y1, X2, Y2, x3, y3`, e assim por diante. Em HTML4, os valores são números de pixels ou porcentagens, se um sinal de porcentagem (%) é anexado; em HTML5, os valores são números de pixels CSS.

`download`

Este atributo, se presente, indica que o autor tem a intenção que o hiperlink seja usado para o download de um recurso. Consulte `<a>` para uma descrição completa da `download` atributo.

`href`

A meta de hyperlink para a área. Seu valor é uma URL válida. Em HTML4, quer este atributo ou o **nohref** atributo deve estar presente no elemento. Em HTML5, este atributo pode ser omitido; em caso afirmativo, o elemento de área não representa um hiperlink.

`hreflang`

Indica o idioma do recurso ligado. Os valores permitidos são determinados por BCP47 . Utilize este atributo somente se a **href** atributo está presente.

`name`

Defina um nome para a área clicável de modo que possa ser programado por navegadores mais antigos.

`media`

Uma dica da mídia para o qual o recurso ligado foi projetado, por exemplo `impressão e tela` . Se omitido, o padrão é `tudo` . Utilize este atributo somente se a **href** atributo está presente.

`nohref`

Indica que não existe hyperlink para a área associada. Ou este atributo ou a **href** atributo deve estar presente no elemento.

>
> **Note:** **Nota de Uso:** Este atributo é obsoleto em HTML5, em vez omitindo o atributo **href** é suficiente.
>
>
>

`rel`

Para âncoras contendo o **href** atributo, este atributo especifica a relação do objeto de destino para o objeto link. O valor é uma lista de valores de relacionamento, separados por vírgulas. Os valores e sua semântica será registrado por alguma autoridade que poderia ter significado para o autor do documento. A relação padrão, se nenhum outro é dado, é nula. Utilize este atributo somente se a **href** atributo está presente.

`shape`

A forma do ponto de acesso associado. As especificações para colar 5 e HTML 4 definem os valores `rect` , que define uma região rectangular; `círculo` , o qual define uma região circular; `poli` , que define um polígono; e `padrão` , o que indica toda a região além de quaisquer formas definidas. Muitos navegadores, principalmente o Internet Explorer 4 e superior, apoio `circ` , `polígono` , e `retângulo` como valores válidos para **forma** ; estes valores são
Non-standard
.

`tabindex`

Um valor numérico que especifica a posição da área definida na ordem de tabulação browser. Este atributo é global em HTML5.

`target`

Este atributo especifica onde exibir o recurso ligado. Em HTML4, este é o nome de, ou uma palavra-chave para um quadro. Em HTML5, que é um nome ou palavra-chave para um *contexto de navegação* (por exemplo, aba, janela ou quadro embutido). As seguintes palavras-chave têm significados especiais:

* `_self` : Carregar a resposta no mesmo quadro HTML4 (ou contexto de navegação HTML5), como o atual. Este valor é o padrão se o atributo não é especificado.
* `_blank` : Coloque a resposta em uma nova janela sem nome HTML4 ou contexto de navegação HTML5.
* `_parent` : Carregar a resposta para o pai HMTL4 conjunto de quadros do quadro atual ou HTML5 pai contexto de navegação do atual. Se não houver nenhum pai, esta opção se comporta da mesma maneira que `_self` .
* `_top` : Em HTML4: Carregar a resposta para a janela completa, originais, cancelando todos os outros quadros. Em HTML5: Carregar a resposta para o contexto de navegação de nível superior (ou seja, o contexto de navegação que é um ancestral do atual, e não tem pai). Se não houver nenhum pai, esta opção se comporta da mesma maneira que `_self` .

Utilize este atributo somente se a **href** atributo está presente.

`type`

Este atributo especifica o tipo de mídia na forma de um tipo MIME para o destino do link. Geralmente, este é fornecido informações estritamente como consultivo; no entanto, no futuro, um navegador pode adicionar um pequeno ícone para os tipos de multimédia. Por exemplo, um navegador pode adicionar um pequeno ícone de alto-falante quando o tipo está definido para áudio / wav. Para obter uma lista completa de tipos MIME reconhecidos, consulte https://www.w3.org/TR/html4/references.html # REF-MIMETYPES . Utilize este atributo somente se a **href** atributo está presente.

Exemplo
-------

```html
<mapa name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" nohref />
</map>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-area-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Notas
-----

De acordo com o HTML 3.2, 4.0 e 5 especificações, a tag de fechamento `</ área>` é proibido.

A especificação XHTML 1.0 requer uma barra: `<area />` .

Os **ID** , **classe** e **estilo** atributos têm o mesmo significado que os atributos essenciais definidas na especificação HTML 4, mas somente Netscape e Microsoft defini-los.

Netscape 1 de nível não entendem o **alvo** atributo que se refere aos quadros.

HTML 3.2 define apenas **alt** , **coords** , **href** , **nohref** e shape .


<select> - HTML: Linguagem de Marcação de Hipertexto

<select>
========

Sumário
-------

O elemento HTML *select* (<select>) representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento `<option>`, que podem ser agrupados por elementos ``<optgroup>``. As opções podem ser pré-selecionadas para o usuário.

Contexto de uso
---------------

| Categorias de conteúdo | conteúdo fluido, conteúdo fraseado, conteúdo interativo, listado, rotulável, resetável, e enviável associado a formulários |
| --- | --- |
| Conteúdo permitido | Zero ou mais elementos `<option>` ou `<optgroup>`. |
| Omissão de tag | Nenhuma, tanto tag de início quanto de fim são obrigatórias |
| Elementos pai permitidos | qualquer elemento que aceite conteúdo fraseado |

Atributos
---------

Este elemento inclui os atributos globais.

`autofocus`

Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o atributo `autofocus`, que é booleano.

`disabled`

Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a configuração do elemento que o contém, por exemplo o elemento `fieldset`; se não há nenhum elemento que o contém com o atributo `disabled`, então o controle está habilitado.

`form`

O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e não apenas como descendentes de elementos form.

`multiple`

Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser selecionada de cada vez.

`name`

O nome do controle

`required`

Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada.

`size`

Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0.

>
> **Note:** **Nota sobre o Firefox:** De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites, e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox.
>
>
>

Interface DOM
-------------

Este elemento implementa a interface `HTMLSelectElement` (en-US).

Exemplos
--------

```html
<!-- O segundo valor estará selecionado inicialmente -->
<select name="select">
  <option value="valor1">Valor 1</option>
  <option value="valor2" selected>Valor 2</option>
  <option value="valor3">Valor 3</option>
</select>
```

### Notas

O conteúdo deste elemento é estático e não editável (en-US).

A seguir um exemplo de como simular uma lista de seleção com opções editáveis, **mas esteja ciente** de que leitores de tela e dispositivos de acessibilidade *não* interpretarão o formulário corretamente; este exemplo seria HTML inválido se os elementos corretos fossem usados:

Este é um exemplo de um select editável usando um `<fieldset>` de botões de opção e caixas de texto (**escrito somente com CSS**, sem JavaScript),

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-select-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elementos relacionados a formulários: `<form>` (en-US), `<legend>`, `<label>`, `<button>`, `<option>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` e `<meter>`.


progress - HTML: Linguagem de Marcação de Hipertexto

progress
========

o elemento HTML progress (<progress>) é usado para visualizar o progresso de uma tarefa. Embora as especifidades de como é mostrado ficam a cargo do desenvolvedor, tipicamente, é mostrado como uma barra de progresso.

Contexto de uso
---------------

| Conteúdo permitido | Conteúdo de texto |
| --- | --- |
| Omissão de Tag | Nenhum, ambas as tags (abertura e encerramento) são obrigatórias |
| Elemento pai permitido | Conteúdo fraseado (phrasing content), mas não deve haver descendentes do elemento progress |
| Documento normativo | HTML5, seção 4.10.16 |

Atributos
---------

Como todos os outros elementos HTML, este elemento tem os atributos globais (global attributes)

`max`

Este atributo descreve quanto trabalho é demandado pela tarefa indicada pelo elemento progress.

`value`

Este atributo especifica quanto da tarefa foi concluído. Se este não existir, a barra de progresso é indeterminada; isso indica que uma atividade está em progresso sem previsão de quanto tempo é esperado para que seja concluída.

Você pode usar a propriedade `orient` (en-US) para especificar se a barra de progresso deve ser renderizada horizontalmente (padrão) ou verticalmente. A pseudo-classe `:indeterminate` (en-US) pode ser associada a barras de progresso indeterminadas.

Interface DOM
-------------

Este elemento implementa a interface HTMLProgressElement.

Exemplos
--------

```html
<progress value="70" max="100">70 %</progress>
```

### Resultado

View Live Examples

No Mac OS X, o progresso resultante deve aparecer assim:

![progress-1.png](/pt-BR/docs/Web/HTML/Element/progress/progress-1.png)

No Windows, o progresso resultante deve aparecer assim:

![progress-firefox.JPG](/pt-BR/docs/Web/HTML/Element/progress/progress-firefox.jpg)

### Exemplos adicionais

Veja `orient` (en-US).

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `orient` (en-US)
* `:indeterminate` (en-US)


<noscript> - HTML: Linguagem de Marcação de Hipertexto

<noscript>
==========

Resumo
------

O **Elemento HTML `<noscript>`** define uma seção de html a ser inserida se um tipo de script não é suportado pela página ou se o script está desativado no navegador.

* *Categorias de conteúdo (en-US)* Metadata content (en-US), flow content (en-US), phrasing content (en-US).
* *Conteúdo permitido* Quando scripting está desabilitado e quando este é um descendente do elemento `<head>` : em qualquer ordem, de zero ou mais elementos `<link>`, zero ou mais elementos `<style>`, e zero ou mais elementos `<meta>`.
 Quando o script está desativado e quando não é descendente do elemento `<head>` : qualquer conteúdo transparente, mas nenhum elemento `<noscript>` entre seus descendentes.
 Nos outros casos: conteúdo de fluxo ou conteúdo de texto.
* *Omissão da tag* Tags inicial e final obrigatórias.
* *Elemento pai permitidos* Qualquer elemento que aceite 'conteúdo de texto (en-US)' (phrasing content (en-US)), se não há um elemento `<noscript>` anterior ou em um elemento `<head>` (mas somente em um documento HTML), e também se não existe elemento `<noscript>` anterior.
* *Interface DOM* `HTMLElement` (en-US)
Atributos
---------

Este elemento só inclui os atributos globais (en-US).

Exemplo
-------

```html
<noscript>
  <!-- referência a arquivo externo -->
  <a href="http://www.mozilla.com/">Link Externo</a>
</noscript>
<p>Rocks!</p>
```

### Resultado com o script ativado

Rocks!

### Resultado com o script desativado

Link Externo

Rocks!

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-noscript-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<button> - HTML: Linguagem de Marcação de Hipertexto

<button>
========

Sumário
-------

O **Elemento HTML *`<button>`*** representa um botão clicável.

* *Categorias de conteúdo (en-US)* Conteúdo de fluxo (en-US), conteúdo fraseado (en-US), Conteúdo iterativo (en-US), listado (en-US), rotulável (en-US), e elemento enviável (en-US) associado a formulário (en-US), conteúdo palpável.
* *Conteúdo permitido* Conteúdo fraseado (en-US).
* *Omissão de Tag* Nenhuma, as tags de abertura e fechamento são obrigatórias.
* *Elementos pai permitidos* Qualquer elemento que aceite conteúdo fraseado (en-US).
* *Interface DOM* `HTMLButtonElement` (en-US)
* *Tipo de elemento* Inline
*
Atributos
---------

Esse elemento inclui os atributos globais (en-US).

`autofocus`

Esse atributo booleano permite-o especificar que o botão possuirá o foco de entrada assim que a página carrega, a menos que o usuário sobrecreva esse comportamento digitanto um controle diferente. Apenas um elemento de um documento associado a um formulário pode ter esse atributo específico.

`autocomplete`
Non-standard

O uso desse atributo em um `<button>` não está padronizado nem dentro das especificações do Firefox. Por padrão, diferente de outros navegadores, o Firefox persiste com o estado dinâmico desativado de um `<button>` nas páginas carregadas. Definir o valor desse atributo para `off` (ex: `autocomplete="off"`) desabilita esse recurso. Veja Erro do Firefox 654072.

`disabled`

Esse atributo booleano indica que o usuário não poderá interagir com o botão. Se esse atributo não for especificado, o botão herdará a configuração do elemento que o contém, por exemplo `<fieldset>`, se não existir nenhum elemento com o atributo **disabled** definido, então o botão estará habilitado.

Firefox irá, diferente de outros navegadores, por padrão, persiste com o estado dinâmico desativado de um `<button>` sob as páginas carregadas. Use o atributo `autocomplete` para controlar esse recurso.

`form`

O elemento de formulário que o botão está associado (é o *formulário proprietário*). O valor do atributo deve ser o atributo **id** de um elemento `<form>` (en-US) no mesmo documento. Se esse atributo não for especificado, o elemento `<button>` deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos `<button>` em qualquer lugar do documento, não apenas como descendente de seus elementos `<form>` (en-US).

`formaction`

A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo `action` (en-US) do formulário proprietário do botão.

`formenctype`

Se o botão é um botão de envio, esse atributo especifica o tipo de conteúdo que é usado para enviar o formulário para o servidor; Possíveis valores são:

* `application/x-www-form-urlencoded`: O valor padrão se o atributo não está especificado.
* `multipart/form-data`: Use esse valor se você está usando um elemento `<input>` com o atributo `type` definido para o `arquivo`.
* `text/plain`

Se esse atributo fro especificado, ele sobrescreve o atributo `enctype` (en-US) do formulário proprietário do botão.

`formmethod`

Se o botão for um botão de envio, esse atributo especifica o método HTTP que o navegador usará para enviar o formulário. Possíveis valores são:

* `post`: Os dados obtidos do formulário são incluídos em seu corpo e enviados para o servidor.
* `get`: Os dados obtidos do formulário são anexados aos atributos URI do **formulário**, com uma '?' como separador, e o resultado URI é enviado para o servidor. Use esse método quando o formulário não possui efeitos colaterais e contém apenas caracteres ASCII.

Se especificado, esse atributo sobrescreve o atributo `method` (en-US) do formulário proprietário do botão.

`formnovalidate`

Se o botão é um botão de envio, esse atributo Booleano especifica que o formulário não é para ser validado quando submetido. Se esse atributo for especificado, ele sobrescreve o atributo `novalidate` (en-US) do formulário proprietário do botão.

`formtarget`

Se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Esse é um nome de, ou palavra-chave para, um *contexto de navegação* (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo `target` (en-US) do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais:

* `_self`: Carrega a resposta no mesmo contexto navegação como o atual. Esse valor é o padrão se o atributo não é especificado.
* `_blank`: Carrega a resposta em um contexto de navegação sem nome.
* `_parent`: Carrega a resposta no contexto de navegação pai do atual. Se não há nenhum pai, essa opção passa a ser o mesmo que `_self`.
* `_top`: Carrega a resposta para o contexto de navegação no nível superior (ou seja, o contexto de navegação é um ancestral do atual e não possui nenhum pai). Se não possui nenhum pai, essa opção passa a agir da mesma forma que `_self`.

`name`

O nome do botão que é enviado com os dados do formulário.

`type`

O tipo de botão. O possíveis valores são:

* `submit`: O botão envia os dados do formulário para o servidor. Esse é o padrão se o atributo não for especifidado, ou se o atributo é dinamicamente mudado para um valor vazio ou inválido.
* `reset`: O botão restaura todos os controles para seus valores iniciais.
* `button`: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.

`value`

O valor inicial do botão.

Notas
-----

É muito mais fácil estilizar elementos `<button>` do que elementos `<input>`. Você pode adicionar conteúdo HTML (como `<em>`, `<strong>`, ou até `<img>`), e usar pseudo-elementos `::after` e `::before` para executar composições complexas, enquanto `<input>` aceita apenas um atributo `value` do tipo texto.

Exemplo
-------

```html
<button name="button">Click me</button>
```

Note que esse botão possui CSS aplicado.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-button-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Notas
-----

Elementos `<button>` são muito mais fáceis estilizá-los do que elementos `<input>`. Você pode adicionar dentro do conteúdo do HTML (imagine em `<em>`, `<strong>` ou mesmo `<img>`), e fazer uso do pseudo-elemento `:after` e `:before` para realizar renderizações complexas enquanto `<input>` apenas aceita um atributo com valor textual.

 IE7 possui um bug ao enviar um formulário com `<button type="submit" name="myButton" value="foo">Click me</button>`, os dados POST enviados terá como resultado em `myButton=Click me` em vez de `myButton=foo`.
 IE6 possui um bug ainda pior quando enviado um formulário através de um botão por enviar TODOS os botões do formulário com o mesmo bug do IE7.
 Esse bug foi corrigido no IE8.

Firefox adicionará, com propósitos de acessibilidade, uma pequena borda pontinhada e um botão focado. Essa borda será declarada por meio de CSS, no estilo do navegador, mas você pode sobrescreve-lo se necessário para adicionar seu próprio estilo de foco usando `button`::-moz-focus-inner` (en-US) { }`

Firefox irá, diferente de outros navegadores, por padrão, persistir o estado dinâmico desativado de um `<button>` sob o carregamento das páginas. Definindo o valor do atributo `autocomplete` para `off` desabilita esse recurso. See Erro do Firefox 654072.

Firefox <35 para Android define um padrão `background-image` (en-US) gradiente em todos os botões (see Erro do Firefox 763671). Isso pode ser desabilitado usando `background-image: none`.

Veja também
-----------

Outros elementos que são usados para criar formulários: `<form>` (en-US), `<datalist>`, `<fieldset>`, `<input>`, `<label>`, `<legend>`, `<meter>`, `<optgroup>`, `<option>`, `<output>`, `<progress>`, `<select>`, `<textarea>`.


<template> - HTML: Linguagem de Marcação de Hipertexto

<template>
==========

Sumário
-------

O elemento **HTML `<template>`** é um mecanismo para encapsular um conteúdo do lado do cliente que não é renderizado quando a página é carregada, mas que pode ser instanciado posteriormente em tempo de execução usando JavaScript.

Pense no template como um fragmento de conteúdo, que é armazenado para um possível uso futuro no documento. Enquanto o parser processa o conteúdo do elemento **`<template>`** ao carregar a página, isso apenas garante que o conteúdo é válido; porém, o conteúdo do elemento ainda não foi renderizado.

|  |  |
| --- | --- |
| Conteúdo de categorias | Metadata content,
 flow content,
 phrasing content, script-supporting element
  |
| Conteúdo Permitido | Metadata content,
 flow content, qualquer conteúdo HTML válido que é permitido para ocorrer dentro do
 `<ol>`, `<dl>`,
 `<figure>`, `<ruby>`,
 `<object>` (en-US), `<video>`,
 `<audio>`, `<table>`,
 `<colgroup>` (en-US), `<thead>` (en-US),
 `<tbody>` (en-US), `<tfoot>`,
 `<tr>` (en-US), `<fieldset>`,
 `<select>`, `<details>`
 elemento e `<menu>` (en-US) cujo tipo de atributo está
 em estado de menu de contexto.
  |
| Tags omitidas | None, both the starting and ending tag are mandatory. |
| Elementos pais permitidos | `<body>`, `<frameset>` (en-US),
 `<head>` and
 `<colgroup>` (en-US) sem um atributo `span` |
| Interface do DOM | `HTMLTemplateElement` (en-US) |

Atributos
---------

Esse elemento inclui os atributos globais.

Há também um atributo *content,* o qual é *read-only* e provê acesso ao conteúdo do template. A existência desse atributo *content* é frequentemente usada como um modo de determinar se o navegador do usuário suporta o element **`<template>`**.

Exemplo
-------

Primeiro, nós começamos com um pedaço de HTML como exemplo:

```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```

No início, nós temos uma tabela que irá receber conteúdo inserido via Javascript. Em seguida, vem o *template*, que descreve a estrutura de um fragmento de HTML que representa uma única linha da tabela.

Agora que a tabela foi criada e o *template* definido, nós usamos JavaScript para inserir linhas na tabela, cada linha é construída usando o *template* como base.

```js
// Teste se seu navegador suporta o template HTML checando
// a presença do atribute content no elemento template .
if ("content" in document.createElement("template")) {
  // Instancie a tabela com o HTML tbody e a row com o template
  var t = document.querySelector("#productrow"),
    td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone a nova row e insira-a na tabela
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // Crie uma nova row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone a nova row e insira-a na tabela
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);
} else {
  // Ache outro modo de adicionar as rows na tabela, pois
  // o elemento HTML template não é suportado.
}
```

O resultado é a tabela original do HTML, com duas novas linhas inseridas via Javascript:
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-template-element |

Compatibilidade de Navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Web components: `<content>` (en-US), `<shadow>`


<pre> - HTML: Linguagem de Marcação de Hipertexto

<pre>
=====

Resumo
------

*HTML texto preformatado* (**<pre>**) é a tag utilizada para representar texto pré-formatado. Um texto dentro desse elemento é tipicamente exibido em uma fonte não proporcional da mesma maneira em que o texto original foi disposto no arquivo. Espaços em branco são mantidos no texto da mesma forma em que este foi digitado.

*Content categories (en-US)* Flow content (en-US), palpable content.

* *Conteúdo permitido* Phrasing content (en-US).
* *Tag omission* None, both the starting and ending tag are mandatory.
* *Elementos pai permitidos* Any element that accepts flow content (en-US).
* *interface DOM* `HTMLPreElement` (en-US)
Atributos
---------

Esse elemento apenas inclui atributos globais.

This element only includes the global attributes (en-US).

`cols`
Non-standard

Contains the *preferred* count of characters that a line should have. It was a non-standard synonym of `width`. To achieve such an effect, use CSS styling instead.

`width`

Contains the *preferred* count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.

`wrap`
Non-standard

Is a *hint* indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.

Exemplos
--------

```html
<!-- Um exemplo de código css -->
<pre>
body {
  color:red;
}
</pre>
```

### Resultado
```

body {
  color:red;
}
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-pre-element |

Compatibilidade de navegador
----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja mais
---------

* CSS: `white-space`, `word-break`


<nobr> - HTML: Linguagem de Marcação de Hipertexto

<nobr>
======

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Sumário
-------

`O elemento HTML <nobr>` previne que um texto quebre em uma nova linha automaticamente, de forma que ele seja exibido em uma única grande linha, podendo tornar o *scroll* (horizontal) necessário. Esta tag não é padrão HTML e não deve ser usada. Como alternativa, use a propriedade CSS `white-space` como segue:

```css
<span style="white-space: nowrap">Texto longo sem quebras de linha</span>
```

Ver também
----------

* `white-space`
* `overflow`


<figcaption>: O elemento de legenda da figura - HTML: Linguagem de Marcação de Hipertexto

<figcaption>: O elemento de legenda da figura
=============================================

O **Elemento HTML Figcaption** (`<figcaption>`) representa uma legenda ou uma legenda associada com uma figura ou ilustração descrita pelo resto dos dados do elemento `<figure>` que seu elemento pai.Experimente
-----------

|  |  |
| --- | --- |
| Categorias de conteúdo (en-US) | Nenhuma. |
| Conteúdo permitido | Flow content (en-US). |
| Omissão de Tag | Nenhuma, tanto a tag de início quanto a de fim são obrigatórias. |
| Elemento Pai Permitido | Um Elemento `<figure>` |
| Interface DOM | `HTMLElement` (en-US) |

Atributos
---------

Esse elemento possui somente os atributos globais (en-US).

Exemplos
--------

Por favor, consulte a página `<figure>` para visualizar o exemplos do elemento `<figcaption>`.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-figcaption-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O elemento `<figure>`.


<i> - HTML: Linguagem de Marcação de Hipertexto

<i>
===

O \*\*elemento HTML `<i>` \*\*representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo "itálico".

|  |  |
| --- | --- |
| Categorias de conteúdo | Conteúdo de fluxo (flow content),
 conteúdo com texto (phrasing content), conteúdo palpável (palpable content).
  |
| Conteúdo permitido | Conteúdo com texto (phrasing content). |
| Omissão de tag | None, both the starting and ending tag are mandatory. |
| Pais permitidos |
 Qualquer elemento que aceite
 conteúdo com texto (phrasing content).
  |
| ARIA roles permitidos | Qualquer um. |
| Interface DOM | `HTMLElement` (en-US) Up to Gecko 1.9.2 (Firefox 4)
 inclusive, Firefox implements the
 `HTMLSpanElement` interface for this element.
  |

Atributos
---------

Esse elemento inclui apenas atributos globais.

Exemplo
-------

```html
<p>
  A expressão em latim <i class="latin">Veni, vidi, vici</i> é frequentemente
  mencionada na música, na arte e na literatura.
</p>
```

### Resultado

A expressão em latim *Veni, vidi, vici* é frequentemente mencionada na música, na arte e na literatura.

Notas
-----

Nas primeiras versões das especificações HTML, a tag `<i>` era usada apenas para apresentar textos em itálico, assim como a tag `<b>` tag era usada para mostrar textos em negrito. Isso não é mais verdade, já que, atualmente, essas tags definem a semântica, e não mais aparência tipográfica. A tag `<i>` pode representar uma parte do texto com uma diferença semântica, na qual a representação tipográfica padrão é no tipo itálico. Isso significa que os navegadores continuarão a apresentar o conteúdo em itálico, mas, de acordo com o que é definido, isso não é mais requerido.

Use esse elemento somente quando não existir mais nenhum outro elemento com semântica apropriada. Por exemplo:

* Use `<em>` para indicar ênfase ou estresse.
* Use `<strong>` para indicar importância.
* Use `<mark>` para indicar relevância.
* Use `<cite>` para citar o nome de um trabalho, tal como um livro, jogo ou música.
* Use `<dfn>` para marcar a instância de definição de um termo .

Uma boa ideia é usar o atributo **class** para identificar porque esse elemento está sendo usado. Com isso, caso a apresentação precise ser alterada com o tempo, isso pode ser feito de forma seletiva utilizando as folhas de estilo.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-i-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* `<em>`


<bdo> - HTML: Linguagem de Marcação de Hipertexto

<bdo>
=====

O \*\**elemento* HTML `<bdo>` \*\*(*bidirectional override*) é usado para substituir a direcionalidade atual do texto. Isso faz com que a direcionalidade dos personagens seja ignorada em favor da direcionalidade especificada.

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US),
 phrasing content (en-US), palpable content.
  |
| Permitted content | Phrasing content (en-US). |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content (en-US).
  |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` (en-US) Up to Gecko 1.9.2 (Firefox 4)
 inclusive, Firefox implements the
 `HTMLSpanElement`
 interface for this element.
  |

Atributos
---------

Os atributos desse elemento incluem os atributos globais (en-US).

`dir`

Direção de texto neste elemento. Os valores possíveis são:

* `ltr`: Indica que o texto ficará da **Esquerda para a Direita** (**L**eft-**T**o-**R**ight).
* `rtl`: Indica que o texto ficará da **Direita** **para a Esquerda** (**R**eft-**T**o-**L**ight).

Exemplos
--------

```html
<!-- Muda a direção do texto -->
<p>Este texto ficará da esquerda para a direita.</p>
<p><bdo dir="rtl">Este texto ficará da direita para a esquerda.</bdo></p>
```

### Resultado

Notas
-----

A especificação HTML 4 não especificam eventos para este elemento; eles foram adicionados no XHTML. Este é provavelmente um descuido.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-bdo-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<li> - HTML: Linguagem de Marcação de Hipertexto

<li>
====

Resumo
------

O ***elemento*** ***HTML* `<li>`** (ou a Lista dos Itens de um elemento HTML) é 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>` (en-US)) e representa uma única entidade dessa lista. Em menus e listas desordenadas a relação de itens é exibida, normalmente, usando pontos de marcação (as bolinhas). Em listas ordenadas eles são, comumente, mostrados com algum contador ascendente - como um número, ou letra - à sua esquerda.

* *Categorias de conteúdo* Nenhuma.
* *Conteúdo permitido* Flutuantes.
* *Omissão de etiquetas (tags)* A etiqueta de fim pode ser omitida se esta for imediatamente seguida por um outro elemento `<li>`, ou se não houver mais conteúdo no seu elemento pai.
* *Elementos pai permitidos* Um elemento `<ul>`, `<ol>`, ou `<menu>` (en-US). Embora seja um uso incomum, o obsoleto `<dir>` pode ser pai, também.
* *Interface DOM* `HTMLLIElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais.

`value`

Este atributo de número inteiro indica o valor ordinal atual do item na lista, definido pelo elemento `<ol>`. O único valor possível para este atributo é um número, ainda que a lista seja exibida com algarismos romanos, ou letras. A lista de itens que virá em seguida continuará a ser numerada a partir desta posição. O atributo **value** não tem significado para listas desordenadas (`<ul>`), nem para menus (`<menu>` (en-US)).

**Nota:** Este atributo, abandonado na HTML4, foi reintroduzido na HTML5.

**Nota:** Antes de Gecko 9.0, os valores negativos eram, incorretamente, convertidos a 0. A partir de Gecko 9.0 todos os valores inteiros são analisados corretamente.

`type`
Deprecated

A característica deste atributo é indicar o tipo de numeração:

* `a`: letras minúsculas
* `A`: letras maiúsculas
* `i`: algarismos romanos minúsculos
* `I`: algarismos romanos maiúsculos
* `1`: números

Este tipo substitui o utilizado pelo seu elemento pai `<ol>`, qualquer que seja.

>
> **Note:** **Nota de utilização:** Este atributo foi preterido. Em seu lugar use a propriedade CSS `list-style-type` (en-US).
>
>
>

Exemplos
--------

```html
<ol>
  <li>primeiro item</li>
  <li>segundo item</li>
  <li>terceiro item</li>
</ol>
```

A saída HTML acima será:

1. primeiro item
2. segundo item
3. terceiro item

```html
<ul>
  <li>primeiro item</li>
  <li>segundo item</li>
  <li>terceiro item</li>
</ul>
```

* primeiro item
* segundo item
* terceiro item

Para exemplos mais detalhados veja as páginas <ol> e <ul>.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-li-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elementos HTML parentes: `<ul>`, `<li>`, `<menu>` (en-US) e o obsoleto `<dir>`;
* Propriedades CSS que podem ser úteis, especialmente para dar um charme ao elemento`<li>`:
    + a propriedade `list-style` (en-US), para escolher a maneira como os posicionamentos serão exibidos,
    + contadores CSS (en-US) para controlar listas aninhadas complexas,
    + a propriedade `margin`, para controlar a indentação dos itens da lista.


<big>: Elemento para deixar o texto maio - HTML: Linguagem de Marcação de Hipertexto

<big>: Elemento para deixar o texto maio
========================================

The obsolete **HTML Big Element** (**`<big>`**) renders the enclosed text at a font size one level larger than the surrounding text (`medium` becomes `large`, for example). The size is capped at the browser's maximum permitted font size.

>
> **Note:** **Usage note:** As it was purely presentational, this element has been removed in HTML5 (en-US) and shouldn't be used anymore. Instead web developers should use the CSS `font-size` property to adjust the font size.
>
>
>

Atributos
---------

This element has no other attributes than the global attributes (en-US), common to all elements.

Examples
--------

Here we see examples showing the use of `<big>` followed by an example showing how to accomplish the same results using modern CSS syntax instead.

### Usando `<big>`

Este elemento usa o comando `<big>` para aumentar o tamanho do texto. O elemento é obsoleto, porém aceitável em todos os navegadores.

#### HTML

```html
<p>
  Este é o primeiro texto.
  <big>Este texto usa big para ficar com a aparência maior.</big>
</p>
```

#### Resultado

### Using CSS `font-size`

This example uses the CSS `font-size` property to increase the font size by one level.

#### CSS

```css
.bigger {
  font-size: larger;
}
```

#### HTML

```html
<p>
  This is the first sentence.
  <span class="bigger">This whole sentence is in bigger letters.</span>
</p>
```

#### Result

DOM interface
-------------

This element implements the `HTMLElement` (en-US) interface.

>
> **Note:** **Implementation note:** Up to Gecko 1.9.2 inclusive, Firefox implements the `HTMLSpanElement` interface for this element.
>
>
>

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS: `font-size`, `font` (en-US)
* HTML: `<small>` (en-US), `<font>` (en-US), `<style>`
* HTML 4.01 Specification: Font Styles


<legend> - HTML: Linguagem de Marcação de Hipertexto

<legend>
========

Resumo
------

O \*\*Elemento HTML <legend> \*\*(ou *Elemento* *HTML Campo "Legend"*) representa um rótulo para o conteúdo do seu ancestral `<fieldset>`.

* *Categorias de Conteúdo (en-US)* Nenhuma.
* *Conteúdo permitido* Conteúdo Textual (en-US).
* *Omissão de Tag* None, both the starting and ending tag are mandatory.
* *Elementos ancestrais permitidos* Um `<fieldset>` cujo primeiro filho seja esse elemento <legend>
* *Interface DOM* `HTMLLegendElement` (en-US)
Atributos
---------

Esse elemento apenas inclui os atributos globais (en-US).

Exemplos
--------

Veja `<form>` (en-US) para exemplos sobre `<legend>`.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-legend-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* Outros elementos relacionados a formulários: `<form>` (en-US), `<option>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` and `<meter>`.


<center>: O elemento de texto centralizado (obsoleto) - HTML: Linguagem de Marcação de Hipertexto

<center>: O elemento de texto centralizado (obsoleto)
=====================================================

O elemento **Center do HTML** (**`<center>`**) se tornou obsoleto, é um elemento de nível de bloco que exibe o conteúdo em nível de bloco ou em linha centralizado horizontalmente dentro do elemento que o contém. O contêiner `<body>` geralmente está presente, mas não é necessário. Essa tag foi descontinuada no HTML 4 (e XHTML 1) em favor da propriedade CSS `text-align`, que pode ser aplicada ao elemento `<div>` ou à um paragráfo indivídual `<p>`. Para blocos de centralização, use outras propriedades CSS como `margin-left` (en-US) e `margin-right` (en-US) e defina-as como `auto` (ou defina `margin` para `0 auto`).

Interface DOM
-------------

Este elemento implementa a interface `HTMLElement` (en-US).

>
> **Note:** **Nota de implementação:** até o Gecko 1.9.2 inclusive, o Firefox implementa a interface `HTMLSpanElement` para este elemento.
>
>
>

Exemplo 1
---------

```html
<center>
  Esse texto vai ficar centralizado.
  <p>Este parágrafo também.</p>
</center>
```

O efeito da centralização vai acontecer até onde o elemento `center` for fechado.

Exemplo 2 (Alternativa CSS)
---------------------------

```html
<div style="text-align:center">
  Esse texto vai ficar centralizado.
  <p>Este parágrafo também.</p>
</div>
```

Isso acontece por os textos que sofreram as alterações estão dentro dos elementos que foi aplicado a propriedade.

Exemplo 3 (Alternativa CSS)
---------------------------

```html
<p style="text-align:center">
  Essa linha vai ficar centralizada.<br />
  E esta linha também.
</p>
```

Nota
----

Aplicar `text-align``:center` a um elemento `<div>` ou `<p>` centraliza o *conteúdo* desses elementos, deixando suas dimensões gerais inalteradas.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Apesar de obsoleto, o elemento é aceito em todos os navegadores do mercado.

Veja também
-----------

* `text-align`
* `display`


<fieldset> - HTML: Linguagem de Marcação de Hipertexto

<fieldset>
==========

O **elemento HTML `<fieldset>`** é usado para agrupar elementos, assim como labels (`<label>`), dentro de um formulário web.

|  |  |
| --- | --- |
| Categorias de Conteúdo (en-US) | Conteúdo de fluxo (en-US),
 sectioning root, listed (en-US),
 form-associated (en-US)
 element, palpable content.
  |
| Conteúdo permitido |
 Um elemento `<legend>` opcional, seguido por
 conteúdo de fluxo.
  |
| Omissão deTag | None, both the starting and ending tag are mandatory. |
| Elementos pai permitidos |
 Qualquer elemento que aceita
 conteúdo de fluxo (en-US).
  |
| Interface DOM | `HTMLFieldSetElement` (en-US) |

>
> **Note:** diferente de quase todo outro elemento, a especificação do WHATWG HTML Rendering sugere ``min-width` (en-US): min-content` como parte do padrão de estilo para `<fieldset>`, e muitos navegadores implementam tal estilização (ou algo que se aproxima disto).
>
>
>

Atributos
---------

Este elemento inclui os atributos globais (en-US).

`disabled`

Se este atributo Booleano está definido, os controles de formulario que são seus descendentes, exceto os descendentes de seu primeiro elemento opcional `<legend>`, estarão desativados, i.e., não editável. Eles não receberão qualquer evento de navegação, como clique do mouse ou relacionado com focus. Frequentemente os navegadores mostram tais controles em cinza.

`form`

Este atributo tem o valor do atributo **id** do elemento `<form>` (en-US) com que se relaciona. Seu valor padrão é o **id** do elemento `<form>` (en-US) mais próximo.

`name`

O nome associado com o grupo.

>
> **Note:** O label para o fieldset é dado pelo primeiro elemento `<legend>` que é um filho do fieldset.
>
>
>

Exemplos
--------

### Example #1: Formulário com fieldset, legend, e label

```html
<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio" /> <label for="radio">Click me</label>
  </fieldset>
</form>
```

### Example #2: Simulando um editável `<select>` através de um `fieldset` de radioboxes e textboxes\*

O exemplo a seguinte é feito de puro HTML e CSS. Não contém javascript.

**Esteja avisado** que leitores de tela (utilizados por cegos) e dispositivos de assistência não interpretarão o seguinte formulário corretamente; este exemplo seria um html invalido se os corretos elementos fossem usados.

```html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Editable [pseudo]select</title>
    <style type="text/css">
 /\* Generic form fields \*/

 fieldset.elist,
 input[type="text"],
 textarea,
 select,
 option,
 fieldset.elist ul,
 fieldset.elist > legend,
 fieldset.elist input[type="text"],
 fieldset.elist > legend:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }

 input[type="text"] {
 padding: 0 20px;
 }

 textarea {
 width: 500px;
 height: 200px;
 padding: 20px;
 }

 textarea,
 input[type="text"],
 fieldset.elist ul,
 select,
 fieldset.elist > legend {
 border: 2px #cccccc solid;
 border-radius: 10px;
 }

 input[type="text"],
 fieldset.elist,
 select,
 fieldset.elist > legend {
 height: 32px;
 font-family: Tahoma;
 font-size: 14px;
 }

 input[type="text"]:hover,
 textarea:hover,
 select:hover,
 fieldset.elist:hover > legend {
 background-color: #ddddff;
 }

 select {
 padding: 4px 20px;
 }

 option {
 height: 30px;
 padding: 5px 4px;
 }

 option:not(:checked),
 textarea:focus {
 background-color: #ffcccc;
 }

 fieldset.elist > legend:after,
 fieldset.elist label {
 height: 28px;
 }

 input[type="text"],
 fieldset.elist {
 width: 316px;
 }

 input[type="text"]:focus {
 background: #ffcccc
 url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7")
 no-repeat 2px center !important;
 }

 input[type="text"]:focus,
 textarea:focus,
 select:focus,
 fieldset.elist > legend {
 border: 2px #ccaaaa solid;
 }

 fieldset {
 border: 2px #af3333 solid;
 border-radius: 10px;
 }

 /\* Editable [pseudo]select (i.e. fieldsets with [class=elist]) \*/

 fieldset.elist {
 display: inline-block;
 position: relative;
 vertical-align: middle;
 overflow: visible;
 padding: 0;
 margin: 0;
 border: none;
 }

 fieldset.elist ul {
 position: absolute;
 width: 100%;
 max-height: 320px;
 padding: 0;
 margin: 0;
 overflow: hidden;
 background-color: transparent;
 }

 fieldset.elist:hover ul {
 background-color: #ffffff;
 border: 2px #af3333 solid;
 left: 2px;
 overflow: auto;
 }

 fieldset.elist ul > li {
 list-style-type: none;
 background-color: transparent;
 }

 fieldset.elist label {
 display: none;
 width: 100%;
 }

 fieldset.elist input[type="text"] {
 width: 100%;
 height: 30px;
 line-height: 30px;
 border: none;
 background-color: transparent;
 border-radius: 0;
 }

 fieldset.elist > legend {
 display: block;
 margin: 0;
 padding: 0 0 0 5px;
 position: absolute;
 width: 100%;
 cursor: default;
 background-color: #ccffcc;
 line-height: 30px;
 font-style: italic;
 }

 fieldset.elist:hover > legend {
 position: relative;
 overflow: hidden;
 }

 fieldset.elist > legend:after {
 width: 20px;
 content: "\2335";
 float: right;
 text-align: center;
 border-left: 2px #cccccc solid;
 font-style: normal;
 cursor: default;
 }

 fieldset.elist:hover > legend:after {
 background-color: #99ff99;
 }

 fieldset.elist ul input[type="radio"] {
 display: none;
 }

 fieldset.elist input[type="radio"]:checked ~ label {
 display: block;
 width: 292px;
 background-color: #ffffff;
 }

 fieldset.elist:hover input[type="radio"]:checked ~ label {
 width: 100%;
 }

 fieldset.elist:hover label {
 display: block;
 height: 100%;
 }

 fieldset.elist label:hover {
 background-color: #3333ff !important;
 }

 fieldset.elist:hover input[type="radio"]:checked ~ label {
 background-color: #aaaaaa;
 }
 </style>
  </head>
  <body>
    <form method="get" action="test.php">
      <fieldset>
        <legend>Order a T-Shirt</legend>
        <p>Write your name (simple textbox): <input type="text" /></p>
        <p>
          Choose your size (simple select):
          <select>
            <option value="s">Small</option>
            <option value="m">Medium</option>
            <option value="l">Large</option>
            <option value="xl">Extra Large</option>
          </select>
        </p>
        <div>
          What address do you want to use? (editable pseudoselect)
          <fieldset class="elist">
            <legend>Address…</legend>
            <ul>
              <li>
                <input
 type="radio"
 value="1"
 id="address-switch\_1"
 checked /><label for="address-switch\_1"
 ><input
 type="text"
 value="19 Quaker Ridge Rd. Bethel CT 06801"
 /></label>
              </li>
              <li>
                <input type="radio" value="2" id="address-switch\_2" /><label
 for="address-switch\_2"
 ><input
 type="text"
 value="1000 Coney Island Ave. Brooklyn NY 11230"
 /></label>
              </li>
              <li>
                <input type="radio" value="3" id="address-switch\_3" /><label
 for="address-switch\_3"
 ><input
 type="text"
 value="2962 Dunedin Cv. Germantown TN 38138"
 /></label>
              </li>
              <li>
                <input type="radio" value="4" id="address-switch\_4" /><label
 for="address-switch\_4"
 ><input
 type="text"
 value="915 E 7th St. Apt 6L. Brooklyn NY 11230"
 /></label>
              </li>
            </ul>
          </fieldset>
        </div>
        <p>
          Write a comment:<br />
          <textarea></textarea>
        </p>
        <p>
          <input type="reset" value="Reset" />
          <input type="submit" value="Send!" />
        </p>
      </fieldset>
    </form>
  </body>
</html>
```

Veja este exemplo em ação

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-fieldset-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Erros
-----

* Erro do Firefox 504622 - Fieldsets nunca diminui abaixo de sua largura min-intrinsic
* WebKit bug 123507 - `min-width: `-webkit-min-content`` sobre fieldset
* StackOverflow discussão com soluções alternativas para os bugs acima
Veja também
-----------

* Outros elementos de formlários relacionados: `<form>` (en-US), `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<option>`, `<textarea>`, `<input>`, `<output>`, `<progress>` e `<meter>`.
* Artigo de como usar o fieldset para ajudar na validação do seu formulário html


<address> - HTML: Linguagem de Marcação de Hipertexto

<address>
=========

Resumo
------

O **elemento HTML `<address>`** fornece informações de contato para seu ancestral `<article>` ou `<body>` mais próximo; no segundo caso, ele se aplica ao documento inteiro.

A informação de contato fornecida por um conteúdo do elemento `<address>` pode tomar qualquer forma que é apropriada para o contexto, e pode incluir qualquer tipo de informação de contato necessária, como endereço físico, URL, email, telefone, mídia social, coordenadas geográficas, por aí vai. Deve incluir o nome da pessoa, grupo, ou organização para qual as informações de contato se referem.

`<address>` pode ser usado em uma variedade de contextos, como fornecer informação de contato de uma empresa no header da página, ou indicar o autor de um artigo incluindo um elemento `<address>` dentro do `<article>`.

* *Categoria de conteúdo (en-US)* Conteúdo de fluxo (en-US), conteúdo palpável.
* *Conteúdo permitido*Conteúdo de fluxo (en-US), mas sem nenhum elemento <address> aninhado, e sem conteúdo de cabeçalho (`<hgroup>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US)), e nem conteúdo de seção como (`<article>`, `<aside>`, `<section>`, `<nav>`), e sem`<header>` ou o elemento `<footer>`.
* *Omissão de tag* None, both the starting and ending tag are mandatory.
* *Elementos-pai permitidos* Qualquer elemento que aceite conteúdo de fluxo (en-US), exceto os elementos <address> (de acordo com o princípio lógico da simetria, se a tag <address>, como pai, não pode ter elemento <address> como filho, então o mesmo conteúdo <address> não pode ter tag <address> como pai).
*
* *Regras ARIA permitidas* Nenhuma
* *Interface DOM* `HTMLElement` (en-US). Antes do Gecko 2.0 (Firefox 4), Gecko implementava este elemento usando a interface `HTMLSpanElement`
Atributos
---------

Este elemento inclui somente os atributos globais (en-US).

Notas de uso
------------

* Para representar um endereço arbitrário, um que não é relacionado à informação para contato, use um elemento `<p>` ao invés do elemento <address>.
* Este elemento não deve conter mais informação além da informação de contato, como uma data de publicação (a qual pertence ao elemento `<time>`).
* Tipicamente um elemento <address> pode ser posicionado dentro do elemento `<footer>` da seção atual, se houver um.
Exemplo
-------

```html
<address>
  Voce pode contatar o autor em
  <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br />
  Se encontrar qualquer bug, por favor
  <a href="mailto:webmaster@somedomain.com">contate o administrador do site</a
 >.<br />
  Você tambem pode querer nos visitar:<br />
  Mozilla Foundation<br />
  1981 Landings Drive<br />
  Building K<br />
  Mountain View, CA 94043-0801<br />
  USA
</address>
```

Embora o elemento `address` exiba o texto com o mesmo estilo padrão que os elementos `<i>` ou `<em>`, ele é mais apropriado de ser usado quando se lida com informação de contato, já que ele fornece informação semântica adicional.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-address-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* Outros elementos relacionados à seção: `<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<footer>`, `<section>`, `<header>`;
* Seções e delineamento de um documento HTML5.


<p> O elemento Parágrafo - HTML: Linguagem de Marcação de Hipertexto

<p> O elemento Parágrafo
========================

O **elemento HTML** **`<p>`** representa um parágrafo. Em mídias visuais, parágrafos são representados como blocos indentados de texto com a primeira letra avançada e separados por linhas em branco. Já em HTML, parágrafos são usados para agrupar conteúdos relacionados de qualquer tipo, como imagens e campos de um formulário.

Parágrafos são Elementos block-level, e fecharão automaticamente caso outro Elemento block-level inicie antes da tag de fechamento `</p>`. Veja "Omissão de tag" abaixo.

* *Categorias de conteúdo*
Conteúdos de fluxo, conteúdos palpáveis.
* *Conteúdo permitido*Conteúdo frasal.
* *Omissão de tag* A tag de abertura é obrigatória. A tag de fechamento pode ser omitida caso o elemento `<p>` seja imediatamente sucedido pelos elementos `<address>`, `<article>`, `<aside>`, `<blockquote>`, `<div>`, `<dl>`, `<fieldset>`, `<footer>`, `<form>` (en-US), `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<header>`, `<hr>`, `<menu>` (en-US), `<nav>`, `<ol>`, `<pre>`, `<section>`, `<table>`, `<ul>`, ou por outro elemento `<p>`, ou, caso não haja mais conteúdo no elemento pai e o elemento pai não for um elemento `<a>`.
* *Elementos pai permitidos* Qualquer elemento que aceite conteúdo de fluxo.
* *Interface DOM* `HTMLParagraphElement` (en-US)
Atributos
---------

Este elemento inclui atributos globais.

>
> **Note:** **Obs.:** O atributo `align` nas tags `<p>` está obsoleto e não deve ser usado.
>
>
>

Exemplo
-------

### HTML

```html
<p>
  Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.
  Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.
</p>

<p>
  Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. Este
  é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.
</p>
```

### Resultado

Estilizando Parágrafos
----------------------

### HTML

```html
<p>
  Parágrafos separados por linhas em branco são mais legíveis. Porém, também
  podemos distinguir parágrafos indentando suas primeiras linhas. Uma abordagem
  que ocupa menos espaço e é usada para economizar papel quando impresso.
</p>

<p>
  Em textos que serão editados, como trabalhos escolares e rascunhos, usamos
  tanto as linhas em branco quanto a indentação para distinguirmos cada
  parágrafo. Já em publicações, usar ambas é considerado redundante e
  amadoresco.
</p>

<p>
  Em textos arcaicos usava-se o caractere especial: ¶, o <i>caldeirão</i>, para
  separar parágrafos. Atualmente, esta abordagem é considerada claustrofóbica e
  ilegível.
</p>

<p>
  Será mesmo que é ilegível? Clique para visualizar:
  <button data-toggle-text="Que horrível! Mudar de volta!">
    Usar caldeirão nos parágrafos
  </button>
</p>
```

### CSS

```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.caldeirao {
  text-indent: 0;
  display: inline;
}
p.caldeirao + p.caldeirao::before {
  content: " ¶ ";
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", function (event) {
  document.querySelectorAll("p").forEach(function (paragraph) {
    paragraph.classList.toggle("caldeirao");
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});
```

### Result

Considerações acerca da Acessibilidade
--------------------------------------

Subdividir um conteúdo em parágrafos torna um texto mais acessível. Leitores de tela e outras tecnologias assistivas providenciam atalhos que permitem a navegação entre parágrafos. Possibilitando, então, uma leitura rápida do texto.

Utilizar elementos `<p>` vazios para adicionar linhas em branco entre parágrafos é uma abordagem problemática para os que dependem das tecnologias leitoras de tela. O leitor anunciará a existência de um parágrafo, mas não lerá nenhum conteúdo, pois não há. Isso confunde e frustra os que dependem dos leitures de tela.

Se desejas mais espaço, use CSS propriedades como `margin` para recriar o efeito:

```css
p {
  margin-bottom: 2em; // aumenta o espaço em branco após um parágrafo
}
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-p-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<hr>`
* `<br>`


<ol> - HTML: Linguagem de Marcação de Hipertexto

====

Sumário
-------

O **Elemento HTML
** (ou *Elemento HTML de lista ordenada*) representa uma lista de itens ordenados. De forma característica esses itens ordenados em uma lista são mostrados com uma contagem que os precede, que pode ser de qualquer tipo, como numerais, letras, algarismos romanos, ou simples símbolos. Esse modelo numerado não é definido na descrição html da página, mas na folha de estilos CSS associada, pela propriedade `list-style-type` (en-US).

Não há limitação para a profundidade e a imbricação das listas definidas com os elementos `<ol>` e `<ul>`.

**Nota:** Ambos os elementos `<ol>` e `<ul>`, representam uma lista de itens. Diferem porque, com o elemento `<ol>`, a ordem é significativa. Como regra de ouro para determinar qual deles usar, tente mudar a ordem dos itens da lista; se a significação for alterada, o elemento `<ol>` deve ser utilizado, senão o elemento `<ul>` é adequado.

* *Categorias de conteúdo (en-US)*Flutuante (en-US) e no caso dos elementos filhos de `<ol>` incluirem pelo menos um elemento de conteúdo `<li>` evidente.
* *Conteúdo permitido* Zero ou mais elementos `<li>`
* *Omissão de etiqueta (Tag)* None, both the starting and ending tag are mandatory.
* *Elementos pai permitidos* Qualquer elemento que aceite conteúdo flutuante (en-US).
* *Interface DOM* `HTMLOListElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais (en-US).

`compact`
Deprecated

Este atributo boleano sugere que a lista deve ser renderizada em um estilo compacto. A interpretação deste atributo depende do perfil de navegação (*user agent*) e não funciona em todos os navegadores.

**Nota:** Não utilize este atributo, pois ele se tornou obsoleto. O elemento `<ol>` deve ser estilizado usando CSS. Para dar um efeito semelhante ao do atributo compacto, a propriedade CSS `line-height` (en-US) pode ser utilizada com o valor de 80%.

`reversed`

Este atributo boleano especifica que as partes desta lista serão especificadas em ordem reversa, isto é, a menos importante será listada primeiro.

`start`

Este atributo inteiro especifica o valor inicial para a numeração dos itens da lista. Embora o tipo de ordenação dos elementos possa ser com algarismos romanos, tal como XXXI, ou letras, o valor inicial sempre é representado como um inteiro. Para iniciar a contagem a partir da letra "C", utilize
.

**Nota:** Este atributo, obsoleto na HTML4, foi reintroduzido na HTML5.

`type`

Indica o tipo de numeração:

* `'a'` indica letras minúsculas,
* `'A'` indica letras maiúsculas,
* `'i'` indica algarismos romanos minúsculos,
* `'I'` indica algarismos romanos maiúsculos,
* e `'1'` indica números (padrão).

O tipo de marcação é usado na lista inteira, a menos que um atributo `type` diferente seja utilizado dentro do elemento `<li>`.

**Nota:** Este atributo, obsoleto na HTML4, foi reintroduzido na HTML5. A menos que o valor do número na lista seja importante, a propriedade CSS `list-style-type` (en-US) deve ser usada em seu lugar.

Exemplos
--------

### Exemplo simples

```html
<ol>
  <li>primeiro item</li>
  <li>segundo item</li>
  <li>terceiro item</li>
</ol>
```

A saída HTML acima será:

1. primeiro item
2. segundo item
3. terceiro item
### Usando o atributo *start*

```html
<ol start="7">
  <li>primeiro item</li>
  <li>segundo item</li>
  <li>terceiro item</li>
</ol>
```

### Listas aninhadas

```html
<ol>
  <li>primeiro item</li>
  <li>
    segundo item
    <!-- Veja que a tag de fechamento </li> não é colocada aqui! -->
    <ol>
      <li>segundo item primeiro subitem</li>
      <li>segundo item segundo subitem</li>
      <li>segundo item terceiro subitem</li>
    </ol>
  </li>
  <!-- Aqui está a tag de fechamento </li> -->
  <li>terceiro item</li>
</ol>
```

A saída HTML acima será:

1. primeiro item
2. segundo item
    1. segundo item primeiro subitem
    2. segundo item segundo subitem
    3. segundo item terceiro subitem
3. terceiro item
###
 e
 aninhados

```html
<ol>
  <li>primeiro item</li>
  <li>
    segundo item
    <!-- Observe que a tag de fechamento </li> não é colocada aqui! -->
    <ul>
      <li>segundo item primeiro subitem</li>
      <li>segundo item segundo subitem</li>
      <li>segundo item terceiro subitem</li>
    </ul>
  </li>
  <!-- Aqui está a tag de fechamento </li> -->
  <li>terceiro item</li>
</ol>
```

A saída HTML acima será:

1. primeiro item
2. segundo item
    * segundo item primeiro subitem
    * segundo item segundo subitem
    * segundo item terceiro subitem
3. terceiro item
Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-ol-element |

Compatibilidede em navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elementos HTML relacionados à lista: `<ul>`, `<li>`, `<menu>` (en-US) e o obsoleto `<dir>`;
* Propriedades CSS que podem ser especialmente úteis para determinar o modelo do elemento`<ol>`:
    + a propriedade `list-style` (en-US), conveniente para escolher a forma como os ordinais são exibidos,
    + contadores CSS (en-US), útil para gerenciar listas complexas aninhadas,
    + a propriedade `line-height` (en-US), proficiente para simular o atributo obsoleto `compact`,
    + a propriedade `margin`, aplicável para controlar a indentação da lista.


<time> - HTML: Linguagem de Marcação de Hipertexto

<time>
======

Resumo
------

O elemento HTML *time* (`<time>`) representa o tempo tanto no formato de 24 horas ou como uma data precisa no calendário Gregoriano (com informações opcionais de tempo e fuso horário)

Este elemento é destinado a apresentar datas e horas no dispositivo em um formato legível. Isto pode ser útil aos agentes do usuário em oferecer qualquer programação de eventos ao calendário do utilizador.

>
> **Note:** **Notas de uso:** Este elemento não é adequado por exemplo, quando uma data específica não pode ser calculada, e nem deveria ser utilizado em datas anteriores ao calendário Gregoriano (devido as complicações com os cálculos dessas datas).
>
>
>

>
> **Note:** **Nota de estatus:** Este elemento foi concebido e está em discussão desde 2011 (http://blog.whatwg.org/weekly-time-data)
>
>
>

Contexto de uso
---------------

| Categorias de conteúdo (en-US) | flow content (en-US), phrasing content (en-US) |
| --- | --- |
| Permitted content | Phrasing content (en-US), but no descendant `time` elements. |
| Tag omission | None, both the start tag and the end tag are mandatory. |
| Permitted parent elements | Any element that accepts phrasing content. |
| Normative document | HTML5, section 4.6.10 |

Atributos
---------

Como todo outro elemento HTML, este elemento suporta os atributos globais (en-US).

`datetime`

Esse atributo indica a hora e a data do elemento e deve ser uma data válida com uma string de tempo opcional. Se o valor não puder ser analisado como uma data com uma string de tempo opcional, o elemento não possui um timestamp associado.

`pubdate`

(This feature is still being discussed by the WHATWG and the W3C HTML5 Working Group.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor article element). If true, the `time` element must have a corresponding date. Additionally, each `time` element indicating a publication date must be the only `time` element that does so for that document.

DOM interface
-------------

This element implements the `HTMLTimeElement` (en-US) interface.

Exemplos
--------

### Simple example

```html
<p>The concert starts at <time>20:00</time>.</p>
```

Above HTML will output:

The concert starts at 20:00.

### `pubdate` example

```html
<article>
  <p>This article was created on <time pubdate>2011-01-28</time>.</p>
</article>
```

Above HTML will output:

This article was created on 2011-01-28.

### `datetime` example

```html
<p>
  The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
</p>
```

Above HTML will output:

The concert took place on May 15.

Compatibilidade
---------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* The `time` element (HTML5 specification)


<section> - HTML: Linguagem de Marcação de Hipertexto

<section>
=========

O **elemento HTML `<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>.

|  |  |
| --- | --- |
| Categorias de conteúdo | Conteúdo de fluxo
 ,
 conteúdo de seção, conteúdo palpável.
  |
| Conteúdo permitido | Conteúdo de fluxo. |
| Omissão de tags | Sem omissão de tags |
| Tags-pai permitidas |
 Qualquer elemento que aceite
 conteúdo de fluxo. Note que um elemento `<section>` não deve
 ser um descendente de um elemento `<address>`.
  |
| Regras ARIA permitidas | `alert`, `alertdialog (en-US)`,
 `application (en-US)`, `banner (en-US)`,
 `complementary (en-US)`,
 `contentinfo (en-US)`, `dialog (en-US)`,
 `document (en-US)`, `feed (en-US)`,
 `log (en-US)`, `main (en-US)`,
 `marquee (en-US)`, `navigation (en-US)`,
 `search (en-US)`, `status (en-US)`,
 `tabpanel (en-US)` |
| Interface DOM | `HTMLElement` (en-US) |

Atributos
---------

Este elemento inclui apenas os atributos globais.

Notas de uso
------------

* Cada `<section>` deve ser identificado, geralmente incluindo um cabeçalho (elemento `<h1>` (en-US)-`<h6>` (en-US)) como um filho do elemento `<section>`.
* Se faz sentido distribuir separadamente o conteúdo de um elemento `<section>`, use um elemento `<article>` em seu lugar.
* Não use o elemento `<section>` como um container genérico; para isso que a `<div>` serve, especialmente quando a seção é apenas com propósito de estilização. Uma regra de ouro é ,"usar quando uma seção deve aparecer logicamente na estrutura de um documento".
Exemplo 1
---------

### Antes

```html
<div>
  <h1>Cabeçalho</h1>
  <p>Um monte de conteúdo incrível</p>
</div>
```

### Depois

```html
<section>
  <h1>Cabeçalho</h1>
  <p>Um monte de conteúdo incrível</p>
</section>
```

Exemplo 2
---------

### Antes

```html
<div>
  <h2>Cabeçalho</h2>
  <img src="passaro.jpg" alt="pássaro" />
</div>
```

### Depois

```html
<section>
  <h2>Cabeçalho</h2>
  <img src="passaro.jpg" alt="pássaro" />
</section>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-section-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elemtnos relacionados: `<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`;
* Seções e estrurura do um documento HTML5.