---
# System prepended metadata

title: HTML
tags: [Programação, Web Design]

---

# HTML
HTML é a abreviação de HyperText Markup Language, que em português significa Linguagem de Marcação de Hipertexto. É uma linguagem de marcação utilizada para criar documentos que podem ser visualizados em navegadores web.

O HTML é composto por uma série de tags que são utilizadas para estruturar o conteúdo do documento. Cada tag possui uma função específica, como definir um parágrafo, uma imagem, uma lista, uma tabela, um formulário, entre outras.


## Semantica
A semântica em HTML é a maneira de fornecer significado e estrutura para o conteúdo em uma página da Web, por meio do uso de elementos HTML que refletem com precisão o tipo de conteúdo que está sendo apresentado.

Cada elemento HTML tem uma função específica e uma semântica clara, que deve ser utilizada corretamente para que a página seja acessível e compreensível para usuários e também para ferramentas automatizadas, como mecanismos de busca e leitores de tela.

A semântica em HTML ajuda a melhorar a acessibilidade da página, fornecendo informações precisas sobre o conteúdo e sua estrutura, permitindo que usuários com deficiências visuais, por exemplo, possam acessar o conteúdo por meio de leitores de tela.

Na construção de um site, é importante utilizar as tags HTML com semântica correta para melhorar a acessibilidade, a usabilidade e a otimização para mecanismos de busca. Abaixo, estão algumas das principais tags e suas semânticas na construção de um site:

-   `<html>`: define o início e o fim do documento HTML;
-   `<head>`: contém informações sobre o documento, como o título da página e a ligação com arquivos externos de estilo e script;
-   `<meta>`: fornece metadados sobre a página, como a descrição e palavras-chave para mecanismos de busca;
-   `<title>`: define o título da página, que é exibido na barra de título do navegador;
-   `<body>`: define o conteúdo principal da página;
-   `<header>`: define o cabeçalho da página, geralmente contendo o logotipo, o menu e outras informações importantes;
-   `<nav>`: define a seção de navegação da página;
-   `<main>`: define o conteúdo principal da página;
-   `<section>`: define uma seção da página, como um artigo ou uma seção de comentários;
-   `<article>`: define um artigo independente e completo, como uma postagem de blog ou um artigo de notícias;
-   `<aside>`: define conteúdo relacionado ou secundário, como um bloco de anúncios ou um menu de categorias;
-   `<footer>`: define o rodapé da página, geralmente contendo informações de contato e direitos autorais.



## Tags

1.  `<html>`: Define o início e o fim do documento HTML.
2.  `<head>`: Contém informações sobre o documento HTML, como o título e os metadados.
3.  `<title>`: Define o título do documento HTML que aparece na aba do navegador.
4.  `<body>`: Contém todo o conteúdo visível do documento HTML.
5.  `<h1>`-`<h6>`: Define cabeçalhos de diferentes níveis (do maior ao menor).
6.  `<p>`: Define um parágrafo.
7.  `<a>`: Define um hyperlink.
8.  `<img>`: Define uma imagem.
9.  `<ul>`: Define uma lista não ordenada.
10.  `<ol>`: Define uma lista ordenada.
11.  `<li>`: Define um item em uma lista.
12.  `<table>`: Define uma tabela.
13.  `<tr>`: Define uma linha em uma tabela.
14.  `<th>`: Define uma célula de cabeçalho em uma tabela.
15.  `<td>`: Define uma célula de dados em uma tabela.
16.  `<form>`: Define um formulário.
17.  `<input>`: Define um campo de entrada de dados em um formulário.
18.  `<button>`: Define um botão clicável em um formulário.
19.  `<select>`: Define uma lista suspensa em um formulário.
20.  `<option>`: Define uma opção em uma lista suspensa.
21.  `<code>`: Define um código formatado e alinhado 
22.  `<abbr>`: Define uma abreviação com uma explicação

## Formatação de Texto

Em HTML, é possível formatar o texto de várias maneiras diferentes, incluindo negrito, itálico, sublinhado, cores, tamanho da fonte, entre outras opções. Para fazer isso, você pode usar tags HTML específicas que são projetadas para formatar o texto.

