Comentarios
Para añadir un comentario a un html, se utiliza el siguiente código:
<!-- Comentario -->Copied
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>Copied
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>Copied
Dentro se crean dos contenedores más, el de head y el de body
<!DOCTYPE html><html lang="es"><head></head><body></body></html>Copied
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 seguir 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 responsive 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 una 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>Copied
Body
Hay etiquetas contenedoras que ayudan a crear una estructura 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>Copied
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>Copied
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>Copied
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>Copied
Por lo tanto, en otra parte de la página se tiene que poner un contenedor con el atributo id="id".
<div id="id"></div>Copied
Si el enlace es un correo electrónico, se pone el atributo href="mailto:email".
<a href="mailto:email">Email</a>Copied
Si el enlace es un teléfono, se pone el atributo href="tel:phone".
<a href="tel:phone">Teléfono</a>Copied
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>Copied
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>Copied
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>Copied
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>Copied
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>Copied
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>Copied
Listas no ordenadas ul
Dentro de main se pueden haber listas no ordenadas, cada ítem 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>Copied
Listas ordenadas ol
Dentro de main se pueden haber listas ordenadas, cada ítem 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>Copied
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>Copied
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>Copied
Si se quiere que el orden de la lista vaya en orden inverso, se pone el atributo reversed.
<ol reversed><li></li></ol>Copied
Si queremos que un list item tenga un valor, se pone el atributo value="number".
<ol><li value="2"></li></ol>Copied
Rol role
Cada una de las etiquetas que hemos visto antes tiene 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>Copied
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 más ligeras. 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"/>Copied
El atributo alt donde se indica el texto alternativo.
<img src="path" alt="Texto alternativo"/>Copied
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 qué trata la imagen.
<img src="path" alt="Texto alternativo" title="Título"/>Copied
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"/>Copied
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/>Copied
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"/>Copied
**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 inicio 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>Copied
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>Copied
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>Copied
Si el vídeo está en varios formatos, la fuente hay que ponerla dentro de una etiqueta llamada source, ahí se indican las distintas posibles fuentes del vídeo. 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>Copied
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>Copied
Pero para no molestar al usuario podemos hacer que se reproduzca sin sonido, para ello se pone el atributo muted.
<video src="path" autoplay muted></video>Copied
Si queremos que el video se reproduzca en bucle, se pone el atributo loop.
<video src="path" autoplay muted loop></video>Copied
Esto es muy útil para poner un video 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>Copied
Etiqueta audio
Para reproducir audio se usa la etiqueta audio, para ello se usa el atributo src.
<audio src="path"></audio>Copied
Para que aparezcan los controles de reproducción se pone el atributo controls.
<audio src="path" controls></audio>Copied
Si queremos que el audio se reproduzca automáticamente, se pone el atributo autoplay.
<audio src="path" autoplay></audio>Copied
Si queremos que el audio se reproduzca en bucle, se pone el atributo loop.
<audio src="path" autoplay loop></audio>Copied
Si queremos que el audio se reproduzca en bucle, se pone el atributo loop.
<audio src="path" autoplay loop></audio>Copied
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>Copied
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>Copied
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>Copied
Para que se abra el cuadro de diálogo, se puede poner un botón dentro 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>Copied
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>Copied
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>Copied
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 obligatoriamente, 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>Copied
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>Copied
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>Copied
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>Copied
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>Copied
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>Copied
Si queremos que alguno aparezca por defecto, se pone el atributo open.
<details open><summary>Título</summary><p>Texto</p></details>Copied
