Tutorial HTML: Estrutura Web Semântica

05 de dezembro de 2023

Aviso: Este post foi traduzido para o português usando um modelo de tradução automática. Por favor, me avise se encontrar algum erro.

Comentários

Para adicionar um comentário a um html, utiliza o seguinte código:

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!-- Comentario -->
	
	Copied

Cabeça

O HTML deve começar com uma tag !DOCTYPE que indica ao navegador a versão do HTML. Ao colocar apenas HTML, o navegador entende que é a versão 5.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
	
	Copied

A seguir deve ser colocado um contêiner com a tag html com um atributo chamado lang que indica o idioma no qual a página foi escrita.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
</html>
	
	Copied

Dentro são criados dois contêineres adicionais, o de head e o de body

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
    </head>
    <body>
    </body>
</html>
	
	Copied

No contêiner head vai tudo o que o navegador precisa para poder carregar, enquanto no body vai tudo o que será exibido na página.

Uma das tags do head é meta que possui um atributo chamado charset que indica o tipo de codificação do texto, geralmente é utf-8, utf-16.

Outro tipo de meta é o name="description", que é uma descrição para os navegadores. É importante para o SEO.

Outro tipo de meta é o name="robots" que é para os robôs dos motores de busca e indica se a página pode ser seguida ou não.

Outro atributo do head é title, que indica o título que é visto na aba.

Outro meta é name="viewport" que é para o design responsivo.

Outro meta é name="theme-color" que é para a cor da barra de navegação.

Outro objetivo é o favicon, que é o ícone que aparece na guia. É escrito com a tag link e os atributos type e href="path".

Algumas tags muito importantes para o SEO são todas as relacionadas a Open Graph, que são as que aparecem quando um link é compartilhado nas redes sociais. Para isso, uma página muito útil é open graph, onde você coloca seu link e ela te diz como ele apareceria em cada rede social. Essas metatags são

property="og:title" que é o título que aparece nas redes sociais.

property="og:description" é a descrição que é vista nas redes sociais.

property="og:image" que é a imagem que aparece nas redes sociais.

property="og:image:alt" que é o texto alternativo da imagem que aparece nas redes sociais.

Há uma tag para o CSS que é link

Na página de Open Graph podem ser vistas todas as tags que podem ser colocadas no head.

Outra tag importante para o SEO é link rel="alternate", que é usada para indicar que existe uma versão alternativa da página, por exemplo, em outro idioma.

Outra tag importante para o SEO é link rel="canonical", que serve para indicar que há uma versão canônica da página, por exemplo em outro idioma.

Com as tags style e script é possível escrever CSS e JavaScript no html.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
    </body>
</html>
	
	Copied

Corpo

Há tags de contêiner que ajudam a criar uma estrutura e trazem mais tags dentro. E há tags de contêiner que são as que contêm o texto, imagens, etc.

Etiquetas contenedoras

Cabeçalho

Esta é a tag para descrever o header

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            Header
        </header>
    </body>
</html>
	
	Copied

Navegação

Com a etiqueta nav cria a navegação. Dentro desta etiqueta, podem ser colocados links com a etiqueta a e pode ser colocado um logotipo com a etiqueta img.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
    </body>
</html>
	
	Copied

Links

Como na navegação, os links são criados com a tag a e levam um atributo href="path" que indica o link para o qual leva o link. Também levam um atributo target="_blank" que indica que se abre em uma nova aba. Além disso, pode-se colocar o atributo rel="noreferer" que indica que não se passa informações da página de onde vem o link.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<a href="path" target="_blank">Enlace</a>
	
	Copied

Se o link for um link para uma seção da página, coloca-se o atributo href="#id".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<a href="#id">Enlace</a>
	
	Copied

Portanto, em outra parte da página deve ser colocado um contêiner com o atributo id="id".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<div id="id">
</div>
	
	Copied

Se o link for um email, coloca o atributo href="mailto:email".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<a href="mailto:email">Email</a>
	
	Copied

Se o link for um telefone, adiciona-se o atributo href="tel:phone".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<a href="tel:phone">Teléfono</a>
	
	Copied

Se quiser colocar um link para abrir o WhatsApp, use o atributo href="https://wa.me/phone".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<a href="https://wa.me/phone">WhatsApp</a>
	
	Copied

Principal

Esta é a tag para descrever o main

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
        </main>
    </body>
</html>
	
	Copied

Rodapé

Esta é a tag para descrever o footer

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>
	
	Copied

Seção

Dentro de main podem fazer seções

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>
	
	Copied

Artigo

Dentro de main podem haver artigos

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>
	
	Copied

