Request-Response

The Full-Stack Blog

Hoja de trucos HTML

febrero 06, 2024
Available in English

¿Qué es el HTML?

El lenguaje de marcas de hipertexto (HTML) es uno de los tres lenguajes fundamentales que se utilizan en páginas web de desarrollo.

HTML maneja las marcas estándar de una página. Con HTML, definimos el marco básico para la página y los elementos que queremos que aparezcan en ella.

Estas son algunas de las cosas que definimos con HTML:

  • Los elementos de texto en la página

  • Las imágenes en la página

  • El orden en el que aparecen los elementos en la página

  • Qué elementos de texto son los encabezados primario y secundario

Si bien HTML decide el marco para una página, HTML no determina el estilo o diseño específico. Las reglas de estilo se establecen usando CSS. Del mismo modo, HTML no hace que la página sea interactiva. Esa tarea se maneja con JavaScript.

El rol de HTML en el desarrollo web es definir el marco para la página.

La siguiente imagen muestra un ejemplo de una página web que utiliza solo HTML:

Una captura de pantalla ilustra una página web HTML básica que solo incluye texto sin estilo.

Tenga en cuenta que, si bien todos los elementos están allí, la página carece de estilo e interactividad.

Elementos HTML

Un elemento es parte de una página web que alberga contenido o desempeña una tarea específica. En HTML, los elementos a menudo contienen información visible en la página, como una imagen o texto. Sin embargo, no todos los elementos son visibles. Algunos elementos contienen información que el navegador necesita para representar la página o que se utilizan para dividir el contenido de la página de una manera lógica y legible.

Etiquetas HTML

Los elementos HTML por lo general están compuestos por una etiqueta de apertura y cierre. Todo lo que se encuentra dentro de las etiquetas se considera parte del elemento.

Consulte el siguiente código para ver un ejemplo:

<p> This is a paragraph element. </p>

Sin embargo, algunos elementos no requieren etiquetas de apertura y cierre. Estos casos especiales se conocen como elementos anulados o etiquetas de cierre automático. Las etiquetas de cierre automático no incluyen contenido adicional, pero pueden tener atributos.

Un elemento anulado común es el elemento de imagen <img>.

Otro elemento anulado común es <br>, que agrega un salto entre otros elementos.

El documento HTML

Todos los documentos HTML siguen un formato similar compuesto por un elemento <html> que contiene un elemento <head> y <body>. El elemento <head> incluye los metadatos de la página. Los elementos que se colocan dentro del <head> no son visibles en la página y se destinan a proporcionar la información necesaria para que el navegador reproduzca la página correctamente. El <body> incluye los elementos vistos en la página.

El siguiente código muestra un ejemplo de los elementos <header> y <body>:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documento</title>
</head>
<body>


  <header>
      <h1>Ejemplo de página web</h1>
  </header>


  <section>
      <h2>Mi lista</h2>
      <ul>
        <li>Punto 1</li>
        <li>Punto 2</li>
        <li>Punto 3</li>
      </ul>
  </section>


  <section>
      <h2>Mi párrafo</h2>
         <p>Este es el texto de mi párrafo.</p>  
  </section>
    
</body>
</html>

Elementos head

Los siguientes elementos se incluyen en el elemento <head>:

  • El elemento <title> es obligatorio en cada documento HTML. El elemento title proporciona un nombre de metadatos para la página.

  • El elemento <style> se utiliza para incorporar CSS y contiene las reglas de CSS necesarias para dar estilo a la página.

  • El elemento <link> define la relación entre la página actual y una fuente externa.

  • El elemento <meta> define metadatos para la página.

  • El elemento <script> se utiliza para integrar JavaScript en la página.

  • El elemento <noscript> define el contenido que se mostrará si los scripts están desactivados.

Elementos body

