HTML Etiquetas title, link y estructura del cuerpo

Etiqueta <title>

La etiqueta <title> va dentro del head, antes o después de las etiquetas <meta>. Suele verse casi siempre a continuación de las etiquetas <meta>. Tiene su par de cierre. Tiene varios propósitos, uno de ellos es cambiar el texto que aparece en la pestaña del navegador que estemos utilizando, si no ponemos nada, la información de la pestaña sería le de la ruta del archivo. Pero la función principal es que la información que introduzcamos en nuestro title va a ser la que haga que los buscadores busquen dicha etiqueta. Para un buscador es más importante el title que el <meta name="keywords"...>.

Etiqueta <link>

Esta etiqueta tiene la siguiente estructura

<link rel="stylesheet" href="mihojadeestilos.css" />

Normalmente va después de la etiqueta <title>.

Esta etiqueta sirve para enlazar documentos a nuestra página web. 'rel' quiere decir relativo o relacionado, por lo que rel nos dice que tipo de archivo estamos incluyendo, y href indica la ruta del archivo que queremos incluir en nuestra página web.

Organización del cuerpo <body>

Tendría la siguiente estructura.

Organización de body

que se corresponde con las siguientes etiquetas incluidas en HTML5

Estructura de HTML5

Para la cabecera se utiliza la etiqueta <header></header>. La barra de navegación se construye con <nav></nav>. Para una barra lateral se utiliza <aside></aside>. El contenido principal se hace con <section></section> y el pie de la página con la etiqueta <footer></footer>.

<header>

Veamos un ejm para utilizar <header>.

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<meta name="description" content="Descripción" />
<meta name="keywords" content="Palabras clave" />
<meta name="author" content="Sutil Web" />
<title>Primeros pasos</title>
</head>
<body>
<header>
<h1>Título de la página web</h1>
</header>
</body>
</html>

La etiqueta <h1> es un etiqueta de título. Existen 6 etiquetas de este tipo, desde h1 hasta h6, siendo h1 la etiqueta más importante y h6 la menos. La etiqueta h es importante para categorizar nuestra página y para que los buscadores.

<nav></nav>

Lo siguiente que vamos a incluir es una barra de navegación. Para ello utilizamos la etiqueta <nav></nav>. Dentro de estas etiquetas estará el código de nuestro menú.

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<meta name="description" content="Descripción" />
<meta name="keywords" content="Palabras clave" />
<meta name="author" content="Sutil Web" />
<title>Primeros pasos</title>
</head>
<body>

<header>
<h1>Título de la página web</h1>
</header>

<nav>
<ul>
<li>Quienes somos</li>
<li>Donde estamos</li>
<li>Más info</li>
</ul>
</nav>

</body>
</html>

La etiqueta <ul> construya una lista desordenada.