Contenidos

1 Cuerpo de una página Html
- 1.1 Estructura del documento

Cuerpo de una página Html

El cuerpo de una página HTML incluye los contenidos de la propia página web y se define con el elemento body

Existen gran cantidad de etiquetas que podemos usar en el body, a modo de consulta podemos usar este listado completo

Vamos a agrupar algunas de su etiquetas por:

Estructura del documento
cabecera, sección, navegación
Estructura del texto
títulos, parrafos, …
Caracterización del texto
texto enfatizado, fragmentos de código, …

Estructura del documento

Normalmente toda página web tiene una cabecera de título, algún tipo de barra lateral de navegación, un contenido principal y quizás un pie de página

Para conseguir esta estructuración se puede utilizar el elemento div mediante divisiones

Una división no puede insertarse dentro de una etiqueta de nivel inferior, como las de estructuración y caracterización de texto, pero sí que puede insertarse dentro de otro elemento div

Gracias a las hojas de estilo y a los atributos genéricos id y class daremos formato a esas agrupaciones

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de prueba</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            #cabecera  {
                  height: 10%;
                  background-color: lightblue;
            }

            #nav  {
                  height: 5%;
                  background-color: lightgray;
            }

            #principal  {
                  display: flex;
                  align-items: stretch;
            }

            #contenido  {
                  width: 80%;
                  background-color: lemonchiffon;
                  min-height: 80%;
            }

            #aside  {
                  width: 20%;
                  background-color: lemonsalmon;
                  min-height: 80%;
            }

            #pie  {
                  height: 5%;
                  background-color: lightgreen;
            }
        </style>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
         <div id='cabecera'>Esta es la cabecera</div>
         <div id='nav'>Barra de navegación</div>
         <div id='principal'>
             <div id='contenido'>Contenido</div>
             <div id='aside'>Barra lateral</div>
         </div>
         <div id='pie'>Este es el pie de la página</div>
</html>

La estructura de la web de ejemplo es bastante estándar y las divisiones que acabamos de ver se repiten constantemente

Por eso a partir de HTML5 se añadieron una serie de divisiones con significado para poder indicar más fácilmente como estructuramos la web

Elementos de estructura semántica

Estos elementos son análogos a las divisiones, pero además llevan asociado un significado relacionado con la estructura

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de prueba</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            header  {
                  height: 10%;
                  background-color: lightblue;
            }

            nav  {
                  height: 5%;
                  background-color: lightgray;
            }

            #principal  {
                  display: flex;
                  align-items: stretch;
            }

            article  {
                  width: 80%;
                  background-color: lemonchiffon;
                  min-height: 80%;
            }

            aside  {
                  width: 20%;
                  background-color: lemonsalmon;
                  min-height: 80%;
            }

            footer  {
                  height: 5%;
                  background-color: lightgreen;
            }
        </style>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
         <header>Esta es la cabecera</header>
         <nav>Barra de navegación</nav>
         <div id='principal'>
             <article>Contenido</article>
             <aside>Barra lateral</aside>
         </div>
         <footer>Este es el pie de la página</footer>
</html>

En el ejemplo podemos ver que hemos podido sustituir algunas divisiones por una etiqueta equivalente

Algunas de las etiquetas de estructuración semántica más importantes son:

header
representa la cabecera de un documento o sección

Debe usarse para contener información introductoria

Puede haber más de uno en el documento
footer
representa el cierre de un documento o sección

Suele contener información sobre el autor, copyright, términos de uso, información de contacto, etc
nav
representa la sección que contiene los enlaces de navegación por el sitio web
section
define una sección del documento
article
representa un contenido independiente y autocontenido

Por ejemplo los post de un blog, noticias, comentarios, etc
aside
define contenido que se encuentra fuera de lugar en el que está contenido

Como por ejemplo una barra lateral

Suele estar relacionado con el elemento que contiene
figure
define un elemento independiente como una imagen, un fragmento de código, un diagrama, etc

