Con algunas etiquetas de HTML5 podemos marcar contenido de nuestra web para que sea conocido por los robots.
Un esquema de nuestra web podría ser como el siguiente:
Para la cabecera de nuestra web usaremos la etiqueta “header”, no confundir nunca con “head”. Dentro de ella pondremos la imagen y el titulo de nuestra web.
Despues podremos crear el menú de nuestra web poniendo una lista con enlaces dentro de la etiqueta “nav”.
Seguidamente pondremos la etiqueta “section” y dentro de esta cada contenido principal de nuestra web dentro de la etiqueta “article”.
Para el contenido secundario, redes, palabras, buscador, etc, usaremos la etiqueta “aside”.
Y como fin de nuestra plantilla web terminaremos con el pie indicado con la etiqueta “footer”, quedando el código de la siguiente forma:
<!DOCTYPE html><html lang="es"><head><meta charset="utf-8"><title>Mi primera Web</title></head><body><header style="background:red;"><h1>Mi primera Web</h1><figure><img src="img/jose.jpg" alt="Imagen de Jose" title="Imagen" widht="80px" height="80px"/></figure></header><nav style="background: yellow; color:red;"><ul><li><a href="inicio.html">Inicio</a></li><li><a href="contenido.html">Contenido</a></li><li><a href="contacto.html">Contacto</a></li></ul></nav><section style="background: pink;float:left;width:80%;"><article style="padding:10px;"><h2>Primer articulo</h2><p><em>Lorem Ipsum</em> is simply dummy <strong>text</strong> of the printing and typesetting industry.<br/>Lorem Ipsum has been <i>the industry's standard</i> dummy text ever since the 1500s,<br/>when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><hr/>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently<br/>with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></article><article style="padding:10px;"><h2>Segundo articulo</h2><p><em>Lorem Ipsum</em> is simply dummy <strong>text</strong> of the printing and typesetting industry.<br/>Lorem Ipsum has been <i>the industry's standard</i> dummy text ever since the 1500s,<br/>when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><hr/>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently<br/>with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></article><article style="padding:10px;"><h2>Tercero articulo</h2><p><em>Lorem Ipsum</em> is simply dummy <strong>text</strong> of the printing and typesetting industry.<br/>Lorem Ipsum has been <i>the industry's standard</i> dummy text ever since the 1500s,<br/>when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><hr/>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently<br/>with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></article></section><aside style="background:orange;float:left;width:20%;"><h2>Sigueme</h2><ul><li><a href="twitter.html">Twitter</a></li><li><a href="facebook.html">Facebook</a></li><li><a href="instagram.html">Instagram</a></li></ul></aside><footer style="background:blue;display:block;clear:both;height:120px;padding:10px;"><blockquote>Jose Ojeda 2020©</blockquote></footer></body></html>
En el código introduzco dentro de cada etiqueta un estilo, para poder destacar las etiquetas que acabamos de ver.
Dentro de los estilos, he marcado cada etiqueta con un color para destacarla y la etiqueta del contenido principal y del secundario con propiedades de flotación y ancho para cambiar el flujo normal de la visualización y que compartan el ancho.
Esta forma de dar estilos es solo para marcar temporalmente las nuevas etiquetas, en el próximo apartado veremos CSS y realizaremos el formato de la web desde un archivo externo, para mantener el contenido HTML por un lado y el formato por otro.
No hay comentarios:
Publicar un comentario