Código HTML para empezar a crear una página web
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
Etiquetas básicas
| Función | Etiqueta |
| Indica que la versión del documento es HTML5. Esta se coloca antes del contenedor principal <html>. | <!DOCTYPE html> |
| Etiqueta principal que contiene todo el sitio web | <html> </html> |
| Es el primer hijo de la etiqueta html y contiene información necesaria (metadatos) para el navegador pero no se visualiza en la página web | <head> </head> |
| Es el segundo hijo de la etiqueta html y contiene toda la información que los visitantes ven en la página web | <body> </body> |
| Aporta información acerca del sitio web | <meta> |
| Nombre del sitio web en la pestaña del navegador | <title> </title> |
| Enlaza un archivo .js o escribe el código JavaScript propiamente en el documento HTML | <script> </script> |
| Permite establecer relaciones entre el documento actual y otros recursos externos, como hojas de estilo, íconos de favicon, fuentes web y archivos de manifiesto de aplicaciones web, entre otros. Se coloca dentro del elemento head. | <link |
Etiquetas de estilos a textos
| Función | Etiqueta |
| Colocar un texto en negrita. | <b> |
| Colocar un texto en cursiva. | <i> |
| Colocar un texto subrayado. | <u> |
Etiquetas y atributos relacionados con tablas
| Función | Etiqueta |
| Hacer que una celda ocupe varias columnas. | colspan="" |
| Hacer que una celda ocupe varias filas. | rawspan="" |
Atributos generales
| Función | Atributo |
| Identificador único de un elemento | id=" " |
| Especifica la URL donde se encuentra el elemento que queremos enlazar. Se utiliza principalmente con las etiquetas img, script, iframe y audio. Cuando se utiliza con la etiqueta script, el navegador carga y ejecuta el archivo JavaScript referenciado. | src=" " |
| Especifica la ubicación del elemento que queremos enlazar. Se utiliza principalmente con las etiquetas a, link y base. Cuando se utiliza con la etiqueta link, el navegador carga y aplica la hoja de estilos CSS referenciada. | href=" " |
| Definir la relación entre el documento HTML y el recurso enlazado. | rel=" " |
Atributos para etiquetas del HEAD
| Función | Atributo |
| Codificación de caracteres universal (se usa con la etiqueta meta) | charset="utf-8" |
| Describe el sitio web (se usa con la etiqueta meta) | name="description" content="" |
| Autoriza a los motores de búsqueda a indexar tu sitio web en sus búsquedas (se usa con la etiqueta meta). En caso de querer hacer lo contrario debes cambiar follow por unfollow. | name="robots" content="index,follow" |
| Adaptar el diseño de la página web a diferentes tamaños de pantalla y resoluciones. Se usa con la etiqueta meta. | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| Indica el idioma de la página web (se usa para la etiqueta html) | lang=" " |
Adaptar contenido según la pantalla con meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Explicación
width=device-width Establece el ancho de la ventana gráfica al ancho del dispositivo en el que se está visualizando la página. Esto permite que el diseño se ajuste correctamente al ancho del dispositivo.
initial-scale=1.0 Establece el nivel de zoom inicial al cargar la página. Un valor de 1.0 significa que no hay zoom aplicado, y la página se muestra al 100% de su tamaño.
Etiquetas para estructurar el contenido
| Función | Etiqueta |
| Crea la cabecera del documento. | <header> </header> |
| Permite definir un menú de navegación. | <nav> </nav> |
| Permite definir la sección principal del documento.Debe usarse una vez por página y debe contener el contenido único y específico de esa página, excluyendo elementos comunes como la navegación, el encabezado, el pie de página y los paneles laterales. | <main> </main> |
| Crea una sección. | <section> </section> |
| Permite representar contenido autocontenido e independiente dentro de un documento o aplicación web. Este contenido debe tener sentido por sí mismo y ser separable del resto del contenido de la página. | <article> </article> |
| Permite definir el pie de página del documento. | <footer> </footer> |
Etiquetas de texto
| Función | Etiqueta |
| Crea un texto de encabezado de primer nivel (se recomienda usarlo solo una vez). | <h1> </h1> |
| Crea encabezados de segundo nivel o subtítulos principales. | <h2> </h2> |
| Crea encabezados de tercer nivel e inferiores a este. Se utiliza para dividr aún más el nivel jerárquico de los subtítulos del documento. Solo puedes llegar hasta <h6> </h6> | <h3> </h3> |
| Crea texto de tipo párrafo. | <p> </p> |
| Crea una lista desordenada, es decir, una lista cuyos elementos que contendrá no requieren de un orden. Las viñetas predefinidas son puntos de color negro. | <ul> </ul> |
| Crea una lista ordenada, es decir, una lista cuyos elementos que contendrá van a tener un orden. Las viñetas predefinidas son números que empiezan desde el 1. | <ol> </ol> |
| Añade un elemento a una lista bien sea ordenada o desordenada. | <li> </li> |
| Se define como el elemento ancla y crea enlaces o hipervínculos hacia diferentes partes del documento (inclusive archivos) o hacia otras partes en sitios web externos. Se utiliza con href para definir la ruta o ubicación hacia donde debe llevar al navegante. | <a> </a> |
Etiquetas y atributos audiovisuales
| Función | Atributo |
| Inserta una imagen en el sitio web. Para definir la ubicación de la imagen se usa el atributo src=" " | <img/> |
| Permite dar accesibilidad a la imagen ya que hay tecnologías de asistencia que describen estas imágenes en voz. Muestra el texto colocado en este atributo cuando no se logra cargar la imagen y sirve para mejorar el SEO ya que proporciona información acerca de la imagen a los motores de búsqueda. | alt=" " |
| El propósito de esta etiqueta es mejorar la estructura semántica del documento al insertar imágenes y facilitar la presentación y estilización del contenido relacionado. Aunque es posible presentar imágenes y otros elementos multimedia sin la etiqueta. | <figure> </figure> |
| Permite proporcionar una leyenda o descripción para el contenido incluido dentro del elemento figure. | <figcaption> </figcaption> |
| Permite incrustar videos. Entre la etiqueta de inicio y la de cierre puede haber un texto para el caso en que el navegador no sea capaz de reproducir ningún formato de video especificado en la etiqueta source. | <video> </video> |
| Se especifica la fuente del video. Se pueden usar varias etiquetas source para especificar diferentes formatos de video y que el navegador reproduzca el primero con el que es compatible. | <source> |
| Permite incrustar audios. Entre la etiqueta de inicio y la de cierre puede haber un texto para el caso en que el navegador no sea capaz de reproducir ningún formato de audio especificado en la etiqueta source. | <audio> </audio> |
| Atributo que permite que al usuario se le muestre los controles del reproductor. Este va dentro de la etiqueta video. Se coloca dentro de la etiqueta del video o audio. | controls |
| Atributo para mutear el archivo multimedia. Este va dentro de la etiqueta video. Se coloca dentro de la etiqueta del video o audio. | muted |
| Atributo para reproducir automáticamente el archivo multimedia. Este va dentro de la etiqueta video. Se coloca dentro de la etiqueta del video o audio. | autoplay |
| Atributo para reproducir en bucle el archivo multimedia. Este va dentro de la etiqueta video. Se coloca dentro de la etiqueta del video o audio | loop |
| Especificar el video como formato mp4. Este va dentro de la etiqueta source | type="video/mp4" |
| Especificar el video como formato ogg. Este va dentro de la etiqueta source | type="video/ogg" |
| Especificar el audio como formato ogg. Este va dentro de la etiqueta source | type="audio/ogg" |
| Especificar el audio como formato mp3. Este va dentro de la etiqueta source | type="audio/mpeg" |
| Este atributo permite proporcionar una sugerencia al navegador sobre cómo descargar o cargar previamente el contenido multimedia (bien sea video o audio) antes de que el usuario lo reproduzca. Puede tener los valores none (indica que no se debe cargar previamente), metadata (indica que solo se deben de cargar previamente los metadatos del archivo) y auto (indica que el navegador debe cargar previamente el contenido multimedia cuando la página se carga, si lo considera apropiado). | preload=" " |
Otros atributos
| Función | Atributo |
| Si se usa en la etiqueta "label", especifica a qué elemento "input" está vinculada | for="" |
Ejemplo de etiqueta lang
El siguiente código especifica que la página está en idioma español
<html lang="es"> </html>
Responsive design
| Propiedad | Función |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Se utiliza para controlar la forma en que un sitio web o aplicación web se muestra en dispositivos móviles y otros dispositivos con diferentes tamaños de pantalla. |
| width:device-width | Significa que el ancho de la página será igual al ancho de la pantalla que tiene el dispositivo desde donde se está viendo la página. |
| initial-scale=1.0 | La escala inicial es 1. |
| user-scalable=no | El usuario no podrá hacer más grande la página mediante el uso de sus dedos en la pantalla del dispositivo móvil para intentar ampliar la vista o acercarla. |
| maximum-scale=1.0 | La escala máxima es 1. |
| minimum-scale=1.0 | La escala mínima es 1. |
Comentarios