Lenguaje de Etiquetas de Hipertexto

HTML: Lenguaje de etiquetas de hipertexto

HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).

"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).

HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos" especiales como <head>, <title>, , <body><header>, , <footer><article>, , <section><p>, , <div><span>, , <img><aside>, , <audio><canvas>, , <datalist><details>, , <embed><nav>, <output> (en-US), , <progress><video>, , <ul><ol>, <li> y muchos otros.

Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeado por "<" y ">". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <title> se puede escribir como <Title>, <TITLE> o de cualquier otra forma.

Definiciones y ejemplos de cómo y cuándo usar estos elementos HTML:

  1. <head>: Contiene metadatos/información para el navegador y no es visible para el usuario. Incluye elementos como <title>, enlaces a CSS, scripts.
    • Uso: Para incluir scripts, estilos o metadatos.
    • Ejemplo: <head><title>Mi página web</title></head>
  2. <title>: Define el título de la página, que se muestra en la pestaña del navegador.
    • Uso: Para darle un nombre a tu página web en la pestaña del navegador.
    • Ejemplo: <title>Mi Blog Personal</title>
  3. <body>: Contiene todo el contenido de una página web que es visible para el usuario.
    • Uso: Para incluir todo el contenido que quieres que los usuarios vean y con el que interactúen.
    • Ejemplo: <body><h1>Hola Mundo</h1></body>
  4. <header>: Se utiliza para introducir el contenido de la página o de una sección. A menudo contiene logos, títulos o barras de navegación.
    • Uso: Para la cabecera de una página web o sección.
    • Ejemplo: <header><h1>Mi Blog</h1></header>
  5. <footer>: Define el pie de página de un documento o sección. A menudo contiene información de contacto, derechos de autor y enlaces a políticas de privacidad.
    • Uso: Para el pie de página de tu sitio web.
    • Ejemplo: <footer><p>Derechos reservados 2024</p></footer>
  6. <article>: Se utiliza para contenido independiente y autocontenido. Es útil para posts de blog, artículos de noticias, etc.
    • Uso: Para artículos o posts que tienen sentido por sí solos.
    • Ejemplo: <article><h2>Título del Artículo</h2><p>Contenido...</p></article>
  7. <section>: Define una sección dentro de un documento, como capítulos, encabezados, pies de página o cualquier otra sección del documento.
    • Uso: Para organizar el contenido en secciones lógicas.
    • Ejemplo: <section><h2>Introducción</h2><p>Texto...</p></section>
  8. <p>: Representa un párrafo de texto.
    • Uso: Para texto que forma un bloque de contenido.
    • Ejemplo: <p>Esto es un párrafo de ejemplo.</p>
  9. <div>: Un contenedor genérico para contenido de flujo, sin significado semántico. Útil para estilizar con CSS o agrupar elementos para manipulaciones con JavaScript.
    • Uso: Cuando necesitas un contenedor sin un significado semántico específico.
    • Ejemplo: <div><p>Un párrafo dentro de un div.</p></div>
  10. <span>: Un contenedor en línea para texto o elementos, sin significado semántico. Útil para aplicar estilos o identificar partes del texto.
    • Uso: Para estilizar o identificar partes específicas del texto.
    • Ejemplo: <p>Este es un texto con <span>palabras destacadas</span>.</p>
  11. <img>: Representa una imagen.
    • Uso: Para incluir imágenes.
    • Ejemplo: <img src="imagen.jpg" alt="Descripción de la imagen">
  12. <aside>: Define un contenido indirectamente relacionado con el contenido principal, como barras laterales, llamadas a la acción, o publicidad.
    • Uso: Para contenido relacionado pero no esencial al contenido principal.
    • Ejemplo: <aside>Esto es una barra lateral.</aside>
  13. <audio>: Utilizado para incrustar contenido de audio.
    • Uso: Para incluir archivos de audio.
    • Ejemplo: <audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
  14. <canvas>: Permite dibujar gráficos mediante scripting (usualmente JavaScript).
    • Uso: Para gráficos, juegos o cualquier otro tipo de dibujos generados dinámicamente.
    • Ejemplo: <canvas id="miCanvas"></canvas>
  1. <datalist>: Proporciona un conjunto de opciones predefinidas para otros controles (como <input>).
    • Uso: Para ofrecer una lista de opciones predefinidas a los usuarios mientras escriben.
    • Ejemplo: <input list="browsers"><datalist id="browsers"><option value="Chrome"></datalist>
  2. <details>: Crea un widget que el usuario puede abrir y cerrar para revelar contenido adicional.
    • Uso: Para proporcionar detalles adicionales que el usuario puede elegir ver u ocultar.
    • Ejemplo: <details><summary>Más Información</summary><p>Detalles aquí.</p></details>
  3. <embed>: Se utiliza para incrustar contenido (como una página web, un vídeo, o un objeto de audio) dentro de un documento HTML.
    • Uso: Para incrustar contenido externo.
    • Ejemplo: <embed type="image/jpg" src="imagen.jpg" width="300" height="200">
  4. <nav>: Se utiliza para definir una sección de navegación dentro de la página. Esto podría incluir menús, tablas de contenido, o enlaces a otras páginas.
    • Uso: Para la navegación principal o secundaria dentro del sitio.
    • Ejemplo: <nav><ul><li><a href="#">Inicio</a></li></ul></nav>
  5. <output>: Representa el resultado de un cálculo o de la acción de un usuario.
    • Uso: Para mostrar resultados de formularios o cálculos.
    • Ejemplo: <output name="resultado">42</output>
  6. <progress>: Muestra el progreso de una tarea. No indica cuánto de la tarea se ha completado, solo que está en progreso.
    • Uso: Para indicar el progreso de una tarea.
    • Ejemplo: <progress value="70" max="100"></progress>
  7. <video>: Para incrustar contenido de video.
    • Uso: Para añadir videos.
    • Ejemplo: <video controls><source src="video.mp4" type="video/mp4"></video>
  8. <ul>: Define una lista no ordenada.
    • Uso: Para listas de ítems sin un orden específico.
    • Ejemplo: <ul><li>Item 1</li><li>Item 2</li></ul>
  9. <ol>: Define una lista ordenada.
    • Uso: Para listas de ítems con un orden específico.
    • Ejemplo: <ol><li>Primer ítem</li><li>Segundo ítem</li></ol>
  10. <li>: Representa un ítem dentro de una lista (<ul>, <ol>).
    • Uso: Para cada ítem de una lista.
    • Ejemplo: <ul><li>Item de una lista no ordenada</li></ul>
Estos elementos son la base para estructurar y organizar contenido en la web, cada uno con su propósito específico para mejorar la accesibilidad y la comprensión del sitio por parte de los usuarios y los motores de búsqueda.

Comenta abajo: ¿Donde puedes encontrar el HTML de esta página en el navegador Chrome?

¿Donde puedes encontrar el HTML de esta página en el navegador Chrome?

Comenta ¿Donde se puede ver el código HTML de esta página?

Entra o regístrate para unirte a la conversación.

Únete a la discusión

0 comentarios

Activos: 0
Se el primerito en dejar un comentario
Loading
Alguien está escribiendo
Tu comentario estará disponible tan pronto como sea revisado por el moderador.
No Name
Set
This is the actual comment. It's can be long or short. And must contain only text information.
Edited
No Name
Set
This is the actual comment. It's can be long or short. And must contain only text information.
Edited
Cargar Mas
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Cargar Más