Suele estar relacionado con el elemento que contiene, pero su posición es independiente del mismo
figcaption
es el título o leyendo de un elemento figure

Se suele poner como primer o último elemento del mismo
details
representa una serie de detalles adicionales que el usuario puede ocultar

Elementos de estructuración del texto

Las etiquetas de estructuración del texto sirven para definir los encabezados de las secciones y los parrafos

Entre las etiquetas de bloque destacamos las siguientes:

p
contiene el texto de un párrafo

El navegador no muestra los espacios en blanco ni los saltos de línea adicionales que escribamos dentro del párrafo
```
<p>Información a mostrar</p>
```
hN
define los encabezados de las secciones (hay 6 niveles, dónde N es de 1 a 6)

Pueden configurarse cómo se visualizan los encabezados a través de CSS

Normalmente se utiliza una fuente mayor cuanto más alto sea el nivel, siendo h1 el de mayor nivel

Cambiando el número se pueden conseguir distintos efectos visuales al cambiar el tamaño de la letra

Estos elementos se usan para estructurar el documento en secciones, subsecciones, etc
```
<h1>Sección 1</h1>

<h2>Sección 2</h2>

<h3>Sección 3</h3>

<h4>Sección 4</h4>

<h5>Sección 5</h5>

<h6>Sección 6</h6>
```
pre
contiene un párrafo con texto preformateado, es decir, que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (Courier)

Tiene en cuenta los espacios en blanco y los saltos de línea adicionales

Puede ser útil para escribir párrafos con ejemplos de código fuente
```
<pre>
Texto
     Texto con tabulación

Simulación de tabla

columna1    columna2    columna3   columna4
fila11       fila12     fila13     fila14
fila21       fila22     fila23     fila24
</pre>
```
En el ejemplo hemos simulado una tabla, aunque para esa tarea es aconsejable usar mejor la etiqueta para tablas

Se pueden simular otros tipos de elementos, ya que el texto se tomará de forma literal, pero es recomendable usar sus etiquetas específicas, siempre que estas existan

Con lo que obtendremos:
```
Texto
     Texto con tabulación

Simulación de tabla

columna1    columna2    columna3   columna4
fila11       fila12     fila13     fila14
fila21       fila22     fila23     fila24
```
blockquote
se usa para incluir citas, que pueden contener varios párrafos u otros elementos

Genera márgenes a izquierda y derecha, aunque se recomienda definir el formato deseado mediante una hoja de estilo
```
<blockquote cite='Don Quijote de la Mancha'>
<p>En un lugar de la mancha de cuyo nombre no quiero acordarme...</p>
</blockquote>
```
En el ejemplo se ha utilizado el atributo cite para indicar el origen de la cita, en este caso la novela de Don Quijote de la Mancha, ya que hemos citado un párrafo del principio de la novela

Con lo que obtendremos:

En un lugar de la mancha de cuyo nombre no quiero acordarme…
tt
conseguimos que el texto tenga un tamaño menor y la apariencia de los caracteres de una máquina de escribir (typewriter)

No preformatea el texto, sino que únicamente cambia su apariencia
```
<tt>A veces... veo muertos</tt>
```
En el ejemplo se ha escrito un párrafo y le hemos dado el aspecto de los caracteres de una máquina de escribir

Con lo que obtendremos:
A veces... veo muertos

Elementos de caracterización del texto

Se utilizan generalmente dentro de los párrafos

Sirven para definir el formato del texto, aunque gracias a las hojas de estilo, cada vez se utilizan menos

Se mantienen por compatibilidad con versiones antiguas de HTML, entre las más importantes destacamos:

br
añade un salto de línea sin cambiar de párrafo

No tiene etiqueta de cierre
```
<p>A veces...<br/>veo muertos</p>
```
En el ejemplo se ha escrito un párrafo y dentro del mismo hemos usado el salto de línea

