Guía completa de elementos HTML: estructura, sintaxis y ejemplos

Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones

Escrito el 4 de Mayo de 2024 en español con un tamaño de 6,48 KB

HTML5: La nueva generación de HTML

Introducción a HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para la creación de páginas web. HTML5 es la última versión, que introduce nuevos elementos, atributos y comportamientos, permitiendo la creación de sitios web y aplicaciones más diversas y potentes.

Comentarios

Los comentarios en HTML se utilizan para añadir notas o explicaciones dentro del código fuente. No son visibles en el navegador y se utilizan para mejorar la legibilidad y comprensión del código.

Sintaxis de comentarios:

Elementos HTML

Los elementos HTML son los componentes básicos de una página web. Están identificados por marcas o etiquetas, que definen el significado y la estructura del contenido.

Sintaxis de etiquetas:

Las etiquetas se escriben en minúsculas.
Están compuestas por un nombre rodeado de corchetes angulares (< >).
Hay una etiqueta de apertura y una de cierre (por ejemplo, <p> y </p>).
Algunos elementos son vacíos y no tienen etiqueta de cierre (por ejemplo, <br>).

Aspectos clave de HTML

Las etiquetas HTML marcan el contenido, indicando su significado.
Los navegadores no muestran las etiquetas, sino que las utilizan para procesar el contenido.
Las etiquetas están estructuradas en forma de árbol, con elementos anidados dentro de otros.

Entidades de caracteres

Existen caracteres reservados en HTML que se reemplazan por entidades de caracteres. Comienzan con el símbolo & y terminan con el símbolo ;.

Estructura y sintaxis de un documento HTML

Declaración DOCTYPE:

<!DOCTYPE html>

Identifica el tipo de documento que va a procesar el navegador.

Elemento raíz <html>:

Contiene todo el contenido de la página.

Elemento <head>:

Incluye información no visible en la representación de la página, como el título, la hoja de estilos, etc.

Elemento <body>:

Contiene el contenido visible de la página.

Atributos

Los atributos proporcionan información adicional sobre los elementos HTML.

Sintaxis de atributos:

Un espacio entre el atributo y el nombre del elemento.
El nombre del atributo va seguido por un signo de igual.
Los valores del atributo suelen llevar comillas.
Todos los elementos HTML pueden tener atributos.
Los atributos siempre se codifican en la etiqueta de inicio.

Atributos globales:

class: Agrupa elementos para aplicar estilos.
contenteditable: Permite editar el contenido del elemento.
hidden: Oculta el elemento en el navegador.
id: Identifica el elemento de manera única en el documento.
lang: Determina el idioma del contenido.
spellcheck: Activa la revisión ortográfica y gramatical.
style: Asigna estilos al elemento.
tabindex: Define el orden de selección de elementos con la tecla Tab.
title: Especifica información adicional al elemento.
translate: Indica si el elemento debe ser traducido o no.

Elementos HTML comunes

Elemento <body>

Delimita la sección que contiene los elementos visibles de la página.

Tipos de elementos:

Elementos de bloque:

Se posicionan uno debajo del otro.
Forman un bloque y ocupan todo el ancho disponible.
Pueden contener otros elementos de bloque o en línea.

Ejemplos de elementos de bloque:

<address>: Información de contacto.
<article>: Sección autónoma de contenido.
<aside>: Contenido relacionado o complementario.
<blockquote>: Cita de otra fuente.
<details>: Elemento plegable con contenido adicional.
<dialog>: Ventana de diálogo interactiva.
<div>: Contenedor genérico.
<dl>: Lista de definición.
<dt>: Término en una lista de definición.
<dd>: Definición de un término.
<figure>: Contenido con imágenes, gráficos, etc.
<figcaption>: Descripción para el contenido de <figure>.
<footer>: Pie de página.
<header>: Cabecera de un documento o sección.
<hr>: Línea horizontal.
<li>: Elemento de lista.
<main>: Contenido principal de la página.
<nav>: Sección de navegación.
<p>: Párrafo de texto.
<pre>: Texto preformateado.
<section>: Sección lógica o temática.
<form>: Formulario para recopilar datos.
<fieldset>: Agrupa elementos de formulario.
<table>: Tabla con filas, columnas y celdas.

Elementos en línea:

Se posicionan uno al lado del otro.
No generan saltos de línea.
Se utilizan para dar formato al texto dentro de un elemento de bloque.

Ejemplos de elementos en línea:

<a>: Enlace a otra página.
<abbr>: Abreviatura.
<b>: Texto en negrita.
<br>: Salto de línea.
<cite>: Referencia a una obra citada.
<code>: Código fuente.
<del>: Texto eliminado.
<dfn>: Palabra o frase definida.
<em>: Texto con énfasis.
<i>: Texto en cursiva.
<iframe>: Marco o ventana incrustada.
<ins>: Texto añadido.
<kbd>: Entrada de teclado.
<mark>: Texto resaltado.
<q>: Cita en línea.
<s>: Texto tachado.
<samp>: Salida de programas o comandos.
<small>: Texto en tamaño pequeño.
<span>: Aplicar estilos al texto.
<strong>: Texto resaltado.
<sub>: Texto subíndice.
<sup>: Texto superíndice.
<time>: Fecha u hora.
<var>: Variable.

Conclusión

HTML es un lenguaje fundamental para el desarrollo web. Conocer los elementos y la estructura de HTML es esencial para crear páginas web bien formadas y semánticamente correctas.

Entradas relacionadas:

Etiquetas: