HTML
Comentários
Este caderno foi traduzido automaticamente para torná-lo acessível a mais pessoas, por favor me avise se você vir algum erro de digitação..
Para adicionar um comentário a um html, o código a seguir é usado:
<!-- Comentario -->
Cabeça
O html deve começar com uma tag !DOCTYPE que informa ao navegador a versão do html; ao colocar html, o navegador entende que ele é 5
<!DOCTYPE html>
Em seguida, é necessário colocar um contêiner com a tag html com um atributo chamado lang indicando o idioma em que a página está escrita.
<!DOCTYPE html>
<html lang="es">
</html>
Mais dois contêineres são criados dentro dele, um para head e outro para body.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
O contêiner head contém tudo o que o navegador precisa para carregar, enquanto o corpo contém tudo o que será exibido na página.
Uma das tags head é meta, que contém 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 SEO.
Outro tipo de meta é o name="robots", que se destina aos robôs dos mecanismos de pesquisa e indica se a página pode ser rastreada ou não.
Outro atributo do head é o title, que indica o título que você vê na guia.
Outra meta é name="viewport", que se refere ao design responsável.
Outra meta é name="theme-color", que se refere à cor da barra de navegação.
Outro objetivo é o favicon, que é o ícone que você vê na guia. Ele é escrito com a tag link e o atributo type e href="path".
Algumas tags muito importantes para SEO são todas aquelas relacionadas ao Open Graph, que são as que são vistas quando um link é compartilhado em redes sociais. Para isso, uma página muito útil é a open graph, onde você coloca seu link e ela informa como ele será visto em cada rede social. Esses objetivos são
property="og:title"` que é o título que você vê nas mídias sociais.
property="og:description" que é a descrição que você vê nas mídias sociais.
property="og:image"` que é a imagem vista na mídia social.
property="og:image:alt"` que é o texto alternativo da imagem vista nas mídias sociais.
Há uma tag para o CSS que é link.
Na página [Open Graph] (https://ogp.me/), você pode ver todas as tags que podem ser colocadas no head.
Outra tag importante para SEO é link rel="alternate", que indica que há uma versão alternativa da página, por exemplo, em outro idioma.
Outra tag importante para SEO é link rel="canonical", que indica que há uma versão canônica da página, por exemplo, em outro idioma.
Com as tags style e script, você pode escrever CSS e JavaScript no html.
<!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>
Corpo
Há tags de contêiner que ajudam a criar uma estrutura e carregam mais tags dentro delas. E há tags de contêiner que contêm o texto, as imagens etc.
Rótulos de contêineres
Header
Essa é a tag para descrever o cabeçalho.
<!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>
Navegação
Com a tag nav, a navegação é criada. Dentro dessa tag, os links podem ser colocados com a tag a e um logotipo pode ser colocado com a tag img.
<!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>
Links
Assim como na navegação, os links são criados com a tag a e possuem um atributo href="path" que indica o link para o qual o link leva. Eles também têm um atributo target="_blank" que indica que o link será aberto em uma nova guia. Além disso, um atributo rel="noreferer" pode ser adicionado para indicar que nenhuma informação é passada da página da qual o link provém.
<a href="path" target="_blank">Enlace</a>
Se o link for um link para uma seção da página, o atributo href="#id" será definido.
<a href="#id">Enlace</a>
Portanto, em outra parte da página, é necessário colocar um contêiner com o atributo id="id".
<div id="id">
</div>
Se o link for um e-mail, o atributo href="mailto:email" será definido.
<a href="mailto:email">Email</a>
Se o link for um telefone, o atributo href="tel:phone" será definido.
<a href="tel:phone">Teléfono</a>
Se você quiser colocar um link para abrir o WhatsApp, coloque o atributo href="https://wa.me/phone".
<a href="https://wa.me/phone">WhatsApp</a>
Principal
Essa é a tag para descrever o main.
<!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>
Rodapé
Essa é a tag para descrever o "rodapé".
<!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>
Seção
Em main você pode criar seções
<!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>
Artigo
Dentro de main pode haver itens
<!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>
Divisor
Quando não houver mais tags semânticas, podemos usar a tag div, que é um contêiner genérico.
<!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>
Listas não ordenadas ul
Dentro de main pode haver listas não ordenadas, cada item da lista deve ter a tag li.
<!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>
Listas ordenadas ol
Dentro de main pode haver listas ordenadas, cada item da lista deve ter a tag li.
<!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>
Você pode alterar a ordem de classificação da lista com o atributo type="a" para letras, type="i" para algarismos romanos, type="1" para algarismos arábicos.
<ol type="a">
<li></li>
</ol>
Se quiser que a ordem da lista comece em um número específico, defina o atributo start="number".
<ol start="2">
<li></li>
</ol>
Se você quiser que a ordem da lista seja inversa, defina o atributo reversed.
<ol reversed>
<li></li>
</ol>
Se quisermos que um item da lista tenha um valor, definimos o atributo value="number".
<ol>
<li value="2"></li>
</ol>
Listas ordenadas ol
Cada uma das tags vistas acima tem uma função, mas você pode alterar a função de cada uma delas com a tag role="role".
<!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>
Tags de conteúdo
Para criar um novo parágrafo, usamos a tag <p></p>. Para dar ênfase a algo em um parágrafo, podemos pensar em usar negrito (<b></b>), mas é melhor usar a tag <strong></strong>, pois a tag <b está obsoleta.
Para criar um título, temos as tags h1, h2, h3, h4, h5, h6.
A tag a é usada para criar hiperlinks, o atributo href indica o endereço do hiperlink. Se você colocar um bloco #, a página não será atualizada.
Tags multimídia
As tags de mídia não têm tags de abertura e fechamento; por exemplo, a tag img não é escrita como <img></img>, mas como <img/>. Isso ocorre porque ela é substituída por uma imagem. Portanto, em geral, as tags substituíveis não têm uma tag de fechamento.
Há dois tipos de imagens
- Lossy: Essas imagens perdem qualidade, mas são mais leves. jpg, jpeg
- Sem perdas: essas imagens não perdem qualidade, mas são muito pesadas. gif, png-8, png-24, svg
Otimização de imagens
O tamanho médio deve ser de 70 kB
- [Tiny PNG] (https://tinypng.com/): aumenta o tamanho da imagem
- Verexif: Remover metadados da imagem
img tag
Site de download de imagens on-line gratuito pexels
A tag img tem um atributo src que indica a fonte.
<img src="path"/>
O atributo alt em que o texto alternativo é indicado.
<img src="path" alt="Texto alternativo"/>
O atributo title, no qual é indicado o título da imagem, é usado para que, ao passarmos o mouse sobre a imagem, o título apareça, e também é usado para o SEO, para que os mecanismos de pesquisa saibam do que se trata a imagem.
<img src="path" alt="Texto alternativo" title="Título"/>
Também podemos definir os atributos width e height para indicar o tamanho da imagem, mas é melhor não defini-los e deixar que o navegador os calcule.
<img src="path" alt="Texto alternativo" title="Título" width="100" height="100"/>
Com o atributo hidden, você pode ocultar a imagem. Isso é muito útil quando queremos que uma imagem apareça depois que o usuário realizar uma ação. Assim, com o JavaScript, podemos remover o atributo hidden e a imagem aparecerá.
<img src="path" alt="Texto alternativo" title="Título" hidden/>
Para acelerar o carregamento das páginas, é possível definir o atributo loading="lazy", que faz com que a imagem seja carregada quando o usuário se aproxima dela.
<img src="path" alt="Texto alternativo" title="Título" loading="lazy"/>
Não coloque o atributo
loading="lazy"em imagens que sejam importantes para SEO, como o logotipo, por exemplo. Nem em imagens que estejam na parte superior da página da Web, caso contrário você verá uma oscilação.
figure tag
Essa tag permite criar um contêiner para a imagem, por exemplo, permite adicionar uma descrição; para isso, é necessário usar a tag figcapture.
<figure>
<img src="path" alt="Texto alternativo" title="Título"/>
<figcaption>Descripción</figcaption>
</figure>
video tag
Com essa tag, você pode adicionar vídeos, usando o atributo src. Para que os botões de reprodução apareçam, o atributo controls deve ser usado. O último atributo é preload="auto", para que o vídeo comece a ser baixado quando a página começar a ser carregada, de modo que, quando ele for reproduzido, o usuário já tenha muito conteúdo carregado e a reprodução leve menos tempo.
<video src="path" controls preload="auto">
</video>
Se quiser que ele comece a ser reproduzido em um determinado minuto, em src, logo após a fonte, você deve colocar #t=xx,yy.
<video src="path#t=1,2" controls>
</video>
Se o vídeo estiver em vários formatos, a fonte deverá ser colocada dentro de uma tag chamada source, que indica as diferentes fontes possíveis do vídeo. O navegador decidirá qual fonte usar. Isso ocorre porque alguns navegadores reproduzem alguns vídeos melhor do que outros.
<video controls>
<source src="path" type="video/mp4"/>
<source src="path" type="video/webm"/>
</video>
Se não quisermos que os controles de reprodução e o vídeo sejam reproduzidos automaticamente, definimos o atributo autoplay.
<video src="path" autoplay>
</video>
Mas, para não incomodar o usuário, podemos fazer com que ele seja reproduzido sem som, definindo o atributo muted.
<video src="path" autoplay muted>
</video>
Se quisermos que o vídeo seja repetido, definimos o atributo loop.
<video src="path" autoplay muted loop>
</video>
Isso é muito útil para colocar um vídeo no plano de fundo de uma página da Web.
Para alterar a imagem do vídeo quando ele não estiver sendo reproduzido, o atributo poster="path" é definido.
<video src="path" autoplay muted loop poster="path">
</video>
audio tag
Para reproduzir áudio, é usada a tag audio, para a qual é usado o atributo src.
<audio src="path">
</audio>
O atributo controls é definido para exibir os controles de reprodução.
<audio src="path" controls>
</audio>
Se quisermos que o áudio seja reproduzido automaticamente, definimos o atributo autoplay.
<audio src="path" autoplay>
</audio>
Se quisermos que o áudio seja repetido, definimos o atributo loop.
<audio src="path" autoplay loop>
</audio>
Se quisermos que o áudio seja repetido, definimos o atributo loop.
<audio src="path" autoplay loop>
</audio>
iframe tag
Quando compartilhamos um vídeo do YouTube, ele nos dá a opção de copiar o código. Isso gera um código html que tem a tag iframe. Essa tag é usada para incorporar conteúdo de outros sites.
<iframe src="path">
</iframe>
Falamos sobre a página do YouTube, mas podemos incorporar qualquer página. Embora existam algumas páginas que não permitem isso.
Label dialog
Você já deve ter visto que muitas pessoas colocam seus projetos em seus portfólios e, quando você clica neles, obtém uma caixa de diálogo com mais informações, ou em galerias de imagens, quando você clica em uma imagem, obtém uma caixa de diálogo com uma imagem maior. Isso é feito com a tag dialog.
<dialog>
</dialog>
Dentro dele, você pode colocar o que quiser, por exemplo, um título, um texto, uma imagem etc.
<dialog id="id">
<h1>Título</h1>
<p>Texto</p>
<img src="path" alt="Texto alternativo"/>
</dialog>
Para abrir a caixa de diálogo, um botão pode ser colocado em um script.
<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>
Formulários
Para criar um formulário, usamos a tag form; dentro dessa 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, que pode ser get ou post. O atributo name indica o nome do formulário, o que é útil para JavaScript.
<form action="path" method="post" name="name">
</form>
Agrupamento de elementos
Com a tag fieldset você pode agrupar elementos de um formulário. Os elementos do formulário são colocados dentro dessa tag. O atributo legend indica o título do grupo de elementos.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
</fieldset>
</form>
Label
A tag label cria um rótulo para um elemento de formulário. O atributo for indica o ID do elemento de formulário ao qual se refere.
Em seguida, você coloca o elemento do formulário, por exemplo, input.
Deve ser especificado o type, que pode ser do tipo text, email, password, number, date, time, color, range, file, checkbox, radio, submit, reset, button, hidden.
Se a entrada input tiver que ser inserida, o atributo required poderá ser adicionado.
Se o usuário já tiver inserido um valor no input, o atributo autocomplete poderá ser usado para indicar que ele deve ser preenchido automaticamente.
Com o atributo pattern, você pode especificar uma expressão regular para validar a input. Por exemplo, para validar se o e-mail ou o número de telefone está correto.
<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>
Outra forma de especificar o input de um label é colocar o input dentro do label. Agora não há necessidade do atributo for porque o label é entendido como referência ao input dentro dele.
<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>
Selecionar
Com a tag select, é criado um menu suspenso. Dentro dessa tag, as opções do drop-down são colocadas com a tag option. O atributo value indica o valor da opção. O atributo selected indica a opção que é selecionada por padrão.
<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>
Se você tiver muitas opções, poderá usar a tag datalist para criar uma lista de opções, de modo que, quando o usuário digitar uma das opções da lista, serão mostradas as opções que correspondem ao que ele digitou. Dentro dessa tag, as opções são colocadas com a tag option. O atributo value indica o valor da opção.
<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>
Enviar
A tag input com o atributo type="submit" é usada para enviar o formulário.
<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>
Detalhes
Se quiser criar seções de texto que normalmente são recolhidas, como uma seção de FAQ, você pode usar a tag details. Dentro dessa tag, coloque a tag summary, que é o título da seção. E dentro da tag details você coloca o texto da seção.
<details>
<summary>Título</summary>
<p>Texto</p>
</details>
Se quisermos que qualquer um deles apareça por padrão, definimos o atributo open.
<details open>
<summary>Título</summary>
<p>Texto</p>
</details>
