Lenguaje de Marcado de Hipertexto HTML

Hablemos de HTML

HTML, o Lenguaje de Marcado de Hipertexto («HyperText Markup Language» en inglés), es el estándar utilizado para estructurar y presentar contenido en la web. Fue inventado por Tim Berners-Lee en 1991 mientras trabajaba en el CERN, la Organización Europea para la Investigación Nuclear. Él lo desarrolló con el objetivo de facilitar el intercambio de información entre científicos mediante documentos interconectados. HTML permite la creación de documentos que pueden contener enlaces (hipervínculos), y estos enlaces permiten a los usuarios navegar (dirigirse) de una página a otra sin esfuerzo.

Desde 1997, HTML ha sido mantenido y desarrollado por el World Wide Web Consortium (W3C) como un estándar oficial, lo que asegura que cualquier página web escrita en HTML sea accesible y utilizable en todos los navegadores compatibles. Con HTML, podemos estructurar un documento web con diversos elementos como párrafos, encabezados, listas, tablas, y formularios, además de incorporar imágenes, videos y enlaces, ofreciendo una experiencia interactiva y dinámica a los usuarios.

Estructura de un HTML

El documento HTML se estructura de una forma basada en etiquetas que básicamente dan instrucciones diferentes al navegador, de tal manera que este sepa que va en cada parte del documento.

<etiqueta>Contenido</etiqueta>
<!-- Comentario -->
<etiqueta atributo="valor">

Evolución de HTML

[wpdatachart id=1]

A continuación mostraremos los elementos (Etiquetas) que forman el Lenguaje de Marcado de Hipertexto

Algunas Etiquetas HTML

Etiquetas de Estructura Básica

Etiqueta	Descripción
`<!DOCTYPE html>`	Define el tipo de documento y la versión de HTML que se está utilizando.
`<html>`	Envuelve todo el contenido del documento HTML.
`<head>`	Contiene metadatos, enlaces a scripts, hojas de estilo, y definiciones del documento.
`<title>`	Define el título del documento que aparece en la pestaña del navegador.
`<body>`	Contiene el contenido visible de la página web, como texto, imágenes, enlaces, etc.
`<!-- Comments` `-->`	Representa un Comentario en la Web. No es visible desde el renderizado

<!DOCTYPE html>
<html>
<!-- head tag -->
<head>
  <!-- Header Content -->
  <title>REP98 Example</title>
</head>
<!-- Body tag -->
<body>
  <!-- Body Content -->
</body>
</html>

Etiquetas de la cabecera o metadatos

Etiqueta	Descripción
`<meta>`	Proporciona metadatos como el conjunto de caracteres, descripción y palabras clave.
`<link>`	Enlaza recursos externos como hojas de estilo.
`<script>`	Incluye o referencia código JavaScript.
`<style>`	Define estilos CSS dentro del documento.
`<base>`	Define la URL base para los enlaces relativos.
`<noscript>`	Contenido alternativo para navegadores sin soporte de scripts.