Divisor

Quando as tags semânticas se esgotam, pode-se utilizar a tag div, que é um contêiner genérico.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>
	
	Copied

Listas não ordenadas `ul`

Dentro de main podem haver listas não ordenadas, cada item da lista deve ter a tag li

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>
	
	Copied

Listas ordenadas `ol`

Dentro de main podem ter listas ordenadas, cada item da lista deve ter a tag li

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                        <ul>
                            <li></li>
                        </ul>
                        <ol>
                            <li></li>
                        </ol>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>
	
	Copied

Pode-se alterar o tipo de ordem da lista com o atributo type="a" para letras, type="i" para números romanos, type="1" para números arábicos.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<ol type="a">
    <li></li>
</ol>
	
	Copied

Se quer que a ordem da lista comece em um número específico, coloca o atributo start="number".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<ol start="2">
    <li></li>
</ol>
	
	Copied

Se queremos que a ordem da lista vá em ordem inversa, colocamos o atributo reversed.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<ol reversed>
    <li></li>
</ol>
	
	Copied

Se quisermos que um item de lista tenha um valor, colocamos o atributo value="número".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<ol>
    <li value="2"></li>
</ol>
	
	Copied

Papel `role`

Cada uma das tags que vimos anteriormente tem um papel, mas o papel de cada uma delas pode ser alterado com a tag role="papel".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                        <ul>
                            <li></li>
                        </ul>
                        <ol>
                            <li></li>
                        </ol>
                    </div>
                    <div role="list">
                        <div role="listitem">
                        </div>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>
	
	Copied

Etiquetas de conteúdo

Para criar um novo parágrafo utilizamos a tag . Para dar ênfase a algo dentro de um parágrafo podemos pensar em usar negrito (), mas é melhor usar a tag , já que a tag b está **deprecada**.

Para criar um título temos as tags h1, h2, h3, h4, h5, h6.

Para criar hiperlinks usa a tag a, o atributo href indica o endereço do hyperlink. Se for colocado um cifrão # a página não será recarregada.

Etiquetas multimédia

As tags multimídia não têm tag de abertura e fechamento, por exemplo a tag img não é escrita como <img></img> mas sim como <img/>. Isso ocorre porque ela é substituída por uma imagem. Portanto, em geral as tags substituíveis não têm tag de fechamento.

Existem dois tipos de imagens

Com perda: Essas imagens perdem qualidade, mas são mais leves. jpg, jpeg* Sem perda: Essas imagens não perdem a qualidade, mas são muito pesadas. GIF, PNG-8, PNG-24, SVG

Otimização das imagens

O tamanho médio deve ser de 70 KB

Tiny PNG: reduz o tamanho da imagem* Verexif: Remove os metadados da imagem

Etiqueta `img`

Página para baixar imagens gratuitas na internet pexels

A tag img tem o atributo src onde é indicada a fonte.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<img src="path"/>
	
	Copied

O atributo alt onde se indica o texto alternativo.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<img src="path" alt="Texto alternativo"/>
	
	Copied

O atributo title, onde se indica o título da imagem, serve para que quando passarmos o mouse sobre a imagem apareça o título. Também é útil para o SEO, para que os mecanismos de busca saibam do que se trata a imagem.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<img src="path" alt="Texto alternativo" title="Título"/>
	
	Copied

Também podemos colocar o atributo width e height para indicar o tamanho da imagem, mas é melhor não colocá-los e deixar que o navegador faça o cálculo.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<img src="path" alt="Texto alternativo" title="Título" width="100" height="100"/>
	
	Copied

Com o atributo hidden podemos ocultar a imagem. O que é muito útil quando queremos que uma imagem apareça após o usuário realizar uma ação. Assim, com o JavaScript podemos remover o atributo hidden e a imagem aparecerá.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<img src="path" alt="Texto alternativo" title="Título" hidden/>
	
	Copied

Para que as páginas carreguem mais rápido, pode-se colocar o atributo loading="lazy", que faz com que a imagem seja carregada quando o usuário se aproxima dela.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<img src="path" alt="Texto alternativo" title="Título" loading="lazy"/>
	
	Copied

**Importante!** Não é necessário colocar o atributo loading="lazy" em imagens importantes para o SEO, como, por exemplo, o logo. Nem nas imagens que estão no início da página web, pois isso pode causar um piscar.

Etiqueta `figure`

Esta tag nos permite criar um contêiner para a imagem, por exemplo, nos permite adicionar uma descrição. Para isso, é necessário usar a tag figcapture.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<figure>
    <img src="path" alt="Texto alternativo" title="Título"/>
    <figcaption>Descripción</figcaption>
