Elementos básicos: aprender HTML

por

Los elementos básicos de una página HTML son:

  • Un encabezado de texto, indicado con el <h1>, <h2>, <h3>, <h4>, <h5>, <h6> etiquetas.
  • Un párrafo, denotado con el <p> etiqueta.
  • Una regla horizontal, denotada con la <hr> etiqueta.
  • Un enlace, indicado con el <a> (ancla) etiqueta.
  • Una lista, denotada con el <ul> (lista desordenada), <ol> (lista ordenada) y <li> (elemento de lista) etiquetas.
  • Una imagen, denotada con el <img> etiqueta
  • Un divisor, denotado usando el <div> etiqueta
  • Un intervalo de texto, denotado mediante el <span> etiqueta

Las próximas páginas ofrecerán una descripción general de estos elementos HTML básicos.

Cada elemento también puede tener atributos; cada elemento tiene un conjunto diferente de atributos relevantes para el elemento. Hay algunos elementos globales, los más comunes son:

  • id – Denota el ID único de un elemento en una página. Se utiliza para localizar elementos mediante enlaces, JavaScript y más.
  • class – Denota la clase CSS de un elemento. Explicado en el tutorial Conceptos básicos de CSS.
  • style – Denota los estilos CSS que se aplicarán a un elemento. Explicado en el tutorial Conceptos básicos de CSS.
  • data-x atributos: un prefijo general para los atributos que almacenan información sin procesar con fines programáticos. Explicado en detalle en la sección Atributos de datos.

Encabezados y párrafos de texto

Hay seis tipos diferentes de encabezado de texto entre los que puede elegir, h1 es el encabezado superior con el texto más grande y h6 es el encabezado más interno con el texto más pequeño. En general, debe tener solo una etiqueta h1 con una página, ya que debe ser la descripción principal de la página HTML.

Como vimos en el último ejemplo, un párrafo es un bloque de texto separado del resto del texto que lo rodea.

Veamos un ejemplo del <h1>, <h2> y <p> etiquetas en acción:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>My First Page</h1>
        <p>This is my first page.</p>
        <h2>A secondary header.</h2>
        <p>Some more text.</p>
    </body>
</html>

Reglas horizontales

Una regla horizontal <hr> La etiqueta actúa como un simple separador entre las secciones de la página.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>My First Page</h1>
        <p>This is my first page.</p>
        <hr>
        <p>This is the footer - all rights are reserved to me.</p>
    </body>
</html>

Ejercicio

  1. Agregar un HTML <h1> etiqueta con el texto “¡Soy el más importante!”
  2. Agregar un HTML <h2> etiqueta con el texto “¡Soy menos importante!”
  3. Agregar un HTML <h6> etiqueta con el texto “¡Soy el menos importante!”

Deja un comentario