W3docs
es
Iniciar sesión

Etiquetas básicas de HTML

Learn about some basic elements , tags used in HTML. In particular, get acquainted with <h1>, <p>, <img> and <a> elements and their usage with examples.

Comprender las etiquetas básicas de HTML es importante mientras aprendes HTML. Estos son los elementos HTML que se usan con más frecuencia que otros. Son:

Documentos HTML

Todos los documentos HTML deben comenzar con una declaración que especifique el tipo de documento: <!DOCTYPE html>.

El documento HTML comienza con <html> y termina con </html>.

La parte principal del documento HTML se encuentra entre <body> y </body>.

Ejemplo de un documento HTML:

Ejemplo de un documento HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>
Pruébalo tú mismo »

Encabezados HTML

Los elementos de encabezado se usan para estructurar títulos. Hay seis tipos de encabezados HTML, desde <h1> hasta <h6>.

Ejemplo de los encabezados HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>
Pruébalo tú mismo »

Resultado

headings

Párrafos HTML

El elemento <p> se usa para separar párrafos HTML.

Ejemplo de los párrafos HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>
Pruébalo tú mismo »

Resultado

paragraph

Imágenes HTML

Los atributos de esta etiqueta son:

  • el archivo de origen (src),
  • el texto alternativo (alt),
  • width,
  • height.

La etiqueta <img> se usa para insertar imágenes HTML.

Ejemplo de las imágenes HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>
Pruébalo tú mismo »

Resultado

Image example

Enlaces HTML

La etiqueta <a> se usa para insertar enlaces HTML. Puedes especificar el destino del enlace con ayuda del atributo href.

Ejemplo de los enlaces HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Link example

Botones HTML

Puedes especificar los botones HTML con la etiqueta <button>.

Ejemplo de la etiqueta HTML <button>:

Ejemplo de la etiqueta HTML<button>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>
Pruébalo tú mismo »

Listas HTML

Las listas HTML se especifican con la etiqueta <ul>, que se usa para especificar una lista desordenada, o con la etiqueta <ol>, que se usa para crear una lista ordenada, seguidas de etiquetas <li>.

Ejemplo de las listas HTML:

Ejemplo de listas HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>
Pruébalo tú mismo »

Líneas horizontales HTML

La etiqueta HTML <hr> divide la página en diferentes partes y crea un salto temático. Es una etiqueta vacía.

Ejemplo de la etiqueta HTML <hr>:

Ejemplo de la etiqueta HTML <hr>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>
Pruébalo tú mismo »

Practice

Práctica

Which of the following is true about HTML based on the content at https://www.w3docs.com/learn-html/html-basic.html?