Mostrando entradas con la etiqueta etiqueta section article. Mostrar todas las entradas
Mostrando entradas con la etiqueta etiqueta section article. Mostrar todas las entradas

lunes, 18 de enero de 2016

Html5 - 4. Section + Article

En esta entrada explico las etiquetas "section" y "article".
La etiqueta "section" puede englobar una o varias etiqutas "article", se trata de la parte principal, la que lleva el contenido esencial de la pagina web que estamos creando.
El codigo del que partimos es el siguiente:
<!DOCTYPE html><html>
<head>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Aqui va el encabezado grande</h1>
<h2>Aqui un encabezado mas pequeño</h2>
</hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>

<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
<article>
<hgroup>
<h1>Aqui va el encabezado grande del segundo Article</h1>
<h2>Aqui un encabezado mas pequeño</h2></hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>

<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
</section>
</body>
</html>
Como podeis observar he introducido 2 article para que se vea bien la forma de usarlos, dentro de cada article he puesto un hgroup que agrupa 2 encabezados o titulos del parrafo, y seguidamente 2 parrafos con la etiqueta "p".
Es autoexplicativo, escribirlo en vuestro software para realizar el archivo html, para practicar y observar como se ve dicho codigo en el navegador que tengais.
Espero sea util, gracias.