1.  **Negrito:** `<b>` ou `<strong>`
    -   Ambas as tags podem ser usadas para enfatizar o texto com negrito. A diferença é que `<strong>` é usada para marcar o texto com importância semântica, enquanto `<b>` é usada apenas para fins visuais.

2.  **Itálico:** `<i>` ou `<em>`
    -   Ambas as tags podem ser usadas para enfatizar o texto com itálico. A diferença é que `<em>` é usada para marcar o texto com importância semântica, enquanto `<i>` é usada apenas para fins visuais.

3.  **Sublinhado:** `<u>`
    -   Esta tag é usada para sublinhar o texto.

4.  **Tachado:**`<s>` ou `<del>`
    -   Ambas as tags podem ser usadas para tachar o texto, indicando que ele foi removido ou está obsoleto. A diferença é que `<del>` é usada para marcar o texto com importância semântica, enquanto `<s>` é usada apenas para fins visuais.

5.  **Alinhamento:** `<div>` ou `<p>`
    -   Ambas as tags podem ser usadas para alinhar o texto. A diferença é que `<div>` é usada para agrupar elementos e aplicar estilos a eles em conjunto, enquanto `<p>` é usada para definir um parágrafo e criar uma nova linha antes e depois do texto.


### Cabecalho 

Em HTML, as tags `<h1>` a `<h6>` são usadas para definir os títulos e subtítulos em uma página web. O "h" em `<h1>` a `<h6>` significa "heading" em inglês, que significa "cabeçalho" em português.

Cada uma dessas tags representa um nível diferente de cabeçalho, com `<h1>` sendo o nível mais alto e `<h6>` o mais baixo. Isso significa que `<h1>` deve ser usado para o título principal da página e `<h6>` deve ser usado para subtítulos menos importantes.

```
    <body>
	<h1>Título Principal</h1>
	<h2>Subtítulo</h2>
	<h3>Subtítulo Menor</h3>
	<h4>Subtítulo Menor</h4>
	<h5>Subtítulo Menor</h5>
	<h6>Subtítulo Menor</h6>
    </body>
```


### Parágrafo

**Um parágrafo em HTML é definido usando a tag `<p>`. Essa tag é usada para marcar um bloco de texto que representa um parágrafo.**

`<p>Este é um exemplo de um parágrafo em HTML. Ele contém algum texto que será exibido como um bloco separado.</p>`

### Comentário
Para comentar no codigo utilize o comando `<!---->`

```
<body>
    <!--Comentario e bla bla bla-->
    <p>
        Tudo que o sol toca...
    </p>
</body>
```

## Listas
Em HTML, existem três tipos de listas: 
* **listas ordenadas (`<ol>`)**
* **listas não ordenadas (`<ul>`)**
* **listas de definição (`<dl>`).**

Cada item da lista é definido usando a tag `<li>`, que significa "item da lista".

A lista ordenada (`<ol>`) é usada para criar uma lista numerada, onde cada item é numerado em ordem sequencial. O número padrão para cada item é um número arábico, mas você pode usar o atributo `type` para alterar o tipo de número, como letras maiúsculas ou minúsculas, números romanos maiúsculos ou minúsculos, entre outros.


<ol type="a">
    <li>Acordar
    <li>Escovar os dentes 
    <li>Tomar café
</ol>

A lista não ordenada (`<ul>`) é usada para criar uma lista sem ordem numérica, onde cada item é precedido por um símbolo ou um marcador. O símbolo padrão para cada item é um ponto preto, mas você pode usar o atributo `type` para alterar o tipo de símbolo, como círculos, quadrados, entre outros.

<ul type="disc">
    <li> Pão </li>
    <li> Hamburguer </li>
    <li> Queijo </li>
    <li> Presunto </li>
</ul>

A lista de definição (`<dl>`) é usada para criar uma lista de termos e suas definições correspondentes. Cada item da lista é definido usando as tags `<dt>` (termo) e `<dd>` (definição).

<dl>
  <dt>Termo 1</dt>
  <dd>Definição 1</dd>
  <dt>Termo 2</dt>
  <dd>Definição 2</dd>
  <dt>Termo 3</dt>
  <dd>Definição 3</dd>
</dl>

## Links e Hiperlinks
Links em HTML são usados para criar ligações entre diferentes páginas web e recursos on-line, permitindo que os usuários naveguem pela web com facilidade.