Con lo que obtendremos:

A veces…
veo muertos
nbsp
no es una etiqueta, sino más bien una forma de añadir espacios en blanco adicionales para que el navegador los reconozca

Si queremos forzarle a que lo haga, debemos poner el código nbsp (non-breaking space)
```
<p>A veces... &nbsp;veo muertos</p>
```
En el ejemplo se ha escrito un párrafo y dentro del mismo hemos añadido un espacio en blanco, pero hemos forzado la aparición de otro adicional

Con lo que obtendremos:

A veces… veo muertos
center
permite centrar un elemento, ya sea un párrafo, un texto, una imagen, etc

Algunos navegadores más antiguos no lo soportaban, aunque actualmente se usa poco ya que muchos elementos incluyen un atributo similar que lo sustituye

Otra causa de su desuso es porque es posible simularlo mediante hojas de estilo
```
<p><center>A veces... veo muertos</center></p>
```
En el ejemplo se ha escrito un párrafo y hemos forzado su centrado

Con lo que obtendremos:

A veces… veo muertos
hr
se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo

No tiene etiqueta de cierre
```
<p>A veces... veo muertos<hr/>
En un lugar de la mancha de cuyo nombre no quiero acordarme...</p>
```
En el ejemplo se ha escrito un párrafo y hemos añadido una raya horizontal para separarlo para simular que hay dos párrafos

Con lo que obtendremos:

A veces… veo muertos

En un lugar de la mancha de cuyo nombre no quiero acordarme…
sup
sirve para obtener una fórmula matemática que incluya un índice
```
m<sup>2</sup>
```
En el ejemplo se ha escrito un texto con una fórmula matemática en la cual le hemos asignado el índice 2

Con lo que obtendremos:
m²
sub
sirve para obtener una fórmula matemática que incluya un subíndice
```
m<sub>2</sub>
```
En el ejemplo se ha escrito un texto con una fórmula matemática en la cual le hemos asignado el subíndice 2

Con lo que obtendremos:
m₂
italic
pone el texto en cursiva

Se puede usar su forma corta i, ya que es equivalente
```
<i>A veces... veo muertos</i>
```
En el ejemplo se ha escrito un texto en cursiva

Con lo que obtendremos:
A veces… veo muertos
em
indica que se va a enfacitar el texto, normalmente se pone el texto en cursiva, aunque si usamos una hoja de estilo podemos elegir de qué forma será enfacitado
```
<em>A veces... veo muertos</em>
```
En el ejemplo se ha escrito un texto enfacitado

Con lo que obtendremos:
A veces… veo muertos
bold
pone el texto en negrita

Se puede usar su forma corta b, ya que es equivalente
```
<b>A veces... veo muertos</b>
```
En el ejemplo se ha escrito un texto en negrita

Con lo que obtendremos:
A veces… veo muertos
strong
indica que se va a enfacitar más el texto, normalmente se pone el texto en negrita, aunque si usamos una hoja de estilo podemos elegir de qué forma será enfacitado
```
<strong>A veces... veo muertos</strong>
```
En el ejemplo se ha escrito un texto con mayor énfasis

Con lo que obtendremos:
A veces… veo muertos
code
incrusta código en medio de un párrafo de manera similar a pre, pero sin crear margenes a izquierda y derecha
```
<p>A veces...<code>&nbsp;</code>veo muertos</p>
```
En el ejemplo se ha escrito un párrafo con el carácter especial de espacio en blanco, pero al incrustarlo como código, en la página se visualizará de forma literal

Con lo que obtendremos:

A veces… veo muertos

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Cuerpo de una página Html

Cuerpo de una página Html

Estructura del documento

Elementos de estructura semántica

Elementos de estructuración del texto

Elementos de caracterización del texto

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Cuerpo de una página Html

Estructura del documento

Elementos de estructura semántica

Elementos de estructuración del texto

Elementos de caracterización del texto

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies