3. Elementos básicos de HTML

Versión para imprimir.

En esta lección se introducen los elementos básicos de HTML.

A. Ejemplo típico

Este es un ejemplo típico de un archivo HTML.

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>🏡Estructura</title>
</head>
<body>
 <!-- Título en el contenido -->
 <h1>🏡Estructura</h1>
 <!-- Navegación -->
 <nav>
  <!-- Título de sección -->
  <h2>Enlaces</h2>
  <!-- Párrafo -->
  <p>
   <!-- hipervínculo -->
   <a href=" https://google.com "
     target="_blank">Google</a>
  </p>
 </nav>
 <!-- Párrafos -->
 <p>🌎Hola Mundo.</p>
 <p>🧻Más texto.</p>
 <!-- Pie de pagina -->
 <footer>
  <p>
   © 2021
   Gilberto Pacheco Gallegos.
  </p>
 </footer>
</body>
</html>

B. Elementos de fraseo

Elementos que son contenido de fraseo

  • a
  • abbr
  • area (si es descendiente de map)
  • audio
  • b
  • bdi
  • bdo
  • br
  • button
  • canvas
  • cite
  • code
  • data
  • datalist
  • del
  • dfn
  • em
  • embed
  • i
  • iframe
  • img
  • input
  • ins
  • kbd
  • label
  • link (si se permite dentro de body)
  • map
  • mark
  • math de MathML
  • meta (si el atributo itemprop está presente)
  • meter
  • noscript
  • object
  • output
  • picture
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • select
  • slot
  • small
  • span
  • strong
  • sub
  • sup
  • svg de SVG
  • template
  • textarea
  • time
  • u
  • var
  • video
  • wbr
  • elemento personalizado autónomo
  • texto

C. Títulos

Ejemplo

<h1>🏡Estructura</h1>
<nav>
 <h2>Enlaces</h2>
 ...
</nav>
...

Temas por investigar

Solo para los más rudos

D. El elemento p

Ejemplo

<p>🌎Hola Mundo.</p>
<p>🧻Más texto.</p>

Solo para los más rudos

E. Elementos que cierran p

El elemento p también cierra si no hay más contenido en el elemento padre, el cual no es:

F. El elemento a

Atributos

href

URL válida del recurso que muestra. Puede estar rodeada por espacios.

target

El valor _blank Hace que el enlace se abra en otra pestaña.

Ejemplo

<a href=" https://google.com "
  target="_blank">Google</a>

Solo para los más rudos

G. El elemento nav

Ejemplo

<nav>
 <h2>Enlaces</h2>
 <p>
  <a href=" https://google.com "
    target="_blank">Google</a>
 </p>
</nav>

Solo para los más rudos

H. El elemento footer

Ejemplo

<footer>
 <p>
  © 2021 Gilberto Pacheco Gallegos.
 </p>
</footer>

Solo para los más rudos

I. Resumen