<!DOCTYPE html>
<html>
<!-- head tag -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REP98 Example</title>
  <link rel="canonical" href="https://vzlaweb.com/" />
  <base href="https://example.com" target="_blank">
  <script src="myscript.js"></script>
  <link rel="stylesheet" href="mystyles.css">
  <style>
    body { background-color: #FEFEFE; color: #1A1A1A; }
  </style>
</head>
<!-- Body tag -->
<body>
  <noscript>Este sitio necesita Javascript</nosript>
  <!-- Body Content -->
</body>
</html>

Etiquetas de Encabezados y Estructura de Texto

Etiquetas	Descripción
`<h1>` a `<h6>`	Define encabezados de diferentes niveles (h1 es el más importante).
`<p>`	Define un párrafo de texto.
`<br>`	Inserta un salto de línea.
`<hr>`	Inserta una línea horizontal (separador temático).
`<pre>`	Muestra texto pre formateado (conserva espacios y saltos de línea).
`<blockquote>`	Define una cita larga (bloque de texto).
`<q>`	Define una cita corta (en línea).
`<cite>`	Indica una cita, el título de una obra (libro, película, etc.).
`<abbr>`	Define una abreviatura o acrónimo.
`<address>`	HTML 2.0,Define información de contacto.
`<time>`	Define una fecha u hora.
`<code>`	Muestra texto como código de programación.
`<var>`	Define una variable en un contexto de programación.
`<samp>`	Muestra texto como salida de un programa.
`<kbd>`	Indica entrada de teclado.
`<sub>`	Define texto subíndice.
`<sup>`	Define texto superíndice.
`<strong>`	Define texto importante (negrita semántica).
`<em>`	Define texto enfatizado (cursiva semántica).
`<mark>`	Resalta texto relevante.
`<small>`	Define texto secundario o pequeño.
`<dfn>`	Define un término en un contexto de definición.
`<b>`	Define texto en negrita (sin significado semántico).
`<i>`	Define texto en cursiva (sin significado semántico).
`<u>`	Define texto subrayado.
`<s>`	Define texto tachado.
`<span>`	Contenedor genérico en línea para estilos o scripts.
`<div>`	Contenedor genérico en bloque para estilos o scripts.
`<header>`	Define la cabecera de una sección o página.
`<footer>`	Define el pie de una sección o página.
`<main>`	Define el contenido principal de la página.
`<article>`	Define contenido independiente (artículo, noticia, etc.).
`<section>`	Define una sección temática del contenido.
`<aside>`	Define contenido relacionado, pero secundario (barra lateral).
`<nav>`	Define una sección de navegación.
`<figure>`	Define contenido independiente como imágenes, gráficos, etc.
`<figcaption>`	Define la leyenda de un elemento `<figure>`.

<!DOCTYPE html>
<html>
<!-- head tag -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REP98 Example</title>
  <link rel="canonical" href="https://vzlaweb.com/" />
  <base href="https://example.com" target="_blank">
  <script src="myscript.js"></script>
  <link rel="stylesheet" href="mystyles.css">
  <style>
    body { background-color: #FEFEFE; color: #1A1A1A; }
  </style>
</head>
<!-- Body tag -->
<body>
  <noscript>Este sitio necesita Javascript</noscript>
  
  <!-- Encabezados -->
  <h1>Encabezado nivel 1</h1>
  <h2>Encabezado nivel 2</h2>
  <h3>Encabezado nivel 3</h3>
  <h4>Encabezado nivel 4</h4>
  <h5>Encabezado nivel 5</h5>
  <h6>Encabezado nivel 6</h6>

  <!-- Párrafos y saltos de línea -->
  <p>Este es un párrafo de texto.</p>
  <p>Este es otro párrafo con un <br>salto de línea.</p>

  <!-- Línea horizontal -->
  <hr>

  <!-- Texto preformateado -->
  <pre>
    Este texto está preformateado.
    Conserva espacios y saltos de línea.
  </pre>

  <!-- Citas -->
  <blockquote>
    Esta es una cita larga. Puede ser un bloque de texto.
  </blockquote>
  <p>Una cita corta: <q>Esto es una cita corta.</q></p>

  <!-- Título de una obra -->
  <p>El libro <cite>El Principito</cite> es muy famoso.</p>

  <!-- Abreviaturas -->
  <p>La <abbr title="Organización de las Naciones Unidas">ONU</abbr> fue fundada en 1945.</p>

  <!-- Información de contacto -->
  <address>
    Escrito por <a href="mailto:autor@example.com">Autor Ejemplo</a>.<br>
    Visítanos en:<br>
    Example.com<br>
    Calle Falsa 123, Ciudad<br>
    País
  </address>

  <!-- Fecha y hora -->
  <p>El evento es el <time datetime="2023-12-25">25 de diciembre de 2023</time>.</p>

  <!-- Código y ejemplos de programación -->
  <p>Este es un ejemplo de código: <code>console.log("Hola, mundo");</code></p>
  <p>La variable <var>x</var> representa un valor desconocido.</p>
  <p>La salida del programa es: <samp>¡Hola, mundo!</samp></p>
  <p>Presiona <kbd>Ctrl + C</kbd> para copiar.</p>

  <!-- Subíndice y superíndice -->
  <p>Fórmula química del agua: H<sub>2</sub>O.</p>
  <p>Notación científica: 10<sup>6</sup>.</p>

  <!-- Texto importante y enfatizado -->
  <p>Este es un texto <strong>importante</strong>.</p>
  <p>Este es un texto <em>enfatizado</em>.</p>

  <!-- Texto resaltado -->
  <p>Este es un texto <mark>resaltado</mark>.</p>

  <!-- Texto pequeño -->
  <p>Este es un texto <small>pequeño</small>.</p>

  <!-- Definiciones -->
  <p>El término <dfn>HTML</dfn> significa HyperText Markup Language.</p>

  <!-- Texto en negrita, cursiva, subrayado y tachado -->
  <p>Este es un texto en <b>negrita</b>.</p>
  <p>Este es un texto en <i>cursiva</i>.</p>
  <p>Este es un texto <u>subrayado</u>.</p>
  <p>Este es un texto <s>tachado</s>.</p>

  <!-- Contenedores genéricos -->
  <div>Este es un contenedor en bloque (<code>div</code>).</div>
  <span>Este es un contenedor en línea (<code>span</code>).</span>

  <!-- Estructura semántica -->
  <header>
    <h1>Cabecera de la página</h1>
    <nav>
      <a href="#">Inicio</a> |
      <a href="#">Acerca de</a> |
      <a href="#">Contacto</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Artículo principal</h2>
      <p>Este es el contenido principal del artículo.</p>
    </article>

    <section>
      <h2>Sección secundaria</h2>
      <p>Este es el contenido de una sección.</p>
    </section>

    <aside>
      <h3>Contenido relacionado</h3>
      <p>Este es un contenido secundario o relacionado.</p>
    </aside>
  </main>

  <footer>
    <p>Pie de página &copy; 2023.</p>
  </footer>

  <!-- Figuras y leyendas -->
  <figure>
    <img src="imagen.jpg" alt="Descripción de la imagen">
    <figcaption>Figura 1: Una imagen de ejemplo.</figcaption>
  </figure>

</body>
</html>

Etiquetas de Contenido Multimedia.

Etiquetas	Descripción
`<img>`	Inserta una imagen en la página.
`<audio>`	Inserta contenido de audio.
`<video>`	Inserta contenido de video.
`<source>`	Define múltiples fuentes para `<audio>` o `<video>`
`<track>`	Define subtítulos o pistas de texto para `<audio>` o `<video>`.
`<picture>`	Permite definir múltiples fuentes de imágenes para diferentes dispositivos.
`<canvas>`	Permite dibujar gráficos dinámicos mediante JavaScript.
`<svg>`	Define gráficos vectoriales escalables.
`<embed>`	Inserta contenido externo como plugins.
`<object>`	Inserta objetos embebidos como imágenes, videos, etc.
`<param>`	Define parámetros para `<object>`
`<map>`	Define un mapa de imagen.
`<area>`	Define áreas clickeables en un `<map>`

<!DOCTYPE html>
<html>
<!-- head tag -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REP98 Example - Multimedia e Imágenes</title>
  <link rel="canonical" href="https://vzlaweb.com/" />
  <base href="https://example.com" target="_blank">
  <script src="myscript.js"></script>
  <link rel="stylesheet" href="mystyles.css">
  <style>
    body { background-color: #FEFEFE; color: #1A1A1A; }
  </style>
</head>
<!-- Body tag -->
<body>
  <noscript>Este sitio necesita Javascript</noscript>

  <!-- Imagen -->
  <h2>Imagen</h2>
  <img src="imagen.jpg" alt="Descripción de la imagen" width="300">

  <!-- Audio -->
  <h2>Audio</h2>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Tu navegador no soporta el elemento de audio.
  </audio>

  <!-- Video -->
  <h2>Video</h2>
  <video controls width="400">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Tu navegador no soporta el elemento de video.
  </video>

  <!-- Fuentes multimedia -->
  <h2>Fuentes multimedia</h2>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Tu navegador no soporta el elemento de audio.
  </audio>

  <video controls width="400">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Tu navegador no soporta el elemento de video.
  </video>

  <!-- Pistas de texto (subtítulos) -->
  <h2>Subtítulos en video</h2>
  <video controls width="400">
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="Inglés">
    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
    Tu navegador no soporta el elemento de video.
  </video>

  <!-- Imágenes adaptativas -->
  <h2>Imágenes adaptativas</h2>
  <picture>
    <source media="(min-width: 800px)" srcset="imagen-grande.jpg">
    <source media="(min-width: 400px)" srcset="imagen-mediana.jpg">
    <img src="imagen-pequeña.jpg" alt="Descripción de la imagen">
  </picture>

  <!-- Canvas -->
  <h2>Canvas</h2>
  <canvas id="miCanvas" width="200" height="100" style="border:1px solid #000;">
    Tu navegador no soporta el elemento canvas.
  </canvas>
  <script>
    const canvas = document.getElementById('miCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 100, 50);
  </script>

  <!-- SVG -->
  <h2>SVG</h2>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    Tu navegador no soporta SVG.
  </svg>

  <!-- Contenido embebido -->
  <h2>Contenido embebido</h2>
  <embed src="archivo.pdf" type="application/pdf" width="400" height="300">

  <!-- Objeto embebido -->
  <h2>Objeto embebido</h2>
  <object data="archivo.swf" type="application/x-shockwave-flash" width="400" height="300">
    Tu navegador no soporta el elemento object.
  </object>

  <!-- Parámetros para objetos embebidos -->
  <h2>Parámetros para objetos embebidos</h2>
  <object data="archivo.swf" type="application/x-shockwave-flash" width="400" height="300">
    <param name="autoplay" value="true">
    Tu navegador no soporta el elemento object.
  </object>

  <!-- Mapas de imagen -->
  <h2>Mapas de imagen</h2>
  <img src="mapa.jpg" alt="Mapa de imagen" usemap="#mapaImagen" width="400">
  <map name="mapaImagen">
    <area shape="rect" coords="34,44,270,350" alt="Área 1" href="https://example.com/area1">
    <area shape="circle" coords="300,200,50" alt="Área 2" href="https://example.com/area2">
  </map>

</body>
</html>

Etiquetas de Enlaces y Navegación

En HTML, se usa la etiqueta <a> para crear enlaces internos y extenos lo cual con un conjuto de atributos puede realizar llamados de hipervinculos a otros sitos.

<!DOCTYPE html>
<html>
<head><title>Example A</title></head>
<body>  
 <a href="/internal-site">Sitio Interno</a>
  <a href="#anchorid">Ancla dentro de la misma web</a>
  <a href="https://other.example.com/">Otro Sitio</a>
</body>
</html>

Etiquetas de Listas

Etiquetas	Descripción
`<ul>`	Define una lista no ordenada.
`<ol>`	Define una lista ordenada.
`<li>`	Define un ítem de lista.
`<dl>`	Define una lista de definiciones.
`<dt>`	Define un término en una lista de definiciones.
`<dd>`	Define la descripción de un término en una lista de definiciones.

<!DOCTYPE html>
<html>
<head><title>Example List</title></head>
<body>  
  <ul>
    <li>Items No Ordenado</li>
    <li>Items No Ordenado</li>
    <li>Items No Ordenado</li>
  </ul>
  <ol>
    <li>Items Ordenado</li>
    <li>Items Ordenado</li>
    <li>Items Ordenado</li>
  </ol>
  <dl>
    <dt>Denim (semigloss finish)</dt>
    <dd>Ceiling</dd>
  
    <dt>Denim (eggshell finish)</dt>
    <dt>Evening Sky (eggshell finish)</dt>
    <dd>Layered on the walls</dd>
  </dl>
</body>
</html>

Etiquetas de Formularios

Etiquetas	Descripción
`<form>`	Define un formulario para la entrada de datos.
`<input>`	Define un campo de entrada de datos.
`<textarea>`	Define un área de texto multilínea.
`<button>`	Define un botón clickeable.
`<select>`	Define una lista desplegable.
`<option>`	Define una opción en una lista desplegable.
`<optgroup>`	Agrupa opciones en una lista desplegable.
`<label>`	Define una etiqueta para un campo de formulario.
`<fieldset>`	Agrupa elementos de un formulario.
`<legend>`	Define un título para un `<fieldset>`
`<datalist>`	Define una lista de opciones para un campo de entrada.
`<output>`	Muestra el resultado de un cálculo.
`<progress>`	Muestra el progreso de una tarea.
`<meter>`	Muestra una medida dentro de un rango.

<!DOCTYPE html>
<html>
<head>
  <title>Formulario Corto</title>
</head>
<body>
  <!-- Formulario -->
  <form action="/submit-form" method="POST">
    <!-- Campo de texto -->
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre"><br><br>

    <!-- Área de texto -->
    <label for="mensaje">Mensaje:</label><br>
    <textarea id="mensaje" name="mensaje" rows="4" cols="50" placeholder="Escribe tu mensaje aquí"></textarea><br><br>

    <!-- Botón -->
    <button type="submit">Enviar</button><br><br>

    <!-- Lista desplegable -->
    <label for="pais">País:</label>
    <select id="pais" name="pais">
      <optgroup label="América">
        <option value="venezuela">Venezuela</option>
        <option value="colombia">Colombia</option>
      </optgroup>
      <optgroup label="Europa">
        <option value="españa">España</option>
        <option value="francia">Francia</option>
      </optgroup>
    </select><br><br>

    <!-- Grupo de campos -->
    <fieldset>
      <legend>Información de contacto</legend>
      <label for="email">Correo electrónico:</label>
      <input type="email" id="email" name="email" placeholder="Escribe tu correo"><br><br>
    </fieldset>

    <!-- Lista de datos -->
    <label for="browser">Navegador favorito:</label>
    <input list="browsers" id="browser" name="browser" placeholder="Elige un navegador">
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Safari">
    </datalist><br><br>

    <!-- Salida de cálculo -->
    <label for="rango">Rango:</label>
    <input type="range" id="rango" name="rango" min="0" max="100" value="50">
    <output for="rango" id="valorRango">50</output><br><br>

    <!-- Barra de progreso -->
    <label for="progreso">Progreso:</label>
    <progress id="progreso" value="70" max="100">70%</progress><br><br>

    <!-- Medidor -->
    <label for="medidor">Uso de almacenamiento:</label>
    <meter id="medidor" value="60" min="0" max="100">60%</meter><br><br>
  </form>

  <!-- Script para actualizar el valor del rango -->
  <script>
    const rango = document.getElementById('rango');
    const valorRango = document.getElementById('valorRango');
    rango.addEventListener('input', () => {
      valorRango.value = rango.value;
    });
  </script>
</body>
</html>

Etiquetas de Tablas

Etiquetas	Descripción
`<table>`	Define una tabla.
`<caption>`	Define un título para una tabla.
`<thead>`	Define la cabecera de una tabla.
`<tbody>`	Define el cuerpo de una tabla.
`<tfoot>`	Define el pie de una tabla.
`<tr>`	Define una fila en una tabla.
`<th>`	Define una celda de cabecera en una tabla.
`<td>`	Define una celda de datos en una tabla.
`<col>`	Define propiedades para una columna en una tabla.
`<colgroup>`	Agrupa columnas en una tabla.

<!DOCTYPE html>
<html>
<head>
  <title>Example Table</title>
</head>
<body>
  <!-- Table -->
  <table border="1">
    <!-- Título de la tabla -->
    <caption>Información de empleados</caption>

    <!-- Agrupación de columnas -->
    <colgroup>
      <col style="background-color: #f2f2f2;">
      <col span="2" style="background-color: #ddd;">
    </colgroup>

    <!-- Cabecera de la tabla -->
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Departamento</th>
      </tr>
    </thead>

    <!-- Cuerpo de la tabla -->
    <tbody>
      <tr>
        <td>1</td>
        <td>Juan Pérez</td>
        <td>Ventas</td>
      </tr>
      <tr>
        <td>2</td>
        <td>María Gómez</td>
        <td>Marketing</td>
      </tr>
    </tbody>

    <!-- Pie de la tabla -->
    <tfoot>
      <tr>
        <td colspan="3">Total empleados: 2</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Etiquetas de Refinamiento, Interactividad y Diseño

Etiquetas	Descripción
`<details>`	Define contenido adicional que el usuario puede mostrar u ocultar.
`<summary>`	Define un resumen para `<details>`
`<dialog>`	Define una ventana de diálogo o cuadro de mensaje.
`<template>`	Define plantillas de contenido que no se renderizan al cargar la página.
`<menu>`	Define una lista de comandos o menú.

<!DOCTYPE html>
<html>
<head>
  <title>Example Interactive</title>
</head>
<body>
  <!-- Detalles desplegables -->
  <details>
    <summary>Ver más información</summary>
    <p>Este es un contenido adicional que se muestra al hacer clic en el resumen.</p>
  </details>

  <!-- Diálogo modal -->
  <button onclick="document.getElementById('miDialogo').showModal()">Abrir diálogo</button>
  <dialog id="miDialogo">
    <p>Este es un diálogo modal.</p>
    <button onclick="document.getElementById('miDialogo').close()">Cerrar</button>
  </dialog>

  <!-- Plantilla -->
  <template id="miTemplate">
    <p>Este es un contenido de plantilla que no se renderiza inicialmente.</p>
  </template>

  <!-- Menú -->
  <menu>
    <li><button onclick="alert('Opción 1 seleccionada')">Opción 1</button></li>
    <li><button onclick="alert('Opción 2 seleccionada')">Opción 2</button></li>
  </menu>

  <!-- Script para usar la plantilla -->
  <script>
    const template = document.getElementById('miTemplate');
    const contenido = template.content.cloneNode(true);
    document.body.appendChild(contenido);
  </script>
</body>
</html>

Estas son solo algunas de las etiquetas mas importantes de este lenguaje de programación, si tiene preguntas Contactame,

Lenguaje de Marcado de Hipertexto HTML

Contenido:

Hablemos de HTML

Estructura de un HTML

Evolución de HTML

Algunas Etiquetas HTML

Etiquetas de Estructura Básica

Etiquetas de la cabecera o metadatos

Etiquetas de Encabezados y Estructura de Texto

Etiquetas de Contenido Multimedia.

Etiquetas de Enlaces y Navegación

Etiquetas de Listas

Etiquetas de Formularios

Etiquetas de Tablas

Etiquetas de Refinamiento, Interactividad y Diseño

No te olvides de Comentar y Compartir

Me gusta esto:

Relacionado

Descubre más desde REP98

Deja un comentarioCancelar respuesta

Lenguaje de Marcado de Hipertexto HTML

Contenido:

Hablemos de HTML

Estructura de un HTML

Evolución de HTML

Algunas Etiquetas HTML

Etiquetas de Estructura Básica

Etiquetas de la cabecera o metadatos

Etiquetas de Encabezados y Estructura de Texto

Etiquetas de Contenido Multimedia.

Etiquetas de Enlaces y Navegación

Etiquetas de Listas

Etiquetas de Formularios

Etiquetas de Tablas

Etiquetas de Refinamiento, Interactividad y Diseño

No te olvides de Comentar y Compartir

Comparte esto:

Me gusta esto:

Relacionado

Descubre más desde REP98

Deja un comentarioCancelar respuesta

Descubre más desde REP98