</figure>
	
	Copied

Tag `video`

Com esta tag é possível adicionar vídeos, para isso usa-se o atributo src. Para que apareçam os botões de reprodução, deve-se colocar o atributo controls. O último atributo é preload="auto", isso é para que o vídeo comece a ser baixado quando a página começa a carregar, assim quando o usuário for reproduzi-lo já terá muito conteúdo carregado e levará menos tempo para começar.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<video src="path" controls preload="auto">
</video>
	
	Copied

Se você quiser que comece a reproduzir em um minuto determinado, em src logo após a fonte deve-se colocar #t=xx,yy

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<video src="path#t=1,2" controls>
</video>
	
	Copied

Se o vídeo estiver em vários formatos, a fonte deve ser colocada dentro de uma tag chamada source, onde são indicadas as diferentes possíveis fontes do vídeo. O navegador decidirá qual fonte usar. Isso se deve ao fato de que existem navegadores que reproduzem melhor certos vídeos do que outros.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<video controls>
    <source src="path" type="video/mp4"/>
    <source src="path" type="video/webm"/>
</video>
	
	Copied

Se não quisermos que haja controles de reprodução e que o vídeo seja reproduzido automaticamente, colocamos o atributo autoplay.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<video src="path" autoplay>
</video>
	
	Copied

Mas para não incomodar o usuário, podemos fazer com que seja reproduzido sem som, para isso adicionamos o atributo muted.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<video src="path" autoplay muted>
</video>
	
	Copied

Se quisermos que o vídeo seja reproduzido em loop, colocamos o atributo loop.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<video src="path" autoplay muted loop>
</video>
	
	Copied

Isso é muito útil para colocar um vídeo de fundo em uma página da web.

Para alterar a imagem do vídeo quando não está sendo reproduzido, use o atributo poster="path".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<video src="path" autoplay muted loop poster="path">
</video>
	
	Copied

Tag `audio`

Para reproduzir áudio usa a tag audio, para isso utiliza o atributo src.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<audio src="path">
</audio>
	
	Copied

Para que apareçam os controles de reprodução, coloca-se o atributo controls.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<audio src="path" controls>
</audio>
	
	Copied

Se quisermos que o áudio seja reproduzido automaticamente, colocamos o atributo autoplay.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<audio src="path" autoplay>
</audio>
	
	Copied

Se quisermos que o áudio seja reproduzido em loop, colocamos o atributo loop.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<audio src="path" autoplay loop>
</audio>
	
	Copied

Se quisermos que o áudio seja reproduzido em loop, colocamos o atributo loop.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<audio src="path" autoplay loop>
</audio>
	
	Copied

Tag `iframe`

Quando compartilhamos um vídeo do YouTube, temos a opção de copiar o código. Isso gera um código HTML que possui a tag iframe. Essa tag serve para incorporar conteúdo de outras páginas da web.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<iframe src="path">
</iframe>
	
	Copied

Falamos sobre a página do YouTube, mas poderíamos incorporar qualquer página. Embora existam algumas páginas que não permitem isso.

Etiqueta `dialog`

Você deve ter visto que muita gente em seus portfólios coloca seus projetos e quando você clica nele, um caixa de diálogo é aberta com mais informações, ou em galerias de imagens quando você clica em uma imagem, um caixa de diálogo é aberta com a imagem maior. Isso é feito com a tag dialog.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<dialog>
</dialog>
	
	Copied

Dentro você pode colocar o que quiser, por exemplo um título, um texto, uma imagem, etc.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<dialog id="id">
    <h1>Título</h1>
    <p>Texto</p>
    <img src="path" alt="Texto alternativo"/>
</dialog>
	
	Copied

Para que se abra o diálogo, pode-se colocar um botão dentro de um script.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<dialog id="dialog">
    <h1>Título</h1>
    <p>Texto</p>
    <img src="path" alt="Texto alternativo"/>
</dialog>
 
<button id="open">
    Abrir
</button>
 
<script>
    window.open.addEventListener("click", () => {
        window.dialog.showModal();
    });
</script>
	
	Copied

Formulários

Para criar um formulário, fazemos isso com a tag form, dentro desta tag colocamos os campos do formulário. O atributo action indica para onde o formulário será enviado. O atributo method indica o método de envio, podendo ser get ou post. O atributo name indica o nome do formulário, isso é útil para o JavaScript.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<form action="path" method="post" name="name">
</form>
	
	Copied

Agrupamento de elementos