Los siguientes elementos se utilizan comúnmente en el <body> para crear la página visible:

  • Los elementos <h1>, <h2>, <h3>, <h4>, <h5> y <h6> representan el nivel del encabezado que representa un bloque de texto determinado. Los encabezados son exactamente eso, elementos de texto más grandes o prominentes en una página, como las oraciones temáticas en un artículo.

  • El elemento <p> representa párrafos o bloques de texto. Usará este elemento extensamente para rodear la mayor parte del texto en sus páginas web.

  • Los elementos <strong> y <em> pueden hacer que un cierto elemento de texto aparezca en negrita o en cursiva respectivamente.

  • El elemento <br> crea una línea de espacio vacío entre dos bloques de contenido.

  • El elemento <img> muestra imágenes en una página. La sintaxis difiere ligeramente (consulte la siguiente sección) para este elemento.

  • El elemento <a> (o elemento ancla) crea enlaces a la misma página web o a otras páginas web. Nuevamente, la sintaxis difiere ligeramente.

  • Los elementos <ul>, <ol>, y <li> representan listas sin ordenar, listas ordenadas y elementos de lista. En esencia, estos elementos HTML representan listas con viñetas de símbolos o números.

Elementos semánticos

Los elementos semánticos a menudo se utilizan para dividir una página. Los elementos semánticos tienen nombres que describen la sección. Es importante usar elementos semánticos cuando sea posible para ayudar a que su código sea más legible. Además, el uso de HTML estructural y semántico es clave para que su página sea accesible para los usuarios que utilizan un dispositivo de asistencia para acceder a la página.

Los siguientes son elementos semánticos comunes:

  • El elemento <article> se utiliza para albergar un contenido independiente, como una publicación de blog o un widget.

  • El elemento <aside> se utiliza para albergar contenido que a menudo aparece a un lado y proporciona información adicional sobre el tema de la página.

  • El elemento <details> se utiliza para obtener detalles adicionales que el usuario puede abrir u ocultar a petición.

  • El elemento <figcaption> se utiliza para definir una leyenda para una figura o imagen.

  • El elemento <figure> se utiliza para definir una imagen. A menudo se usa con <figcaption>.

  • El elemento <footer> se utiliza para definir el pie de página de la página.

  • El elemento <header> se utiliza para definir el encabezado de la página.

  • El elemento <main> se utiliza para definir el contenido primario y a menudo se utiliza con <aside> para definir el contenido primario y secundario.

  • El elemento <nav> se utiliza para definir el área de la página con enlaces de navegación.

  • El elemento <section> se utiliza para agrupar contenido que puede mantenerse por sí solo en su propia sección.

Atributos

Los atributos HTML se utilizan para proporcionar información adicional sobre un elemento. Todos los elementos, incluidos los elementos anulados, pueden aceptar atributos.

Atributos globales

Los atributos globales son atributos que se pueden utilizar en cualquier elemento, aunque es posible que no tengan un impacto ni cambien algunos elementos.

Los siguientes son atributos globales comunes:

  • El data-* forma una clase de atributos que permite que el elemento interactúe con el modelo de objeto de documento. Cuando se utiliza el data-*, el marcador de posición * se reemplaza por el nombre de la clase que desea crear. Por ejemplo, para crear una clase de datos denominada columnas, se utilizaría data-columns.

  • El atributo dir determina la dirección del atributo. A menudo se utiliza con idiomas que se leen de izquierda a derecha.

  • El atributo lang determina el idioma para el elemento.

  • El atributo style contiene declaraciones de estilo CSS que se aplicarán a ese elemento.

  • El atributo class agrupa uno o más elementos.

  • El atributo id identifica un solo elemento.

Atributos no globales

Otros elementos se pueden utilizar solo con elementos específicos. Esta es una lista de algunos de los atributos comunes específicos del elemento:

  • El atributo alt identifica el texto que se mostrará si no se puede mostrar el elemento. Se utiliza principalmente con imágenes.

  • El atributo href se utiliza principalmente con <link> y <a> para definir la URL de un recurso vinculado.

  • El atributo placeholder se utiliza principalmente con <input> y <textarea> para proporcionar una pista que sugiere que se debe ingresar información.

  • El atributo src se utiliza principalmente con <audio>, <img>, <input> y <script> para definir las URL de contenido integrable.

  • El atributo value se utiliza principalmente con <button>, <data>, <input> y <li> para asignar un valor al elemento.

Recursos

Los elementos y atributos enumerados anteriormente son solo algunas de las herramientas que puede utilizar para crear una página con HTML. Para obtener más información sobre HTML, elementos y atributos, puede consultar los siguientes recursos:

This page was updated 6 months ago
© 2022 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.

Category: HTML

Tagged under: html, elements, cheatsheet, HTML attributes, HTML template, Semantic elements,

All Posts