Para criar um link em HTML, você precisa usar a tag `<a>` (anchor), que é seguida pelo atributo `href` (hypertext reference), que define o endereço da página web ou do recurso on-line ao qual o link leva. Dentro da tag `<a>`, você pode incluir o texto ou imagem que será clicado para seguir o link.

**Link Padrão**

    <p> Acessando o <a href="https://www.youtube.com">youtube</a> </p>
    
**Link Absoluto**
-> Target='_blank' (abre numa nova aba)
=> Target='_self' (abre na mesma aba)
    
    <p> Acessando o <a href="https://www.youtube.com" target="_blank" rel="external">youtube</a></p>

**Link Relativo**
-> Leva para outra página/arquivo do site

    <p> 1° página do site. Acesse a 2° página clicando <a href="Links pag2.html" target="_self" rel="next">aqui</a> </p>
    
**Links para Download**

```htmlembedded
<ol>
        <li> Baixar o livro <a href="10 - Ligações em toda parte.pdf" 
            download="10 - Ligações em toda parte.pdf" 
            type="application.pdf">Ligações em toda parte</a> em pdf</li>
        <li> Baixar o livro <a href="10 - Ligações em toda parte.rar" 
            download="10 - Ligações em toda parte.rar"
            type="application.zip">Ligações em toda parte</a> no formato zip</li>
    </ol>
```


## Imagens

Em HTML, as imagens são inseridas na página usando a tag `<img>`. A tag `<img>` é uma tag vazia, o que significa que não precisa de uma tag de fechamento. A tag `<img>` tem um único atributo obrigatório, que é o `src`, que especifica o caminho para o arquivo de imagem que você deseja exibir.

```htmlembedded
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">
```
O atributo `alt` é usado para fornecer uma descrição da imagem para usuários que não podem visualizar a imagem, como usuários com deficiência visual ou usuários com conexões lentas à internet. O valor do atributo `alt` deve ser uma descrição precisa do conteúdo da imagem.

Além disso, existem vários outros atributos opcionais que você pode usar para especificar o tamanho da imagem, a largura e altura da imagem, a borda da imagem, entre outros.

`<img src="caminho/para/imagem.jpg" alt="Descrição da imagem" width="400" height="300" border="0">`

Você também pode usar a tag `<figure>` para adicionar uma legenda à sua imagem. A tag `<figure>` envolve a tag `<img>` e a tag `<figcaption>` é usada para definir a legenda.

<figure>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-ctnvIdqmajwymQ9U9YB5-OOBfamIggoPaQ&usqp=CAU" alt="Descrição da imagem">
  <figcaption>???</figcaption>
</figure>

**Ao inserir imagens em seu código HTML, é importante lembrar de otimizá-las para a web, usando formatos de arquivo apropriados e dimensionando-as para o tamanho correto e lembrar dos direitos autorais. Isso ajuda a garantir que suas páginas carreguem rapidamente e forneçam uma boa experiência do usuário.**

### Sites de Fotos e Ferramentas