Com a etiqueta fieldset pode-se agrupar elementos de um formulário. Dentro desta etiqueta colocam-se os elementos do formulário. O atributo legend indica o título do grupo de elementos.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<form action="path" method="post" name="name">
    <fieldset>
        <legend>Título</legend>
    </fieldset>
</form>
	
	Copied

Rótulo

Com a etiqueta label cria uma legenda para um elemento do formulário. O atributo for indica o id do elemento do formulário ao qual se refere.

A seguir-se coloca o elemento do formulário, por exemplo input.

É necessário especificar o type, que pode ser do tipo text, email, password, number, date, time, color, range, file, checkbox, radio, submit, reset, button, hidden.

Se o input deve ser introduzido obrigatoriamente, pode-se adicionar o atributo required.

Se o usuário já havia inserido um valor no input, por meio do atributo autocomplete pode-se indicar que ele seja preenchido automaticamente.

Com o atributo pattern pode-se especificar uma expressão regular para validar o input. Por exemplo, para validar se o e-mail ou telefone estão corretos.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<form action="path" method="post" name="name">
    <fieldset>
        <legend>Título</legend>
 
        <label for="id">Nombre:</label>
        <input type="text" id="id" name="name" placeholder="Nombre" required autocomplete="on"/>
        
    </fieldset>
</form>
	
	Copied

Outra maneira de especificar o input de uma label é colocar o input dentro da label. Agora não é necessário o atributo for porque se entende que a label se refere ao input que está dentro.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<form action="path" method="post" name="name">
    <fieldset>
        <legend>Título</legend>
 
        <label>Nombre:
            <input type="text" id="id" name="name" placeholder="Nombre" required/>
        </label>
        
    </fieldset>
</form>
	
	Copied

Selecionar

Com a etiqueta select cria uma lista suspensa. Dentro desta etiqueta, colocam-se as opções da lista suspensa com a etiqueta option. O atributo value indica o valor da opção. O atributo selected indica a opção que está selecionada por padrão.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<form action="path" method="post" name="name">
    <fieldset>
        <legend>Título</legend>
 
        <label>Nombre:
            <input type="text" id="id" name="name" placeholder="Nombre" required/>
        </label>
 
        <label>País:
            <select name="country">
                <option value="es">España</option>
                <option value="fr">Francia</option>
                <option value="it" selected>Italia</option>
            </select>
        </label>
        
    </fieldset>
</form>
	
	Copied

Em caso de ter muitas opções, pode-se usar a tag datalist para criar uma lista de opções. Dessa forma, quando o usuário começa a digitar uma das opções da lista, são exibidas as opções que correspondem ao que foi digitado. Dentro dessa tag, as opções são colocadas com a tag option. O atributo value indica o valor da opção.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<form action="path" method="post" name="name">
    <fieldset>
        <legend>Título</legend>
 
        <label>Nombre:
            <input type="text" id="id" name="name" placeholder="Nombre" required/>
        </label>
 
        <label>País:
            <input type="text" list="countries" name="country"/>
            <datalist id="countries">
                <option value="es">España</option>
                <option value="fr">Francia</option>
                <option value="it">Italia</option>
            </datalist>
        </label>
        
    </fieldset>
</form>
	
	Copied

Enviar

Para enviar o formulário, usa-se a tag input com o atributo type="submit".

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<form action="path" method="post" name="name">
    <fieldset>
        <legend>Título</legend>
 
        <label>Nombre:
            <input type="text" id="id" name="name" placeholder="Nombre" required/>
        </label>
        
        <input type="submit" value="Enviar"/>
    </fieldset>
</form>
	
	Copied

Detalhes

Se quiser fazer seções de texto que normalmente estejam contraídas, como por exemplo uma seção de perguntas frequentes, podemos usar a tag details. Dentro desta tag colocamos a tag summary, que é o título da seção. E dentro da tag details colocamos o texto da seção.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<details>
    <summary>Título</summary>
    <p>Texto</p>
</details>
	
	Copied

Se quisermos que algum apareça por padrão, colocamos o atributo open.

	
		
			< >
			Input
		
		
			Python
			
		
	
	
		<details open>
    <summary>Título</summary>
    <p>Texto</p>
</details>
	
	Copied

Continuar lendo

Deep Research com LangGraph: Crie um Assistente de IA para Pesquisar Automaticamente

Aprenda como funcionam as redes neurais do zero com um exemplo prático de regressão linear. Tutorial passo a passo que explica neurônios artificiais, inicialização de parâmetros, funções de perda e erro quadrático médio (EQM) com código Python.

Elicitação MCP: Implementar Elicitação em Servidores com FastMCP e Python

