¿Qué es HTML y cómo funciona?
HTML (Hypertext Markup Language) es un lenguaje de marcas utilizado para crear páginas web. Funciona mediante el uso de etiquetas o marcas especiales que indican al navegador web cómo debe mostrar el contenido de una página.
Cada etiqueta tiene un significado específico, como indicar el encabezado de una sección, crear una lista, insertar una imagen, etc. El navegador interpreta estas etiquetas y muestra el contenido de la página de acuerdo con ellas.
Por ejemplo, la etiqueta <h1> indica que el contenido dentro de ella es un encabezado de primer nivel, mientras que la etiqueta <p> indica que el contenido dentro de ella es un párrafo de texto.
HTML permite la creación de estructura y semántica de contenido, no se encarga de la estética. Para darle estilo a una página HTML se utiliza CSS (Cascading Style Sheets)
¿Cómo se estructura un documento HTML?
Un documento HTML está estructurado en base a una serie de etiquetas que indican al navegador cómo debe mostrar el contenido. La estructura básica de un documento HTML consta de los siguientes elementos:
- La declaración doctype: es la primera línea del documento y indica al navegador qué versión de HTML está utilizando el documento.
- La etiqueta <html>: engloba todo el contenido del documento y indica al navegador que se está utilizando HTML.
- La etiqueta <head>: contiene información sobre el documento, como el título de la página que se muestra en la pestaña del navegador, metadatos y enlaces a hojas de estilo.
- La etiqueta <body>: contiene el contenido visible de la página, como texto, imágenes, enlaces y otros elementos.
- Dentro de la etiqueta <body> se suele dividir en varias secciones utilizando etiquetas como <header>, <nav>, <main>, <aside>, <footer> para darle semántica al contenido.
- Dentro de cada sección se utilizan etiquetas para dar formato al contenido como <p>, <h1>, <ul>, <ol>, <img>, <a> entre otras.
Este es un ejemplo básico de una estructura de un documento HTML:
Es importante recordar que HTML es un lenguaje de marcas, es decir no tiene ninguna sintaxis, sólo se utilizan etiquetas para dar sentido al contenido, por lo que la estructura puede variar dependiendo del diseño y contenido de la página.
¿Cuáles son las diferencias entre HTML, XHTML y HTML5?
- HTML (Hypertext Markup Language) es un lenguaje de marcas utilizado para crear páginas web. Es el estándar original para la creación de sitios web y es compatible con la mayoría de los navegadores web.
- XHTML (eXtensible Hypertext Markup Language) es una versión más estricta de HTML. Se basa en las mismas reglas que HTML, pero se adhiere a las normas de XML, lo que significa que el código debe cumplir con ciertas reglas de sintaxis, como cerrar todas las etiquetas y utilizar minúsculas.
- HTML5 es la última versión de HTML. Añade nuevas características y mejoras en comparación con las versiones anteriores. Incluye nuevos elementos semánticos para mejorar la accesibilidad y la organización del contenido, así como nuevas etiquetas para mejorar la compatibilidad con audio y video. Además, HTML5 permite el desarrollo de aplicaciones web sin la necesidad de utilizar otras tecnologías como JavaScript o Flash.
En resumen, HTML es la versión original de lenguaje de marcas, XHTML es una versión más estricta y HTML5 es la versión más reciente con mejoras y nuevas funcionalidades.
¿Cómo se crean enlaces y imágenes en HTML?
Para crear un enlace en HTML se utiliza la etiqueta <a> (anchor).
Donde «url» es la dirección a la que apuntará el enlace y «horizonraid.com» como se aprecia en el ejemplo a continuacion es el texto que se mostrará al usuario. Por ejemplo, para crear un enlace a horizonraid.com:
Para insertar una imagen en HTML se utiliza la etiqueta <img>.
Donde «url» es la dirección donde se encuentra la imagen y «descripción de la imagen» es una descripción de la imagen que se mostrará al usuario si la imagen no se puede cargar. Por ejemplo, para insertar una imagen llamada «imagen.jpg» desde la misma carpeta:
Es importante mencionar que la etiqueta <img> no tiene una etiqueta de cierre, ya que no contiene contenido, sólo se utiliza para mostrar la imagen.
¿Cómo se utilizan las etiquetas div y span en HTML?
La etiqueta <div> (division) es utilizada para dividir una página HTML en secciones lógicas. Se utiliza para agrupar elementos con un propósito específico y para aplicar estilos mediante hojas de estilo en cascada (CSS). Por ejemplo, se puede utilizar una etiqueta <div> para agrupar todos los elementos de un encabezado o un pie de página. La sintaxis para utilizar una etiqueta <div> es la siguiente:
La etiqueta <span> es similar a <div> pero es utilizada para agrupar contenido dentro de una línea. A diferencia de <div>, <span> no crea una nueva línea y no tiene ningún efecto en la presentación del contenido. Se utiliza para aplicar estilos a un fragmento de texto dentro de un párrafo. La sintaxis para utilizar una etiqueta <span> es la siguiente:
En resumen, <div> se utiliza para dividir una página en secciones y aplicar estilos a esas secciones, mientras que <span> se utiliza para agrupar contenido dentro de una línea y aplicar estilos a ese contenido específico.