>**Banco de dados de fotos**
- Google imagens (com filtro de direitos autorais)
- [Pexels](https://www.pexels.com/pt-br/)
- [Pixabay](https://pixabay.com/pt/)

>**Ferramentas de edição**

- [Compress Jpeg](https://compressjpeg.com/pt/)
- [Easy Resize](https://www.easy-resize.com/pt/)
- [Pixlr X](https://pixlr.com/br/x/)
- [Ez Gif](https://ezgif.com/maker)
- [Imagem Map](https://www.image-map.net)
    - Cria uma imagem com links atrelados em determinada coordenada

>**Icones e Vetores**
- [Flaticon](https://www.flaticon.com/br/)
- [Icon archive ](https://www.iconarchive.com)

## Tabelas
As tabelas em HTML são usadas para exibir dados em formato tabular. A tag principal para criar uma tabela em HTML é a tag `<table>`. Dentro da tag `<table>`, você precisa incluir uma ou mais tags `<tr>` para cada linha da tabela e dentro de cada tag `<tr>`, você precisa incluir uma ou mais tags `<td>` para cada célula da tabela.

Pode-se usar a tag `<caption>` para adicionar um título à sua tabela.


<table>
<caption>Título da tabela</caption>
<tr> 
    <th>Nome</th> <th>Idade</th> 
</tr> 
<tr> 
    <td>João</td> <td>30</td> 
</tr> 
<tr> 
    <td>Maria</td> <td>25</td> 
</tr> 
</table>

A tag `<th>` é usada para definir o cabeçalho da tabela. A diferença entre `<th>` e `<td>` é que `<th>` é usado para cabeçalhos de coluna e `<td>` é usado para dados.

Outros atributos que você pode adicionar à tag `<table>` incluem `border`, `cellspacing` e `cellpadding` para controlar a aparência da tabela.

> Aqui, `border="1"` define a largura da borda da tabela, `cellspacing="0"` define o espaçamento entre as células da tabela e `cellpadding="5"` define o preenchimento dentro de cada célula da tabela.


<table border="3" cellspacing="0" cellpadding="5"
 style="text-align: center;" width="200px">
    <tr> 
        <th>Nome</th> <th>Idade</th> 
    </tr> 
    <tr> 
        <td>João</td> <td>30</td> 
    </tr> 
    <tr> 
        <td>Maria</td> <td>25</td> 
    </tr> 
</table>

## Iframes
A tag `<iframe>` em HTML é usada para incorporar uma página da web em outra página da web. É útil quando você deseja exibir conteúdo de um site em outro site sem redirecionar o usuário para a página original. Por exemplo, você pode usar um `<iframe>` para incorporar um mapa do Google Maps em seu próprio site.

`<iframe src="URL"></iframe>`

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d69949.9897518481!2d-43.26109176671408!3d-22.865614749906324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1683338301561!5m2!1spt-BR!2sbr" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>


>Parâmetros

-   `src`: especifica a URL do conteúdo a ser incorporado no iframe.
-   `frameborder`: define se deve ser exibida uma borda ao redor do iframe. O valor padrão é 1 (exibe a borda), mas pode ser alterado para 0 (não exibe a borda).
-   `scrolling`: define se deve ser exibida uma barra de rolagem no iframe. O valor padrão é "auto", que exibe a barra de rolagem apenas quando necessário. Outras opções incluem "yes" (sempre exibe a barra de rolagem), "no" (nunca exibe a barra de rolagem) e "scroll" (sempre exibe a barra de rolagem, mesmo que não seja necessário).
-   `name`: define um nome para o iframe, que pode ser usado como destino de links ou como destino de redirecionamentos.
-   `sandbox`: define um conjunto de restrições de segurança para o iframe, como restrições de acesso a cookies, restrições de scripts, etc.
-   `allowfullscreen`: define se o iframe pode ser exibido em modo de tela cheia. O valor padrão é "false", mas pode ser alterado para "true".

## Tipos de Entradas
Existem vários tipos de entradas que podem ser criadas em HTML usando a tag `<input>`. Alguns dos tipos mais comuns são:

- `text`: cria um campo de texto simples onde o usuário pode digitar texto.
    - placeholder: Legenda que fica dentro campo de texto

```htmlembedded
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Digite seu nome">
```

- `password`: cria um campo de texto onde o texto digitado é ocultado por asteriscos ou pontos para proteger a privacidade do usuário.

```htmlembedded
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha">
```

-   `email`: cria um campo de texto onde o usuário deve digitar um endereço de e-mail válido.
```htmlembedded
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
```

-   `number`: cria um campo de texto onde o usuário só pode digitar números.
```htmlembedded
<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade">
```

-   `date`: cria um campo de entrada de data para que o usuário possa selecionar uma data no calendário.
```htmlembedded
<label for="data-nascimento">Data de Nascimento:</label>
<input type="date" id="data-nascimento" name="data-nascimento">
```

-   `time`: cria um campo de entrada de tempo para que o usuário possa selecionar uma hora do dia.
```htmlembedded
<label for="hora-entrada">Hora de entrada:</label>
<input type="time" id="hora-entrada" name="hora-entrada">
```

-   `checkbox`: cria uma caixa de seleção que o usuário pode marcar ou desmarcar.
```htmlembedded
<label for="lembrar-me">Lembrar-me</label>
<input type="checkbox" id="lembrar-me" name="lembrar-me">
```

-   `radio`: cria um botão de opção que permite ao usuário selecionar uma única opção de uma lista de opções.
```htmlembedded
<label>Selecione uma opção:</label><br>
<input type="radio" id="opcao1" name="opcao" value="opcao1">
<label for="opcao1">Opção 1</label><br>
<input type="radio" id="opcao2" name="opcao" value="opcao2">
<label for="opcao2">Opção 2</label><br>
<input type="radio" id="opcao3" name="opcao" value="opcao3">
<label for="opcao3">Opção 3</label>
```

-   `submit`: cria um botão que envia o formulário para o servidor quando o usuário o pressiona

`<input type="submit" value="Enviar">`


-   `reset`: cria um botão que redefine todos os campos do formulário para seus valores padrão quando o usuário o pressiona.

`<input type="reset" value="Limpar">`



### Label

A tag `<label>` é usada em HTML para associar um rótulo descritivo a um elemento de formulário. O rótulo geralmente contém o nome do campo que o elemento de formulário representa, tornando mais fácil para o usuário entender o que deve ser inserido no campo.

O uso da tag `<label>` é recomendado para melhorar a acessibilidade do formulário, pois permite que o usuário clique no rótulo para selecionar o campo associado. Isso é especialmente útil em dispositivos móveis, onde os campos de formulário podem ser difíceis de selecionar com precisão.

A tag `<label>` deve ter um atributo "for" que indica qual campo do formulário ela está associada. Esse atributo deve ter o mesmo valor do atributo "id" do campo correspondente. Alternativamente, o campo do formulário pode ser colocado dentro da tag `<label>` sem a necessidade de usar o atributo "for".

### TextArea

A tag `textarea` em HTML é usada para criar um campo de texto multi-linha. É frequentemente usado em formulários para permitir que os usuários insiram texto longo, como comentários, mensagens ou descrições.

-   `name`: nome do campo (obrigatório);
-   `id`: identificador do campo (opcional);
-   `cols`: largura do campo em colunas de caracteres (opcional);
-   `rows`: altura do campo em linhas de caracteres (opcional);
-   `readonly`: indica se o campo é somente leitura ou não (opcional);
-   `disabled`: indica se o campo está desabilitado ou não (opcional);
-   `placeholder`: texto que é exibido como uma dica dentro do campo (opcional);
-   `required`: indica se o campo é obrigatório ou não (opcional);
-   `maxlength`: número máximo de caracteres permitidos no campo (opcional).
-   `resize`: impede o usuario de alterar o tamanho do textarea

## Formulário

Formulários em HTML são usados para coletar informações dos usuários por meio de caixas de texto, botões, menus suspensos e outros elementos interativos. Quando um usuário preenche um formulário e envia as informações, elas podem ser processadas pelo servidor da web e armazenadas em um banco de dados ou enviadas por e-mail para o destinatário apropriado.

A tag `<form>` é usada para criar um formulário em HTML. O formulário deve ser composto de vários elementos, como campos de entrada de texto, botões e menus suspensos, que são definidos usando outras tags HTML, como `<input>`, `<textarea>`, `<select>`, `<option>`, entre outras.

O elemento `<form>` tem vários atributos que podem ser usados para especificar como o formulário deve ser processado e para onde as informações coletadas devem ser enviadas. Alguns dos atributos mais comuns incluem:

-   `action`: especifica a URL do script que processará o formulário quando ele for enviado.
-   `method`: especifica o método HTTP que será usado para enviar as informações do formulário. Os valores mais comuns são "GET" (envia na url - menos segurança) e "POST" (envia através do Body - mais segurança).
-   `name`: define um nome para o formulário, que pode ser usado para referenciar o formulário em JavaScript ou em outras partes do código HTML.
-   `target`: define o destino onde a resposta do formulário será exibida. Por padrão, a resposta é exibida na mesma janela ou guia em que o formulário foi enviado, mas pode ser alterada para uma janela pop-up ou uma nova guia.
-   `autocomplete`: (on/off) armazena as informações dos inputs e completa automaticamente ao retornar à página

```htmlembedded
<h1>Formulário</h1>
    <form>
        <label for="campo_nome">Nome:</label>
        <input id="campo_nome" type="text" placeholder="Digite seu nome">
        <label for="campo_sobrenome">Sobrenome:</label>
        <input id="campo_sobrenome" type="text" placeholder="Digite seu sobrenome">
        <br> <br>
        <label for="senha">Senha:</label>
        <input id="senha" type="password" placeholder="">
        <br> <br>
        <label for="email">Email:</label>
        <input id="email" type="email">
        <br> <br>
    <hr>
        <h2>Animal de estimação</h2>
        <input type="radio" id="cachorro" name="Animal" value="Cachorro">
        <label for="cachorro">Cachorro</label>
        <br>
        <input type="radio" id="gato" name="Animal" value="Gato">
        <label for="gato">Gato</label>
        <br>
        <input type="radio" id="hamster" name="Animal" value="Hamster">
        <label for="haster">Hamster</label>
    <hr>
        <h2>Opções de Comida</h2>
        <input type="checkbox" id="item1" name="item1" value="Arroz">
        <label for="item1">Arroz</label>
        <br>
        <input type="checkbox" id="item2" name="item2" value="Feijão">
        <label for="item2">Feijão</label>
        <br>
        <input type="checkbox" id="item3" name="item3" value="Batata">
        <label for="item3">Batata</label>
        <br>
        <input type="checkbox" id="item4" name="item4" value="Salada">
        <label for="item4">Salada</label>
        <br>
        <input type="checkbox" id="item5" name="item5" value="Frango">
        <label for="item5">Frango</label>
        <br>
        <input type="checkbox" id="item6" name="item6" value="Bife">
        <label for="item6">Bife</label>
    <hr>
        <h2>Escolha uma Cor</h2>    
        <select name="cores">
            <option selected disabled>Selecione uma cor</option>
            <option value="vermelho">vermelho</option>
            <option value="verde">verde</option>
            <option value="azul">azul</option>
        </select>
        
    <hr>
        <h2>Digite uma mensagem</h2>
        <textarea resize="none" name="mensagem" placeholder="Digite uma mensagem" rows="7" cols="30"></textarea>
        <br> <br>
        <input type="reset" value="Limpar">
        <input type="submit" value="Enviar Formulário">
    </form>
</body>
```

![](https://hackmd.io/_uploads/HkB1d8XNh.png)


## Audio

A tag `audio` em HTML é usada para incorporar arquivos de áudio em uma página da web. Ela permite que você reproduza arquivos de áudio em vários formatos, como MP3, WAV e Ogg Vorbis, diretamente na página da web, sem a necessidade de usar plugins ou programas externos.

<audio src="The Godfather Theme Song.mp3" controls></audio>

-   `src`: o URL do arquivo de áudio que será reproduzido;
-   `controls`: adiciona controles de reprodução, como botões de play, pause, volume e barra de progresso;
-   `autoplay`: faz com que o áudio comece a ser reproduzido automaticamente quando a página é carregada;
-   `loop`: faz com que o áudio seja reproduzido em loop, ou seja, repetidamente;
-   `preload`: especifica como o navegador deve pré-carregar o arquivo de áudio. Os valores possíveis são "auto", "metadata" e "none";
-   `muted`: define se o áudio deve ser reproduzido sem som. O valor "true" desativa o som e "false" mantém o som habilitado;
-   `volume`: define o volume inicial do áudio, variando de 0.0 (mudo) a 1.0 (volume máximo);
-   `poster`: define uma imagem de pôster que será exibida enquanto o áudio não é reproduzido ou está sendo carregado.

## Video
A tag `video` em HTML é usada para incorporar arquivos de vídeo em uma página da web. Ela permite que você reproduza arquivos de vídeo em vários formatos, como MP4, WebM e Ogg Theora, diretamente na página da web, sem a necessidade de usar plugins ou programas externos.

- **Parametros semelhantes ao Audio**
-   `width` e `height`: define as dimensões do elemento `video`;
-   `playsinline`: permite que o vídeo seja reproduzido em linha em dispositivos móveis;
-   `controlslist`: define quais controles serão exibidos na interface do usuário.

> Video hospedado no proprio site/arquivo
<video src="Treta Luta.mp4" controls width="700" ></video>

**Em relação a vídeos tem 4 formatos:**
* mp4
* m4v
* webm 
    * Tende a ser o mais pesado e ruimzinho
* ogv


Dica é colocar todos os formatos caso não vá em algum navegador específico

> Video hospedado externamente
<iframe width="560" height="315" src="https://www.youtube.com/embed/m1KhyQulnbM" 
    title="YouTube video player" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>















