En esta lección se introducen los elementos básicos de HTML.
Este es un ejemplo típico de un archivo HTML.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | |
| 4 | <head> |
| 5 | <meta charset="UTF-8"> |
| 6 | <meta name="viewport" |
| 7 | content="width=device-width"> |
| 8 | <title>🏡Estructura</title> |
| 9 | </head> |
| 10 | |
| 11 | <body> |
| 12 | <!-- Título en el contenido --> |
| 13 | <h1>🏡Estructura</h1> |
| 14 | <!-- Navegación --> |
| 15 | <nav> |
| 16 | <!-- Título de sección --> |
| 17 | <h2>Enlaces</h2> |
| 18 | <!-- Párrafo --> |
| 19 | <p> |
| 20 | <!-- hipervínculo --> |
| 21 | <a target="_blank" rel="noreferrer" |
| 22 | href=" https://google.com ">Google</a> |
| 23 | </p> |
| 24 | </nav> |
| 25 | <!-- Párrafos --> |
| 26 | <p>🌎Hola Mundo.</p> |
| 27 | <p>🧻Más texto.</p> |
| 28 | <p> |
| 29 | En HTML cuando varios |
| 30 | |
| 31 | saltos de línea |
| 32 | y espacios van juntos, se muestran como un solo espacio. |
| 33 | </p> |
| 34 | <p> |
| 35 | El texto fluye de forma responsiva, ocupando todo el espacio horizontal y |
| 36 | continuando en el siguiente renglón. |
| 37 | </p> |
| 38 | <p>Se recomienda que las líneas de código tengan un máximo de 80 caacteres.</p> |
| 39 | <!-- Pie de pagina --> |
| 40 | <footer> |
| 41 | <p> |
| 42 | © 2021 Gilberto Pacheco Gallegos. |
| 43 | </p> |
| 44 | </footer> |
| 45 | </body> |
| 46 | |
| 47 | </html> |
Representa el texto de un documento y los elementos que lo modifican.
No implica ninguna jerarquía ni estructura.
Se puede colocar dentro de otros elementos que si implican estructura; por ejemplo, párrafos, títulos, tablas, etcétera.
aabbrarea
(si es descendiente de map)
audiobbdibdobrbuttoncanvascitecodedatadatalistdeldfnemembediiframeimginputinskbdlabellink
(si se permite dentro de body)
mapmarkmath de MathMLmeta
(si el atributo itemprop está presente)
meternoscriptobjectoutputpictureprogressqrubyssampscriptselectslotsmallspanstrongsubsupsvg de SVGtemplatetextareatimeuvarvideowbr
Son los elementos
h1,
h2,
h3,
h4,
h5
y
h6.
Normalmente se muestran separados del resto del texto, con un tipo de letra más grande y en negritas.
Representan títulos de secciones.
Su contenido es de fraseo.
Los elementos tienen una categoría en base a su número, donde
h1
es la categoría más alta y
h6
es la más baja.
Títulos de una misma categoría o mayor definen nuevas secciones.
Títulos de una categoría más baja definen subsecciones que son parte de la anterior.
Se recomienda que haya un solo
h1
en una página y sea el título del documento.
| 1 | <h1>🏡Estructura</h1> |
| 2 | <nav> |
| 3 | <h2>Enlaces</h2> |
| 4 | ... |
| 5 | </nav> |
| 6 | ... |
La especificación técnica de los títulos está en https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
p
El elemento
p
representa un párrafo de un documento.
Por defecto se muestra separado 1 renglón del contenido previo y otro del contenido que le sigue.
Solo puede llevar contenido de fraseo en su interior.
Si encuentra en su interior un elemento no permitido, automáticamente termina el párrafo y el elemento prohibido queda fuera del párrafo.
| 1 | <p>🌎Hola Mundo.</p> |
| 2 | <p>🧻Más texto.</p> |
La especificación técnica del elemento
p
está en
https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element
addressarticleasideblockquotedetailsdivdlfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhgrouphrmainmenunavolppresectiontableul
El elemento
p
también cierra si no hay más contenido en el elemento padre, el cual no es:
aaudiodelinsmapnoscriptvideoaEs un elemento de fraseo.
Se le conoce como ancla.
Cuando tiene el atributo
href,
representa un hipervínculo. El texto que muestra es su contenido,
que debe ser de fraseo.
hrefURL 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.
| 1 | <a target="_blank" rel="noreferrer" |
| 2 | href=" https://google.com ">Google</a> |
La especificación técnica del elemento
a
está en
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
nav
El elemento
nav
es una sección de la página que contiene enlaces a otras páginas o a
otras partes de la misma página.
| 1 | <nav> |
| 2 | <h2>Enlaces</h2> |
| 3 | <p> |
| 4 | <a target="_blank" rel="noreferrer" |
| 5 | href=" https://google.com ">Google</a> |
| 6 | </p> |
| 7 | </nav> |
La especificación técnica del elemento
nav
está en
https://html.spec.whatwg.org/multipage/sections.html#the-body-element
footerRepresenta el pie de la página o de una sección.
Típicamente contiene información de quien escribió la página o sección, enlaces a documentos relacionados, copyright y cosas similares.
Cuando contiene secciones, representan apéndices, índices, acuerdos de licencia y contenidos similares.
Es normal poner hipervínculos en su interior sin necesidad de usar
elementos
nav.
| 1 | <footer> |
| 2 | <p> |
| 3 | © 2021 |
| 4 | Gilberto Pacheco Gallegos. |
| 5 | </p> |
| 6 | </footer> |
La especificación técnica del elemento
footer
está en
https://html.spec.whatwg.org/multipage/sections.html#the-footer-element
En esta lección se revisaron los siguientes elementos:
h1,
h2,
h3,
h4,
h5
y
h6
p
a
nav
footer
Elementos de fraseo
Elementos que cierran
p