Etiquetas principales de HTML5
En esta ocasión me enfocare en mostrar las etiquetas principales de HTML5, estos elementos nos permitirán estructurar cualquier sitio web, no se deben tomar a la ligera ya que no es lo mismo utilizar un div para el contenido principal que utilizar la etiqueta hecho para esto, como lo es main, así que a continuación te mostrare cuales son los tags a los que debes prestar atención desde el inicio.
Diferencia entre una Etiqueta y una propiedad en HTML
En HTML5, una «etiqueta» (tag en inglés) se refiere a los elementos que se utilizan para crear la estructura y el contenido de una página web, como <p> para crear un párrafo o <img> para insertar una imagen.
Por otro lado, una «propiedad» (property en inglés) se refiere a los atributos que se utilizan para proporcionar información adicional sobre una etiqueta HTML. Por ejemplo, la etiqueta src para especificar la URL de la imagen que se va a mostrar en la página, o la propiedad alt para proporcionar un texto alternativo que se mostrará si la imagen no se puede cargar.
En resumen, mientras que las etiquetas HTML5 se utilizan para crear la estructura y el contenido de una página web, las propiedades se utilizan para proporcionar información adicional sobre esos elementos, como la URL de una imagen o el texto alternativo que se debe mostrar.
Caracteristicas de una Etiqueta en HTML5
Las etiquetas en HTML5 son elementos que se utilizan para crear la estructura y el contenido de una página web. Algunos usos y características comunes de las etiquetas HTML5 son:
- Crear la estructura básica de la página: Las etiquetas HTML5 se utilizan para crear la estructura básica de la página, incluyendo el encabezado (
<header>), el pie de página (<footer>), los menús de navegación (<nav>) y las secciones (<section>). - Dar formato al contenido: Las etiquetas HTML5 también se utilizan para dar formato al contenido de la página, incluyendo el texto (
<p>), las listas (<ul>,<ol>) y las tablas (<table>). - Insertar multimedia: Las etiquetas HTML5 se utilizan para insertar contenido multimedia en la página, incluyendo imágenes (
<img>), audio (<audio>) y video (<video>). - Crear formularios: Las etiquetas HTML5 se utilizan para crear formularios en la página, incluyendo campos de entrada de texto (
<input>), botones (<button>), áreas de texto (<textarea>) y menús desplegables (<select>). - Proporcionar información adicional: Las etiquetas HTML5 también se utilizan para proporcionar información adicional sobre el contenido de la página, como los enlaces (
<a>), las etiquetas meta (<meta>), y los datos estructurados (<script>).
En general, las etiquetas HTML5 proporcionan una forma estandarizada de crear y estructurar el contenido de una página web, lo que facilita la creación de sitios web bien organizados y accesibles para los usuarios.
Etiquetas principales
| Etiqueta | Descripción |
|---|---|
| <!DOCTYPE html> | Es una declaración que indica que el documento es un archivo HTML5. |
| <html> | Es el elemento principal que contiene todo el contenido de la página. |
| <head> | Contiene información sobre el documento, como el título, los enlaces a los estilos CSS y otros metadatos. |
| <meta> | Se utiliza para especificar información sobre el documento, como el juego de caracteres y la descripción del sitio web. |
| <title> | Define el título de la página que se muestra en la pestaña del navegador. |
| <body> | Contiene el contenido principal de la página web. |
| <header> | Representa la cabecera de la página web y suele contener el logotipo y la navegación. |
| <nav> | Se utiliza para crear la navegación del sitio web. |
| <section> | Define una sección del contenido de la página. |
| <article> | Define un contenido independiente en la página, como un artículo o un blog. |
| <aside> | Contiene contenido relacionado o complementario al contenido principal de la página. |
| <footer> | Representa el pie de página de la página web y suele contener información de contacto y derechos de autor. |
|
Se utilizan para definir los encabezados de la página. |
| <p> | Se utiliza para crear párrafos de texto. |
| <a> | Se utiliza para crear enlaces a otras páginas o recursos. |
| <img> | Se utiliza para insertar imágenes en la página. |
<ul> y <li> |
Se utilizan para crear listas no ordenadas. |
<ol> y <li> |
Se utilizan para crear listas ordenadas. |
|
Se utilizan para crear tablas. |
| <form> | Se utiliza para crear formularios para que los usuarios ingresen información. |
|
Se utilizan en conjunto con el elemento <form> para crear campos de entrada y botones en el formulario. |
Ejemplo utilizando las etiquetas principales
A continuación se muestra un ejemplo utilizando las etiquetas principales en HTML5, este es solo un ejemplo, podemos crear variaciones de este mismo ejemplo, cambiando la distribución o agregando mas elementos.
En este ejemplo, se utiliza el elemento header para crear el encabezado de la página, que incluye el logotipo y la navegación. El elemento nav se utiliza para crear la lista de enlaces de navegación. El contenido principal de la página se encuentra dentro del elemento section, que a su vez contiene un elemento article y un elemento aside. El elemento article se utiliza para el contenido principal de la página, mientras que el elemento aside se utiliza para contenido relacionado. El pie de página se crea con el elemento footer, que incluye información de derechos de autor. También se incluye un enlace a un archivo de estilos CSS en el elemento head.
Como has visto las etiquetas principales en HTML5 son muchas, y quizá pareciera abrumador ver demasiadas, lo cierto es que la idea es comenzar con las etiquetas principales, y conforme avanzas integraras etiquetas nuevas y las enriquecerás con CSS.
