HTML
Comentarios
Para añadir un comentario a un html, se utiliza el siguiente código:
<!-- Comentario -->
Head
El html tiene que empezar con una etiqueta !DOCTYPE que indica al navegador la versión de html, con poner html el navegador entiende que es la 5
<!DOCTYPE html>
A continuación se tiene que poner un contenedor con la etiqueta html con un atributo llamado lang que indica el idioma con el que se ha escrito la página
<!DOCTYPE html>
<html lang="es">
</html>
Dentro se crean dos contenedores más, el de head y el de body
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
En el contenedor head va todo lo que el navegador necesita para poder cargar, mientras que en el body va todo lo que se va a ver en la página
Una de las etiquetas del head es meta que lleva un atributo llamado charset que indica el tipo de codificación del texto, normalmente es utf-8, utf-16.
Otro tipo de meta es el name="description" que es una descripción para los navegadores. Es importante para el SEO.
Otro tipo de meta es el name="robots" que es para los robots de los buscadores e indica si se puede segui la página o no.
Otro atributo del head es title que indica el título que se ve en la pestaña.
Otro meta es name="viewport" que es para el responsible design.
Otra meta es name="theme-color" que es para el color de la barra de navegación.
Otra meta es el favicon que es el icono que se ve en la pestaña. Se escribe con la etiqueta link y el atributo type y href="path".
Unas etiquetas muy importantes para el SEO son todas las relacionadas con Open Graph que son las que se ven cuando se comparte un enlace en las redes sociales. Para esto un página muy útil es open graph, donde pones tu enlace y te dice cómo se vería en cada red social. Estas metas son
property="og:title" que es el título que se ve en las redes sociales.
property="og:description" que es la descripción que se ve en las redes sociales.
property="og:image" que es la imagen que se ve en las redes sociales.
property="og:image:alt" que es el texto alternativo de la imagen que se ve en las redes sociales.
Hay una etiqueta para el CSS que es link
En la página de Open Graph se pueden ver todas las etiquetas que se pueden poner en el head.
Otra etiqueta importante para el SEO es link rel="alternate" que es para indicar que hay una versión alternativa de la página, por ejemplo en otro idioma.
Otra etiqueta importante para el SEO es link rel="canonical" que es para indicar que hay una versión canónica de la página, por ejemplo en otro idioma.
Con las etiquetas style y script se puede escribir CSS y JavaScript en el 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>
Body
Hay etiquetas contenedoras que ayudan a crear una estructuran y llevan más etiquetas dentro. Y hay etiquetas contenedoras que son las que contienen el texto, imágenes, etc.
Etiquetas contenedoras
Header
Esta es la etiqueta para describir el header
<!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>
Navegación
Con la etiqueta nav se crea la navegación. Dentro de esta etiqueta se pueden poner enlaces con la etiqueta a y se puede poner un logo con la etiqueta 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>
Enlaces
Como en la navegación, los enlaces se crean con la etiqueta a y llevan un atributo href="path" que indica el enlace al que lleva el enlace. También llevan un atributo target="_blank" que indica que se abre en una nueva pestaña. Ademmás se puede poner el atributo rel="noreferer" que indica que no se pasa información de la página de la que viene el enlace.
<a href="path" target="_blank">Enlace</a>
Si el enlace es un enlace a una sección de la página, se pone el atributo href="#id".
<a href="#id">Enlace</a>
Por lo que en otra parte de la página se tiene que poner un contenedor con el atributo id="id".
<div id="id">
</div>
Si el enlace es un correo electrónico, se pone el atributo href="mailto:email".
<a href="mailto:email">Email</a>
Si el enlace es un teléfono, se pone el atributo href="tel:phone".
<a href="tel:phone">Teléfono</a>
Si lo que quieres es poner un enlace para abrir WhatsApp, se pone el atributo href="https://wa.me/phone".
<a href="https://wa.me/phone">WhatsApp</a>
Main
Esta es la etiqueta para describir el 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>
Footer
Esta es la etiqueta para describir el footer
<!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>
Section
Dentro de main se pueden hacer secciones
<!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>
Article
Dentro de main se pueden haber artículos
<!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
Cuando se nos han acabado las etiquetas semánticas, se puede utilizar la etiqueta div que es un contenedor 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 no ordenadas ul
Dentro de main se pueden haber listas no ordenadas, cada item de la lista tiene que tener la etiqueta 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 se pueden haber listas ordenadas, cada item de la lista tiene que tener la etiqueta 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>
Se puede cambiar el tipo de orden de la lista con el atributo type="a" para letras, type="i" para números romanos, type="1" para números arábigos.
<ol type="a">
<li></li>
</ol>
Si se quiere que el orden de la lista empiece en un número en concreto, se pone el atributo start="number".
<ol start="2">
<li></li>
</ol>
Si se quiere que el orden de la lista vaya en orden inverso, se pone el atributo reversed.
<ol reversed>
<li></li>
</ol>
Si queremos que un list item tenga un valor, se pone el atributo value="number".
<ol>
<li value="2"></li>
</ol>
Rol role
Cada una de las etiquetas que hemos visto antes tienen un rol, pero se puede cambiar el rol de cada una de ellas con la etiqueta role="rol".
<!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>
Etiquetas de contenido
Para crear un nuevo párrafo utilizamos la etiqueta <p></p>. Para darle énfasis a algo dentro de un párrafo podemos pensar en usar negrita (<b></b>), pero es mejor usar la etiqueta <strong></strong>, ya que la etiqueta b está deprecada
Para crear un título tenemos las etiquetas h1, h2, h3, h4, h5, h6.
Para crear hipervínculos se usa la etiqueta a, el atributo href indica la dirección del hipervínculo. Si se pone una almohadilla # no se refresca la página
Etiquetas multimedia
Las etiquetas multimedia no tienen etiqueta de apertura y cierre, por ejemplo la etiqueta img no se escribe como <img></img> sino como <img/>. Esto es porque se reemplaza por una imagen. Por lo que en general las etiquetas reemplazables no tienen etiqueta de cierre.
Existen dos tipos de imágenes
- Lossy (con pérdida): Estas imágenes pierden la calidad, pero son menos pesadas. jpg, jpeg
- Lossless (sin pérdida): Estas imágenes no pierden la calidad, pero son muy pesadas. gif, png-8, png-24, svg
Optimización de las imágenes
El tamaño promedio debe ser de 70 kB
Etiqueta img
Página para descargar imágenes gratuitas por internet pexels
La etiqueta img tiene el atributo src donde se indica la fuente.
<img src="path"/>
El atributo alt donde se indica el texto alternativo.
<img src="path" alt="Texto alternativo"/>
El atributo title donde se indica el título de la imagen, que sirve para que cuando dejemos el ratón encima de la imagen aparezca el título, también sirve para el SEO, para que los buscadores sepan de que trata la imagen.
<img src="path" alt="Texto alternativo" title="Título"/>
También podemos poner el atributo width y height para indicar el tamaño de la imagen, pero es mejor no ponerlo y dejar que el navegador lo calcule
<img src="path" alt="Texto alternativo" title="Título" width="100" height="100"/>
Con el atributo hidden se puede ocultar la imagen. Lo cual es muy útil para cuando queremos que una imagen aparezca después de que el usuario haga una acción. Así con el JavaScript podemos quitar el atributo hidden y la imagen aparecerá.
<img src="path" alt="Texto alternativo" title="Título" hidden/>
Para que las páginas se carguen más rápido, se puede poner el atributo loading="lazy" que hace que la imagen se cargue cuando el usuario se acerca a ella.
<img src="path" alt="Texto alternativo" title="Título" loading="lazy"/>
Importante! No hay que poner el atributo
loading="lazy"en las imágenes que son importantes para el SEO, como por ejemplo el logo. Ni tampoco en las imágenes que están al inicion de la página web porque si no se verá un parpadeo
Etiqueta figure
Esta etiqueta nos permite crear un contenedor para la imagen, por ejemplo nos permite añadir una descripción, para ello se necesita usar la etiqueta figcapture
<figure>
<img src="path" alt="Texto alternativo" title="Título"/>
<figcaption>Descripción</figcaption>
</figure>
Etiqueta video
Con esta etiqueta se pueden añadir vídeos, para ello se usa el atributo src. Para que aparezcan los botones de reproducción hay que poner el atributo controls. El último atributo es preload="auto", esto es para que el vídeo se empiece a descargar cuando se empieza a cargar la página, así cuando lo va a reproducir el usuario ya tiene mucho cargado y tardará menos en reproducirse.
<video src="path" controls preload="auto">
</video>
Si quieres que empiece a reproducirse en un minuto determinado, en src justo después de la fuente hay que poner #t=xx,yy
<video src="path#t=1,2" controls>
</video>
Si el video está en varios formatos, la fuente hay que ponerla dentro de una etiqueta llamada source, ahí se indican las distintas posibles fuentes del video. El navegador decidirá qué fuente usar. Esto es porque hay navegadores que reproducen mejor unos vídeos u otros
<video controls>
<source src="path" type="video/mp4"/>
<source src="path" type="video/webm"/>
</video>
Si no queremos que haya controles de reproducción y que el video se reproduzca automáticamente, se pone el atributo autoplay.
<video src="path" autoplay>
</video>
Pero para no molestar al usuario podemo hacer que se reproduzca sin sonido, para ello se pone el atributo muted.
<video src="path" autoplay muted>
</video>
Si queremos que el video se reproduzca en bucle, se pone el atributo loop.
<video src="path" autoplay muted loop>
</video>
Esto es muy útil para poner un vídeo de fondo en una página web.
Para cambiar la imagen del vídeo cuando no se está reproduciendo, se pone el atributo poster="path".
<video src="path" autoplay muted loop poster="path">
</video>
Etiqueta audio
Para reproducir audio se usa la etiqueta audio, para ello se usa el atributo src.
<audio src="path">
</audio>
Para que aparezcan los controles de reproducción se pone el atributo controls.
<audio src="path" controls>
</audio>
Si queremos que el audio se reproduzca automáticamente, se pone el atributo autoplay.
<audio src="path" autoplay>
</audio>
Si queremos que el audio se reproduzca en bucle, se pone el atributo loop.
<audio src="path" autoplay loop>
</audio>
Si queremos que el audio se reproduzca en bucle, se pone el atributo loop.
<audio src="path" autoplay loop>
</audio>
Etiqueta iframe
Cuando compartimos un vídeo de youtube nos da la opción de copiar el código. Esto genera un código html que tiene la etiqueta iframe. Esta etiqueta sirve para incrustar contenido de otras páginas web.
<iframe src="path">
</iframe>
Hemos hablado de la página de youtube, pero podríamos incrustar cualquier página. Aunque hay algunas páginas que no permiten esto.
Etiqueta dialog
Habrás visto que mucha gente en sus portfolios pone sus proyectos y cuando pinchas en él se te abre un cuadro de diálogo con más información, o en galerías de imágenes cuando pinchas en una imagen se te abre un cuadro de diálogo con la imagen más grande. Esto se hace con la etiqueta dialog.
<dialog>
</dialog>
Dentro puedes poner lo que quieras, por ejemplo un título, un texto, una imagen, etc.
<dialog id="id">
<h1>Título</h1>
<p>Texto</p>
<img src="path" alt="Texto alternativo"/>
</dialog>
Para que se abra el cuadro de diálogo, se puede poner un botón dentr de un 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>
Formularios
para crear un formulario lo hacemos con la etiqueta form, dentro de esta etiqueta se ponen los campos del formulario. El atributo action indica a dónde se envía el formulario. El atributo method indica el método de envío, puede ser get o post. El atributo name indica el nombre del formulario, esto es útil para el JavaScript.
<form action="path" method="post" name="name">
</form>
Agrupación de elementos
Con la etiqueta fieldset se pueden agrupar elementos de un formulario. Dentro de esta etiqueta se ponen los elementos del formulario. El atributo legend indica el título del grupo de elementos.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
</fieldset>
</form>
Label
Con la etiqueta label se crea una etiqueta para un elemento del formulario. El atributo for indica el id del elemento del formulario al que hace referencia.
A continuación se pone el elemento del formulario, por ejemplo input.
Hay que especificar el type, que puede ser de tipo text, email, password, number, date, time, color, range, file, checkbox, radio, submit, reset, button, hidden.
Si el input hay que introducirlo obligatorioamente, se puede añadir el atributo required.
Si el usuario ya había introducido un valor en el input, mediante el atributo autocomplete se puede indicar que se rellene automáticamente.
Con el atributo pattern se puede especificar una expresión regular para validar el input. Por ejemplo para validar si el correo o el teléfono son correctos.
<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>
Otra manera de especificar el input de una label es poner el input dentro de la label. Ahora no es necesario el atributo for porque se entiende que la label hace referencia al input que está dentro.
<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>
Select
Con la etiqueta select se crea un desplegable. Dentro de esta etiqueta se ponen las opciones del desplegable con la etiqueta option. El atributo value indica el valor de la opción. El atributo selected indica la opción que está seleccionada por defecto.
<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>
En caso de tener muchas opciones, se puede usar la etiqueta datalist para crear una lista de opciones, de esta manera, cuando el usuario va escribiendo una de las opciones de la lista, se le van mostrando las opciones que coinciden con lo que ha escrito. Dentro de esta etiqueta se ponen las opciones con la etiqueta option. El atributo value indica el valor de la opción.
<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
Para enviar el formulario se usa la etiqueta input con el atributo type="submit".
<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>
Details
Si se quieren hacer secciones de texto que normalmente estén contraidas, como por ejemplo una sección de preguntas frecuentes, podemos usar la etiqueta details. Dentro de esta etiqueta se pone la etiqueta summary que es el título de la sección. Y dentro de la etiqueta details se pone el texto de la sección.
<details>
<summary>Título</summary>
<p>Texto</p>
</details>
Si queremos que alguno aparezca por defecto, se pone el atributo open.
<details open>
<summary>Título</summary>
<p>Texto</p>
</details>
