Fundamentos de HTML: Etiquetas, Atributos y Estructura Web
Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones
Escrito el en 
español con un tamaño de 12 KB
¿Qué es HTML y para qué sirve?
HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), y no de “Hyper Text Media Language” como a veces se confunde. Se trata de un lenguaje documental que se emplea para definir la estructura y el contenido de las páginas web que visualizamos en un navegador.
Es fundamental entender que HTML no es un lenguaje de programación. Su función principal es la de maquetar y organizar elementos como textos, sonidos e imágenes, permitiendo combinarlos a nuestro gusto. Además, una de sus características más potentes es la capacidad de crear enlaces de hipertexto, que nos permiten navegar hacia otras páginas o recursos.
Características Principales de HTML
- Compatibilidad de navegadores: El resultado visual de una página puede variar ligeramente dependiendo del navegador utilizado (por ejemplo, Chrome, Firefox, Edge), aunque los estándares actuales buscan minimizar estas diferencias.
- Extensiones de archivo: Los documentos HTML utilizan las extensiones
.htmlo.htm. - Evolución y dinamismo: Para crear sitios web dinámicos e interactivos, HTML se complementa con otras tecnologías. A menudo, un documento HTML contiene elementos de CSS (para el estilo visual) y JavaScript (un lenguaje de programación para la interactividad).
Sintaxis Básica: Etiquetas y Atributos
Los elementos del lenguaje HTML se construyen mediante etiquetas (tags), que pueden tener atributos y contenido.
- Un elemento generalmente consta de una etiqueta de inicio (ej:
<p>) y una etiqueta de cierre (ej:</p>). - El contenido del elemento se ubica entre ambas etiquetas.
- Los atributos se especifican dentro de la etiqueta de inicio y proporcionan información adicional sobre el elemento.
La sintaxis general es: <nombre-etiqueta atributo="valor">Contenido</nombre-etiqueta>.
Es importante destacar que HTML no distingue entre mayúsculas y minúsculas (case-insensitive). Por ejemplo, <P> y <p> son interpretados de la misma forma. Sin embargo, el estándar y la buena práctica recomiendan escribir siempre las etiquetas en minúsculas.
Atributos HTML
La mayoría de los atributos se definen como pares nombre-valor, separados por un signo igual (=). Aunque en algunos casos el valor podría no llevar comillas, la práctica recomendada (y obligatoria en XHTML/XML) es encerrar siempre el valor entre comillas dobles (") para unificar el código y evitar errores.
Catálogo de Etiquetas y Atributos Esenciales
A continuación, se detallan algunas de las etiquetas y atributos más comunes en HTML.
Estructura del Documento
<html>- Delimita y engloba toda la página web. Atributos como
lang(idioma) odir(sentido del texto) definen características globales. Suele contener una cabecera (<head>) y un cuerpo (<body>). <head>- Contiene información administrativa y metadatos sobre el documento que no son visibles directamente en la página.
<body>- Define el cuerpo del documento, es decir, todo el contenido visible de la página web.
<title>- Especifica el título de la página, que se muestra en la pestaña del navegador y en los resultados de búsqueda.
<base href="url">- Establece la URL base o raíz del sitio web para todas las rutas relativas en el documento.
<meta>- Proporciona metadatos sobre el documento. Algunos atributos comunes son:
<meta name="keywords" content="...">: Palabras clave para los motores de búsqueda.<meta name="description" content="...">: Descripción de la página.<meta name="author" content="...">: Autor del contenido.<meta name="copyright" content="...">: Información sobre derechos de autor.<meta name="distribution" content="...">: Indica el destino o audiencia del contenido.
Formato de Texto y Contenido
<h1>a<h6>- Definen seis niveles de encabezados o títulos, siendo
<h1>el de mayor importancia y<h6>el menor. <p>- Define un párrafo de texto. El atributo
align(obsoleto) permitía alinearlo (center,right,left). <br>- Inserta un salto de línea simple. Es una etiqueta vacía, no tiene cierre.
<hr>- Crea una línea horizontal de separación, útil para dividir secciones de contenido.
<b>o<strong>- Aplican formato de negrita al texto. Se prefiere
<strong>por su valor semántico (indica importancia). <i>o<em>- Aplican formato de cursiva. Se prefiere
<em>por su valor semántico (indica énfasis). <font>- (Obsoleta) Solía usarse para definir la fuente, tamaño y color del texto con atributos como
face,sizeycolor. Hoy en día, todo el estilo debe gestionarse con CSS.
Nota sobre entidades HTML: Para representar caracteres especiales, se usan códigos como á para la 'á' o ñ para la 'ñ'.
Listas
<ul>- Crea una lista no ordenada (con viñetas). Los elementos de la lista se definen con
<li>. El atributotype(obsoleto) permitía cambiar la forma de la viñeta. <ol>- Crea una lista ordenada (numerada). Los elementos también se definen con
<li>. <dl>- Define una lista de definiciones, que contiene términos (
<dt>) y sus correspondientes descripciones (<dd>).
Enlaces (Hipervínculos)
<a>- La etiqueta de ancla o enlace. Su atributo principal es
href, que especifica el destino del vínculo. - Tipos de destinos en
href:- Vincular a otra página del sitio:
<a href="pagina.html">Texto</a> - Vincular a un marcador en la misma página:
<a href="#marcador">Texto</a> - Vincular a otra página web:
<a href="https://www.ejemplo.com">Texto</a> - Crear un enlace para enviar un correo electrónico:
<a href="mailto:[email protected]?subject=asunto&[email protected]">Enviar correo</a> - Vincular a un fichero para su descarga:
<a href="archivo.xxx">Descargar archivo</a>
- Vincular a otra página del sitio:
<a name="x">- (Obsoleto) Creaba un marcador o ancla dentro de la página. La forma moderna es usar el atributo
iden cualquier elemento (ej:<h2 id="x">). target- Atributo de la etiqueta
<a>que especifica dónde abrir el enlace:_self: En la misma ventana (comportamiento por defecto)._blank: En una nueva ventana o pestaña._top: En el marco superior (elimina todos los frames).
Imágenes
<img>- Inserta una imagen en la página. Es una etiqueta vacía. Sus atributos principales son:
src="archivo.xxx": Especifica la ruta del archivo de imagen. La imagen debe estar accesible desde la ubicación de la página.alt="texto": Proporciona un texto alternativo que se muestra si la imagen no carga y es crucial para la accesibilidad y el SEO.title="título": Muestra un texto emergente cuando el usuario pasa el ratón sobre la imagen.width="x"yheight="x": Definen la anchura y altura de la imagen en píxeles.border="x": (Obsoleto) Añadía un borde negro. Se debe hacer con CSS.align="top, middle, bottom": (Obsoleto) Alineaba la imagen con respecto al texto circundante. Se debe gestionar con CSS.
Tablas
Las tablas se utilizan para mostrar datos tabulares de forma organizada.
<table>- Define la tabla.
<caption>- Añade un título o leyenda a la tabla.
<tr>- Define una fila (table row) en la tabla.
<td>- Define una celda de datos (table data) dentro de una fila.
<th>- Define una celda de encabezado (table header). El texto suele aparecer en negrita y centrado por defecto.
<thead>,<tbody>,<tfoot>- Agrupan semánticamente las filas de la cabecera, el cuerpo y el pie de la tabla, respectivamente.
Atributos de Tablas (Muchos Obsoletos)
Aunque muchos de estos atributos siguen funcionando, la práctica moderna es controlarlos mediante CSS.
border="x"- Define el grosor del borde de la tabla.
cellspacing="x"- Controla el espacio entre las celdas.
cellpadding="x"- Controla el espacio entre el borde de la celda y su contenido.
width="x ó x%"yheight="x ó x%"- Definen el ancho y alto de la tabla o celdas (en píxeles o porcentaje).
align="tipo"yvalign="tipo"- Controlan la alineación horizontal y vertical del contenido de las celdas.
colspan="x"yrowspan="y"- Atributos de
<td>o<th>que permiten combinar celdas, expandiéndolas a lo largo de 'x' columnas o 'y' filas. <colgroup>y<col>- Permiten agrupar y aplicar estilos a una o más columnas de la tabla. El atributo
span="nº de columnas"en<col>aplica el estilo a varias columnas.
Atributos Globales y de Estilo (Obsoletos)
Estos atributos se aplicaban directamente en etiquetas como <body> o <table>, pero han sido reemplazados por CSS para una mejor separación de la estructura y la presentación.
bgcolor="color"- Establecía el color de fondo de un elemento.
bordercolor="color"- Definía el color del borde.
background="imagen.xxx"- Establecía una imagen de fondo.
link,vlink,alink- Atributos de
<body>para definir el color de los enlaces: no visitado (link="#FF0000"), ya visitado (vlink="#F10034") y activo (alink="#003456"). style="código"- Atributo que permite añadir estilos CSS directamente en línea a un elemento, aunque se prefiere usar hojas de estilo externas.