Introducción a HTML: estructura básica, etiquetas y atributos
HTML, o lenguaje de marcado de hipertexto, es el lenguaje de marcado estándar para documentos diseñados para mostrarse en un navegador web. Es uno de los pilares fundamentales de la web y se utiliza para estructurar el contenido de las páginas web.
La estructura básica de un documento HTML comienza con la declaración del tipo de documento, que es . A esto le sigue la etiqueta HTML, que rodea todo el contenido de la página. Dentro de la etiqueta HTML tenemos dos partes principales: el encabezado y el cuerpo.
La etiqueta head contiene metainformación sobre el documento, como su título, enlaces a scripts y estilos, y otras cosas que no se muestran en la ventana del navegador. La etiqueta del cuerpo contiene el contenido principal que se muestra a los usuarios en la ventana del navegador.
Título de la página
Este es un título
Este es un párrafo.
Este es otro párrafo.
En el ejemplo anterior, tenemos una estructura básica de un documento HTML. La etiqueta de título define el título de la página, que se muestra en la barra de título o en la pestaña de página del navegador. La etiqueta h1 define un encabezado de nivel 1 y las etiquetas p definen párrafos.
Etiquetas y Atributos
Las etiquetas HTML son los componentes básicos de las páginas HTML. Una etiqueta HTML es una palabra clave encerrada entre corchetes angulares (< y >). La mayoría de las etiquetas HTML vienen en pares: la etiqueta de apertura y la etiqueta de cierre. La etiqueta de cierre es la misma que la etiqueta de apertura, pero con una barra diagonal (/) antes de la palabra clave.
Los atributos HTML proporcionan información adicional sobre los elementos. Siempre se especifican al principio de la etiqueta y vienen en pares de nombre/valor. Por ejemplo, la etiqueta img para insertar imágenes tiene atributos como src (para especificar la URL de la imagen), alt (para especificar el texto alternativo para la imagen), ancho y alto (para especificar el ancho y alto de la imagen) .< /p>
HTML semántico
HTML semántico es la práctica de utilizar la sintaxis HTML correcta para reforzar el significado del contenido de una página web, en lugar de solo para la presentación. El HTML semántico utiliza etiquetas HTML para describir con precisión su contenido. Por ejemplo, la etiqueta <b> se utiliza para negrita, mientras que <strong> se utiliza por importancia.
Las etiquetas semánticas no solo ayudan a los desarrolladores a comprender el contenido y la estructura de una página, sino que también son útiles para los motores de búsqueda y las tecnologías de asistencia, como los lectores de pantalla. Por ejemplo, utilizando el comando <header> para un encabezado de página, la opción <nav> para la navegación, el <main> para el contenido principal, el <artículo> para un artículo independiente, la <sección> para una sección de una página, la etiqueta <aside> para contenido lateral y el <pie de página> al pie de página.
En resumen, aprender la estructura básica de un documento HTML, comprender cómo usar etiquetas y atributos y aplicar HTML semántico son pasos fundamentales para convertirse en un desarrollador front-end eficaz.