Aprenda a implementar elicitação em servidores MCP (Model Context Protocol) com FastMCP. Tutorial completo passo a passo...

MCP Durabilidade: Servidor e Cliente com Persistência para Tarefas de Longa Duração

Aprenda a construir servidor e cliente MCP com durabilidade para tarefas de longa duração. Tutorial completo do Model Co...

Últimos posts -->

Você viu esses projetos?

Gymnasia

Horeca chatbot

Naviground

Ver todos os projetos -->

>_ Disponível para projetos

Tem um projeto com IA?

Vamos conversar.

maximofn@gmail.com

Especialista em Machine Learning e Inteligência Artificial. Desenvolvo soluções com IA generativa, agentes inteligentes e modelos personalizados.

Escreva-me LinkedIn

Quer assistir alguma palestra?

Agentes do Amanhã: Descifrando os Mistérios da Planificação, UX e Memória

Agentes de IA, impulsionados por LLMs, prometem transformar aplicações. Mas eles são meros executores hoje ou futuros colaboradores inteligentes? Para...

Crie sua própria inteligência Apple

Aprenda a criar um sistema de IA para executar eficientemente em um dispositivo

Últimas palestras -->

Quer melhorar com essas dicas?

Boas práticas criando agentes com Claude Code

Palestra técnica: skills, subagentes, slash commands e MCPs no Claude Code

o1 prompt engineering

Criar prompts melhores para o1 seguindo um exemplo

Memory profiler

Ver o uso de memória de um script

Últimos tips -->

Use isso localmente

Os espaços do Hugging Face nos permitem executar modelos com demos muito simples, mas e se a demo quebrar? Ou se o usuário a deletar? Por isso, criei contêineres docker com alguns espaços interessantes, para poder usá-los localmente, aconteça o que acontecer. Na verdade, se você clicar em qualquer botão de visualização de projeto, ele pode levá-lo a um espaço que não funciona.

Flow edit

FLUX.1-RealismLora

token_hmr

Ver todos os contêineres -->

>_ Disponível para projetos

Tem um projeto com IA?

Vamos conversar.

maximofn@gmail.com

Especialista em Machine Learning e Inteligência Artificial. Desenvolvo soluções com IA generativa, agentes inteligentes e modelos personalizados.

Escreva-me LinkedIn

Você quer treinar seu modelo com esses datasets?

short-jokes-dataset

HuggingFace

Dataset com piadas em inglês

Uso: Fine-tuning de modelos de geração de texto humorístico

231K linhas 2 colunas 45 MB

Ver no HuggingFace →

opus100

HuggingFace

Dataset com traduções de inglês para espanhol

Uso: Treinamento de modelos de tradução inglês-espanhol

1M linhas 2 colunas 210 MB

Ver no HuggingFace →

netflix_titles

HuggingFace

Dataset com filmes e séries da Netflix

Uso: Análise de catálogo Netflix e sistemas de recomendação

8.8K linhas 12 colunas 3.5 MB

Ver no HuggingFace →

Ver mais datasets -->

Comentários

Cabeça

Corpo

Etiquetas contenedoras

Cabeçalho

Navegação

Links

Principal

Rodapé

Seção

Artigo

Divisor

Listas não ordenadas ul

Listas ordenadas ol

Papel role

Etiquetas de conteúdo

Etiquetas multimédia

Otimização das imagens

Etiqueta img

Etiqueta figure

Tag video

Tag audio

Tag iframe

Etiqueta dialog

Formulários

Agrupamento de elementos

Rótulo

Selecionar

Enviar

Detalhes

Continuar lendo

Deep Research com LangGraph: Crie um Assistente de IA para Pesquisar Automaticamente

Elicitação MCP: Implementar Elicitação em Servidores com FastMCP e Python

MCP Durabilidade: Servidor e Cliente com Persistência para Tarefas de Longa Duração

Você viu esses projetos?

Tem um projeto com IA?

Quer assistir alguma palestra?

Agentes do Amanhã: Descifrando os Mistérios da Planificação, UX e Memória

Crie sua própria inteligência Apple

Quer melhorar com essas dicas?

Boas práticas criando agentes com Claude Code

o1 prompt engineering

Memory profiler

Use isso localmente

Tem um projeto com IA?

Você quer treinar seu modelo com esses datasets?

short-jokes-dataset

opus100

netflix_titles

Listas não ordenadas `ul`

Listas ordenadas `ol`

Papel `role`

Etiqueta `img`

Etiqueta `figure`

Tag `video`

Tag `audio`

Tag `iframe`

Etiqueta `dialog`