Jose J. Fernández Programador. Desarrollador web y SEO en León

Curso de HTML: maquetación semántica de una página en HTML 5

Jose J. Fernández

Curso HTML

0. La etiqueta <body>

El elemento body es el segundo elemento que va dentro de la etiqueta html como vimos en la sección anterior. Dentro de él colocaremos el código que queremos que se muestre cuando el visitante navegue por nuestra página web.

En esta entrega del curso veremos cómo maquetar una página web. La maquetación consta de dos etapas: la primera se realiza sólo con HTML 5 y se trata de crear una estructura de etiquetas para albergar todo el contenido y las distintas secciones. La segunda etapa se realiza sólo con CSS, y consiste en darle a la página el aspecto visual que queramos así como determinar la colocación en pantalla de todos los elementos.

Una de las novedades de HTML 5 es que permite una maquetación semántica gracias a sus nuevas etiquetas. ¿Qué es maquetación semántica? Significa que las etiquetas, pese a comportarse de la misma forma, significan cosas diferentes.

En versiones anteriores de HTML sólo había una etiqueta “contenedor” básica: <div>. Un menú, un artículo, un banner, una foto… Se enmarcaban dentro de la etiqueta <div> en casi todos los casos. Era muy cómodo de aprender, pero muy difícil de procesar con programas u otras páginas web.

Piensa en cuando compartes contenido en Twitter, Facebook o Google+, éstos automáticamente reconocen el texto del artículo e ignoran los menús de la página, seleccionan una foto para ilustrar el artículo y suelen acertar con cuál elegir, generan una descripción corta… Todo eso es posible porque en las páginas que compartes se utiliza probablemente una maquetación semántica junto con otras técnicas que veremos más adelante en el curso.

En otras palabras, la maquetación semántica aumenta la dimensión social de Internet. Y desde el punto de vista técnico, es más fácil leer y entender un código con etiquetas que tienen significado que no un batiburrillo de etiquetas <div> sin sentido alguno.

Si te has convencido de que la maquetación semántica es positiva, bienvenido a uno de los pocos sitios de la red en castellano en el que puedes aprender a realizarla de la forma correcta. En esta entrega del curso descubriremos esas nuevas etiquetas semánticas de HTML 5 y aprenderemos a utilizarlas adecuadamente.

1. Pasos previos a la maquetación: wireframing

Decimos que maquetar consta de dos etapas: generación de la estructura con HTML 5 y diseño y colocación con CSS. Pero para implementar una estructura, hay que saber qué estructura implementar.

El wireframing consiste en realizar un boceto o esquema sencillo de lo que queremos hacer en la página web. A ese esquema lo llamamos wireframe o mockup. ¿Cómo se hace uno de esos? Cada uno lo hace un poco a su manera, tienes a tu disposición un montón de herramientas online -como Balsamiq, sobre el cual Alejandro ha escrito un artículo-, o también puedes utilizar post-its como hacen algunos, mientras que otros preferimos hacerlos a mano.

Al principio probablemente no sabrás exactamente qué tienes que dibujar o incluir en un wireframe. Intenta pensar en dibujar una página web. Olvida el HTML por ahora y simplemente dibuja la estructura de tu nueva web, y si quieres el diseño, pero esa parte la atacaremos con el curso de CSS más adelante. Si quieres ver algunos ejemplos, aquí tienes dos:

Ejemplos de wireframes en desarrollo web

Como ves cualquier método es bueno si a ti te sirve. Los hay mejores y peores, más trabajados o menos, más sofisticados o más rústicos, pero lo importante es que tiene que ser de utilidad para ti. Sea como sea, elige el método que a ti te resulte más cómodo para trabajar, lo importante es que los hagas y los entiendas, y por supuesto que te ayuden a la hora de hacer tu página web.

2. Estructura general de la página: interpreta el wireframe

A partir de ahora vamos a trabajar sobre un wireframe que yo voy a proponer, y que es ni más ni menos que mi propia página web :) he sacado una captura de pantalla de la misma y la he coloreado con las secciones más relevantes que vamos a tener que realizar en HTML.

Wireframe para maquetación web

Identifiquemos sobre ese esquema cada una de las partes de que constará la página web.

  • Gris: es la zona exterior de la página en la que no va nada.
  • Borde negro: es un contenedor dentro del cual va toda la página.
  • Verde: el cabecero de la página (que no del documento HTML) donde va el título y una foto.
  • Azul: el menú de navegación.
  • Amarillo: el contenido de la página.
  • Rojo: los artículos.
  • Violeta: la barra lateral.
  • No aparece en la imagen: el pie de página, que puedes ver si bajas hasta abajo en esta página :)

Si te fijas, hay una estructura jerárquica implícita: el borde negro contiene a todo. Cabecero, menú y contenido (amarillo) se suceden dentro del contenedor, y dentro del amarillo hay dos columnas, con los artículos y la barra lateral. Debajo de éstos estaría el pie de página. Es decir, sería algo así:

  • Contenedor
    • Cabecero
    • Menú
    • Cuerpo
      • Contenido
      • Barra lateral
    • Pie de página

Podemos representar esa estructura en HTML fácilmente, pero necesitamos saber con qué etiquetas hacerlo. Veámoslas.

3. Teoría: las etiquetas de estructura en HTML 5

Para estructurar nuestra página, HTML 5 pone a nuestra disposición las siguientes etiquetas que debemos conocer y entender.

  • <header>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <nav>
  • <main>
  • <article>
  • <section>
  • <aside>
  • <footer>
  • <div>

Si sabes inglés te darás cuenta de que son de por si bastante autodescriptivas, pero existen algunos puntos que no se pueden intuir de su propio nombre y que explicaremos con todo detalle a partir de aquí.

4. Cabecero: la etiqueta <header>

Esta etiqueta sirve para delimitar el cabecero de la página, o el de cualquier otra zona de contenido. Es decir, puede haber varios header en un mismo documento HTML, que se corresponderán con una u otra parte de la página dependiendo del elemento dentro del cual lo coloquemos.

A continuación te dejo un ejemplo de una página con un cabecero para un artículo y un cabecero global de la página.

<body>
	<header>
		<p>PÁGINA</p>
		<p>Cabecero de la página</p>
	</header>
	<article>
		<header>
			<p>ARTÍCULO</p>
			<p>Cabecero del artículo</p>
		</header>
		<!-- Más etiquetas dentro del artículo -->
	</article>
</body>

¿Qué información se suele incluir en el cabecero del artículo? El título de éste, quizá una imagen destacada, la fecha en que fue escrito… ¿Y el cabecero de la página? El título de ésta, una frase corta o eslogan, un logo… Muy sencillo de entender como ves.

5. Títulos: las etiquetas <h1>, <h2> y siguientes

Comentábamos que el cabecero albergaba el título, de la página si el cabecero era general, y del artículo si el cabecero pertenecía a éste. ¿Cómo se representa este título? Con las etiquetas de título, que van desde el <h1> hasta el <h6>.

Habiendo 6 etiquetas de título, su importancia se reduce a medida que aumenta su número. Es decir, <h1> es mucho más importante que <h6>. Por ello en la página debe haber un único <h1>. No es una norma de oro y puedes incumplirla (HTML no nos fuerza a nada en este sentido), pero es óptimo si sólo hay uno.

En el <h1> puede ir el título de la página si se trata de la página principal del sitio web, o el título de un artículo si estás en la página de ese artículo. En la portada los <h2> podrían ser los títulos de todos los artículos, mientras que los <h3> podrían ser las secciones de cada uno de los artículos, y los <h4> cada una de las partes de dichas secciones… Así hasta llegar al <h6>.

Como ves, el significado de la información que contienen determina si necesitamos un h1 o un h2. Esto es parte de la semántica que tanto mencionamos cuando hablamos de HTML 5. Lo que siempre va a cumplirse es que en un <h1> incluiremos el título más importante -o relevante- de esa página, y en siguientes etiquetas (<h2>, <h3>…) los títulos que son menos importantes.

Ampliando el ejemplo anterior, veamos un ejemplo con títulos:

<body>
	<header>
		<h1>Mi nueva página en HTML 5</h1>
	</header>
	<article>
		<header>
			<h2>Mi curso de HTML</h2>
		</header>
		<!-- Más etiquetas dentro del artículo -->
	</article>
	<article>
		<header>
			<h2>HTML 5 me gusta</h2>
		</header>
		<!-- Más etiquetas dentro del artículo -->
	</article>
</body>

6. Navegación: la etiqueta <nav>

Su propio nombre lo indica: esta etiqueta sirve para delimitar menús de navegación. El típico menú superior como el que tiene esta página arriba del todo, o también el de “Ver artículo siguiente” y “Ver artículo anterior”, o los de paginación entre el listado de artículos…

Si creamos un menú con esta etiqueta dentro de la etiqueta <body>, parece evidente que se trata de un menú de navegación general de la página. Si lo creamos dentro de la etiqueta <article>, en principio podría ser un menú de artículo siguiente y artículo anterior. Volvemos a la semántica ;)

Esta etiqueta no nos dice qué tiene que ir dentro de ella: si una lista, párrafos o simplemente un texto, por lo que podremos construir nuestros menús como queramos, aunque hay unas formas más recomendables (listas) que otras (párrafos). Más adelante veremos la forma adecuada de construir menús.

Ampliamos el ejemplo anterior con menús:

<body>
	<header>
		<h1>Mi nueva página en HTML 5</h1>
	</header>
	<nav>
		<p>Inicio</p>
		<p>Acerca de</p>
	</nav>
	<article>
		<header>
			<h2>Mi curso de HTML</h2>
		</header>
		<!-- Más etiquetas dentro del artículo -->
	</article>
	<article>
		<header>
			<h2>HTML 5 me gusta</h2>
		</header>
		<!-- Más etiquetas dentro del artículo -->
	</article>
</body>

7. Bloque de contenido principal: la etiqueta <main>

En inglés main significa “principal”. Utilizaremos la etiqueta <main> para abarcar la parte de la web donde se encuentra el contenido que los visitantes quieren leer. Los visitantes no quieren leer los menús (no entran en una página a leer los menús de navegación), ni las barras laterales, ni el pie de página. Los visitantes entran a leer los artículos, posts de un blog, comentarios en un foro… Y es sólamente ese contenido el que debe ir englobado dentro de <main>. Fuera deberán quedar barras laterales, cabecero y pie de página, entre otros.

El propósito principal de esta etiqueta es aumentar la accesibilidad de la página, y puedes consultar la especificación de HTML 5 y la ayuda de Mozilla para averiguar más sobre ella. Generalmente es muy fácil implementar esta etiqueta en el código, ya que suele ser sencillo identificar la zona interesante de la web.

8. Unidad de contenido independiente: la etiqueta <article>

Esta etiqueta sirve para delimitar una unidad independiente de contenido. Una noticia completa, una guía, un artículo… Todo ello iría dentro de la etiqueta <article>. La regla general es que si coges todo lo que hay dentro de esa etiqueta y lo colocas en Facebook o en otra página web, el contenido será completo (toda la noticia, todo el artículo, etc) y tendrá sentido. Con independiente nos referimos justamente a eso: que tiene sentido por si misma tanto en tu página como fuera de ella.

Imagina una página web de noticias, donde en la portada se muestran al mismo tiempo unas pocas noticias. Cada una de esas noticias sería un <article> dentro del cual podría ir un <header> con el título, un <footer> con más información (veremos esta etiqueta más adelante) u otras etiquetas.

Otro ejemplo puede ser esta misma página web. Desde el título del artículo arriba del todo (“Curso de HTML: maquetación semántica de una página en HTML 5”) hasta el formulario para escribir comentarios, todo está englobado dentro de un <article>.

Échale un vistazo a este ejemplo sobre esta etiqueta:

<article>
	<h2>Título del artículo</h2>
	<section>
		<p>Párrafo.</p>
		<p>Párrafo.</p>
		<p>Párrafo.</p>
	</section>
	<footer>
		<p>Escrito por Jose J. Fernández</p>
	</footer>
</article>

9. Porción de contenido: la etiqueta <section>

Colocaremos esta etiqueta encerrando en ella una parte del contenido del <article>. Por ejemplo, si contaras un cuento en un artículo en la página web, todo el cuento sería un <article>, pero cada uno de los capítulos sería un <section>.

Es decir, <section> son los apartados, subapartados, capítulos o secciones de un mismo contenido independiente. ¿Escribes un artículo, noticia o tutorial? Irá dentro de <article>, pero dentro de éste aún puedes dividirlo en varias partes con la etiqueta <section>.

Un ejemplo del uso de la etiqueta:

<article>
	<h2>Título del artículo</h2>
	<section>
		<h3>Título del primer capítulo</h3>
		<p>Primer párrafo.</p>
		<p>Segundo párrafo.</p>
		<p>Tercer párrafo.</p>
	</section>
	<section>
		<h3>Título del segundo capítulo</h3>
		<p>Primer párrafo.</p>
		<p>Segundo párrafo.</p>
		<p>Tercer párrafo.</p>
	</section>
	<section>
		<h3>Título del tercer capítulo</h3>
		<p>Primer párrafo.</p>
		<p>Segundo párrafo.</p>
		<p>Tercer párrafo.</p>
	</section>
	<footer>
		<p>Escrito por Jose J. Fernández</p>
	</footer>
</article>

10. Bloques relacionados: la etiqueta <aside>

A veces puede interesarnos incluir bloques con información relacionada en nuestra página. Un anuncio, un listado de artículos relacionados, o incluso comentarios de los lectores sobre un artículo. Todo aquel contenido que, como el mencionado en estos ejemplos, esté de alguna manera relacionado con el contenido principal (el artículo, la noticia o lo que sea) pero que no sea parte de éste (recuerda la etiqueta <section>) irá englobado dentro de un bloque <aside>.

Algunos ejemplos claros son los mencionados hasta ahora. Recuerda que si colocas <aside> dentro de <article> estás indicando -por la semántica- que esa información está relacionada con el artículo o contenido en cuestión, pero si lo colocas fuera de éste, por ejemplo justo a su lado, dentro de <body>, estás indicando que es un contenido relacionado con la página, en general.

Te pongo un ejemplo de un aside con comentarios acerca de un artículo. Date cuenta del uso de <article> dentro de nuestro <aside> para englobar cada comentario.

<article>
	<h2>Título del artículo</h2>
	<section>
		<h3>Título del primer capítulo</h3>
		<p>Primer párrafo.</p>
		<p>Segundo párrafo.</p>
		<p>Tercer párrafo.</p>
	</section>
	<section>
		<h3>Título del segundo capítulo</h3>
		<p>Primer párrafo.</p>
		<p>Segundo párrafo.</p>
		<p>Tercer párrafo.</p>
	</section>
	<footer>
		<p>Escrito por Jose J. Fernández</p>
	</footer>
	<aside>
		<h3>Comentarios</h3>
		<article>
			<h4>Me ha gustado</h4>
			<section>
				<p>Me ha parecido un excelente artículo.</p>
			</section>
			<footer>
				<p>Escrito por Jaimito.</p>
			</footer>
		</article>
		<article>
			<h4>A mi no tanto</h4>
			<section>
				<p>Creo que es un artículo mediocre.</p>
				<p>Además es muy corto.</p>
			</section>
			<footer>
				<p>Escrito por Juanito.</p>
			</footer>
		</article>
	</aside>
</article>

11. Pie: la etiqueta <footer>

Ya hemos utilizado esta etiqueta a lo largo del curso en repetidas ocasiones. Su función es muy similar a la de la etiqueta <header>, en tanto en cuanto es prácticamente intercambiable con ésta sin problemas.

La etiqueta <footer> permite incluir información adicional sobre el contenido, o bien sobre la página completa, dependiendo del lugar donde esté. Si, como a la etiqueta <header>, lo colocamos inmediatamente dentro del <body>, estaremos hablando de un pie de página, mientras que si lo colocamos inmediatamente dentro de <article> hablaremos del pie de ese contenido en concreto, pudiendo haber varios <footer> en la página, uno general y uno para cada pieza de contenido.

No es necesario incluir ambas, <footer> y <header>, y ni <footer> tiene que ir abajo ni <header> arriba. Se trata de una cuestión de preferencia personal. Si incluyo el título, yo utilizo <header>. Si no lo incluyo, utilizo <footer>, aunque éste vaya visualmente colocado encima del contenido.

12. Contenedor genérico: la etiqueta <div>

Hemos visto una serie de etiquetas-contenedor dentro de las cuales colocamos distintos tipos de información o contenido. Cada uno tiene una función concreta mediante la cual podemos dotar de significado al código de la página, pero existirán situaciones en las que ninguna de dichas funciones nos sirva.

Cuando ninguno de los contenedores anteriores nos sean útiles, recurriremos a la etiqueta <div>. Se trata de un contenedor genérico, que principalmente utilizaremos en estas situaciones:

  • Cuando queramos aplicar un estilo o aspecto visual mediante código CSS a varios elementos contiguos.
  • Porque el código de programación que utilizamos requiera englobar varios elementos en una misma etiqueta.
  • Cuando necesitemos englobar varios elementos por algún otro motivo.

13. Uso de las diferentes etiquetas

En HTML 5 existen multitud de contenedores que a pesar de la misma función, tienen todos ellos significados diferentes. Aprender a utilizarlos correctamente es vital para crear una estructura web semántica. En este apartado veremos algunas de las dudas más habituales a la hora de elegir entre uno y otro contenedor.

  • Cuándo elegir <article> frente a <section>: utilizaremos <article> para cada pieza independiente de contenido, y <section> dentro de ésta para separar cada una de las posibles partes de dicho contenido. Es decir, utilizaremos <section> dentro de <article>. Así pues, <section> no servirá para delimitar zonas de la web, ni para crear bloques independientes de contenido.
  • Cuándo elegir <main> frente a <div>: la primera nos sirve para delimitar la zona de la página donde va el contenido principal. Es decir, dentro de ésta irán la mayoría o todos los <article> que haya en nuestra página. Utilizaremos <div> sólo para aplicar estilos visuales sobre dicho contenedor, o si necesitamos un contenedor cuya función no recoge ya ninguno de los otros.

14. Errores comunes al maquetar en HTML 5

  1. Demasiado <header>: puedes caer en la tentación de incluir un <header> para un <section> dentro de un <article> que también tiene su <header> cuando sólo vas a utilizar un título (<h1>, por ejemplo) dentro de éste. Podemos omitir el <header> cuando éste sólo va a contener un elemento de titular.

    Ejemplo en el que todas las etiquetas <header> son prescindibles:

    <article>
    	<header>
    		<h2>Título del artículo</h2>
    	</header>
    	<section>
    		<header>
    			<h3>Título del primer capítulo</h3>
    		</header>
    		<p>Primer párrafo.</p>
    		<p>Segundo párrafo.</p>
    		<p>Tercer párrafo.</p>
    	</section>
    	<section>
    		<header>
    			<h3>Título del segundo capítulo</h3>
    		</header>
    		<p>Primer párrafo.</p>
    		<p>Segundo párrafo.</p>
    		<p>Tercer párrafo.</p>
    	</section>
    	<footer>
    		<p>Escrito por Jose J. Fernández</p>
    	</footer>
    </article>
  2. Utilizar <div>: es un error si se hace de manera incorrecta. Recuerda: utiliza siempre que puedas los contenedores de HTML 5, recurre sólo a <div> si es estrictamente necesario.

15. Ejemplo de estructura utilizando todos los elementos

El siguiente ejemplo utiliza todo lo que hemos aprendido sobre estructura y maquetación en HTML 5. Para entender el código, te vuelvo a mostrar el wireframe sobre el que estamos trabajando.

Wireframe para maquetación web

Queremos transformar en HTML 5 el anterior wireframe. Mi propuesta es la siguiente:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
	</head>
	<body>
		<div>
			<header>
				<h1>Jose J. Fernández</h1>
				<h2>Desarrollo web y cursos de HTML</h2>
			</header>
			<nav>
				<p>Inicio</p>
				<p>Artículos</p>
				<p>Cursos</p>
				<p>Contacto</p>
			</nav>
			<div>
				<main>
					<article>
						<header>
							<h1>Curso de HTML: tu primera página en HTML</h1>
							<p>Aquí iría la imagen del artículo</p>
						</header>
						<section>
							<p>Hola, soy un texto genérico para decir que aquí
							iría la introducción al artículo en cuestión. Se
							trataría de un texto breve para resumir el contenido
							del artículo.</p>
						</section>
						<footer>
							<p>Escrito por Jose J. Fernández a 24 de Febrero de 2014</p>
						</footer>
						<aside>
							<h4>Comentarios</h4>
							<article>
								<section>
									<p>Excelente artículo.</p>
								</section>
								<footer>
									<p>Escrito por Jaimito.</p>
								</footer>
							</article>
							<article>
								<section>
									<p>Me ha gustado.</p>
								</section>
								<footer>
									<p>Escrito por Juanito.</p>
								</footer>
							</article>
						</aside>
					</article>
				</main>
				<aside>
					<div>
						<h6>Sígueme</h6>
						<p>Twitter</p>
						<p>Facebook</p>
						<p>Pinterest</p>
					</div>
					<div>
						<h6>Curso online de HTML 5</h6>
						<p>Bienvenido a mi curso online.</p>
					</div>
				</aside>
			</div>
			<footer>
				<p>Creada por Jose J. Fernández - 2014</p>
			</footer>
		</div>
	</body>
</html>

Fíjate en todo lo siguiente:

  • El artículo principal tiene un <aside> con comentarios sobre éste. Cada comentario se engloba dentro de un <article>.
  • He utilizado <div> en cuatro ocasiones: el primero para generar la línea negra alrededor de toda la página (propósitos estéticos), el segundo para crear una estructura de dos columnas (también estético) que se correspondería con la zona amarilla del diagrama, y el tercero y el cuarto para encuadrar los bloques de la barra lateral en gris.
  • Si copias el código en un fichero .html, lo guardas y lo abres con el navegador verás texto negro simple y sin formato y nada tendrá sentido todavía, porque falta la información de estilo visual y el formato del texto. El formato del texto lo veremos en la siguiente entrega del curso, pero el estilo o aspecto visual lo veremos en un curso de CSS que lanzaré próximamente.

Si has conseguido entender hasta este punto, ya tienes un conocimiento considerable sobre maquetar en HTML 5. ¿Qué te falta? Saber dar formato al texto (listas, enlaces) y utilizar CSS. En la siguiente entrega del curso veremos formato de texto en HTML 5, pero CSS tendrá que esperar a un curso siguiente.

Siguiente entrega: Formato: presentación del texto en HTML 5

Samus 2014-05-31 - 18:45

Excelente nuevo capítulo del curso Jose, muy útil. Estoy deseando ya que llegue CSS! Muchas gracias por todo :)

Tenshoku 2014-06-02 - 21:54

Interesante blog Jose, me está gustando bastante. Ánimo y sigue así ;)

Jose J. Fernández 2014-06-04 - 21:47

Gracias por los comentarios, Samus y Tenshoku ;)

Estaba pensando en empezar el de CSS aun con el de HTML a medias. ¡Me apetece mucho! Pero creo que es mejor terminar primero el de HTML, que si no luego lo dejo colgado y los que lo van siguiendo se merecen un respeto.

Esta semana la he tenido liada (entrevistas, cosas con un par de clientes y otros asuntillos), a ver si puedo tener aunque sea parte de la entrega de esta semana del curso.

¡Gracias por seguir el blog compañeros!

Byron Boror 2014-10-02 - 19:41

Muchas gracias por el curso, la verdad he estado buscando la manera de incrementar mi conocimiento y experiencia en la maquetación Web, estoy contento por el material, espero el curso de CSS3, si pasas por mi página verás que he implementado una página en hosting gratuito, aunque me falta mucho. Gracias.

Carlos Ormeño 2014-11-07 - 08:25

Wow, excelente tutorial, me ha quedado completamente claro el uso de todas esas etiquetas! Me alegra haber pasado por tu página, hasta ahora la que mejor lo explica. Saludos!

Andrés Porras 2014-12-12 - 17:07

Acabo de leer el artículo y me ha aclarado ciertas dudas que tenia sobre aside y section.

Muchas gracias por buen articulo.

whitetower 2015-02-13 - 01:06

Muchas gracias por este curso gratuito. Estoy intentando iniciarme en la programación de páginas web y m esta gustando mucho

Sarri 2015-03-06 - 18:49

Hola, tengo dudas con section y article. Yo suelo meter los article dentro de los section. Por ejemplo en una web de noticias, yo pondria como section, las secciones de deportes, sucesos, nacional….. y dentro de estos, escribiria los diferentes articles.

Jose J. Fernández 2015-03-09 - 21:53

Me alegro de que el curso guste y, sobre todo, de que sea útil.

Sarri, es una duda que hemos tenido o aún tenemos todos :) creo que en versiones anteriores, el texto del estándar de la W3C no era demasiado aclarador, pero si te fijas ahora, incluyen section como hijo de article:

http://www.w3.org/TR/html5/sections.html#the-article-element

En otras palabras, que el planteamiento que dices no parece correcto. Otro tema es hasta dónde el planteamiento “oficial” es más útil o más semántico. En español desde luego es mucho más fácil de entender y más semántico tu planteamiento, que es de hecho lo que yo hacía hasta que me documenté para hacer el curso.

De todos modos, me parece algo trivial. La mayoría no usará section como indica W3C por el simple motivo de que ningún CMS genera esas etiquetas en el contenido de los usuarios (posts de blogs, foros, etc), ni tampoco aportan ninguna ventaja real sobre no utilizarlas.

En este blog sólo utilizo un section como contenedor global del artículo, lo cual no aporta nada de semántica: un article con un section, es como no poner el section. Tampoco se corresponde con el uso que documenta la W3C, pero de hacerlo, ¿qué ventaja me aportaría? ¿Sería “más correcto”? ¿Y en qué beneficiaría a mis usuarios? ¿Y a mi? Pues eso :)

Sarri 2015-03-10 - 01:20

Gracias por la aclaracion Jose J. Fernandez, lo tendré en cuenta. Y enhorabuena por este excelente curso.
Un saludo

esteban 2015-03-10 - 20:29

hola jose muy buen aporte , me gustaria saber como implementar esto en el css muchas gracias

Carlos Marroquin 2015-03-24 - 18:06

Explicas muy bien, muchas gracias por tu tiempo, Jose una pregunta, veo que tienes un tipo de trama en el fondo de tu pagina web, como lo realizas?.

Gracias

Jose J. Fernández 2015-03-25 - 22:01

Esteban, ¿qué quieres decir exactamente con implementar esto en el CSS? En realidad, sería implementar CSS sobre esto :)

Se trataría de añadir a los elementos de HTML el atributo class, y asignarles clases que luego en CSS se utilizan (con el selector de punto: .clase) para otorgar reglas CSS. Es algo que, si el tiempo me lo permite, veremos cuando realice el siguiente curso.

Carlos, pues este en concreto lo he descargado de SubtlePatterns, que es un excelente recurso para obtener patrones de fondo. Si preguntas por cómo crear los tuyos propios, yo los hago con GIMP. Hay una opción en Filtros > Mapa > Crear sin costuras que modifica los bordes de una imagen para poder utilizarla como mosaico. Esto en CSS sería:

body {
	background: url('ruta/img/patron.png') top left repeat;
}

javier 2015-04-10 - 22:58

Un cordial saludo, explicas muy bien el porque utilizar cada etiqueta,un curso muy bueno
gracias por compartir conocimiento

Felix 2015-05-03 - 20:52

Excelente articulo, voy a compartirlo en mi comunidad Google plus.

German 2015-06-12 - 16:35

Hola José, he visto y leído tu curso de Maquetación Semántica y tengo una observación al respecto:

Debo decir que soy novato en este tema, pero en las capacitaciones que he tenido al respecto la etiqueta es una etiqueta estructural que envuelve a todas las etiquetas y no al contrario como enseñas en tu curso; esto me confunde un poco, puedes indicarme. Precisamente por estos nombres y su función sobre la página como un todo cobra sentido la WEB Semántica.

Gracias.

German 2015-06-12 - 16:38

La etiqueta section es una etiqueta estructural que envuelve a las etiquetas article y no al contrario como enseñas en el curso. Por favor me puedes indicar?

Gracias.

Jose J. Fernández 2015-06-15 - 21:16

Hola Germán.

Siempre hay lío con la etiqueta section. Como yo no mando en esto del HTML, te remito a los ejemplos y al texto de quienes mandan (la W3C):

Creo que en todos los ejemplos, section está colocada como hija de article. Esto para mi ya marca bastante bien la dirección, pero si ahondamos un poco más en la redacción de la especificación oficial…

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Vale, respecto a article nadie tiene dudas: son cada uno de los elementos individuales de nuestra página. Un post del blog, un post en un foro, un artículo en una web… Cada entrada individual. Sin problemas hasta aquí. El lío viene con section:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Según esto, una sección sería una agrupación temática de contenido. Luego, no obstante, lo clarifica diciendo que cada sección normalmente va con un cabecero, y esto ya aclara un poco -pero sólo un poco- su significado. Se refiere a capítulos, zonas de un artículo, etc. Esto si te fijas suele ir con su título en libros y publicaciones, justamente como propone la W3C que debe ir section. De esta manera parece lógico pensar que section va como hija de article.

Por otro lado, el siguiente párrafo del estándar dice:

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis

Justamente corrobora lo anterior, aunque la redacción sea liosa y no esté del todo claro. Yo, en cambio, sí lo tengo claro: section hija de article.

No obstante a esta conclusión no llegué hasta profundizar bastante en el tema y releerme la especificación y los ejemplos un par de veces. Como mencionaba en comentarios anteriores, es una etiqueta que evito utilizar por la ambigüedad que introduce y porque no añade nada para el usuario final. Tampoco se introduce automáticamente en ningún CMS, por lo que para mi es una etiqueta bastante inútil tal y como está planteada.

Aunque, como curiosidad, si te fijas en el HTML de este blog, la utilizo tal y como tú propones ;) cuando lo maqueté aún no había redactado el curso, y estaba algo menos informado.

A mi personalmente, como ves, me parecía (y me parece) mejor el caso de uso que propones, aunque esté equivocado. En castellano, desde luego, sección nos lleva mucho más a pensar en un contenedor de artículos que al contrario.

En resumen: yo evito utilizarla. He podido ver que tampoco hay un consenso en la comunidad de desarrollo web, así que… Un poco en tierra de nadie esta etiqueta.

Un saludo.

Belkis 2015-12-21 - 20:38

Hola me gusta mucho tu página, estoy aprendiendo html y es muy sencilla la estructura ahora tengo dudas es cuando aplico los estilos se deben hacer en un archivo aparte? estoy trabajando con Block de notas.

Jose J. Fernández 2016-02-12 - 19:32

Belkis, sí, los estilos es recomendable colocarlos en un fichero aparte (en un .css). Se puede hacer en el mismo HTML con el atributo style, pero no es recomendable hacerlo.

Nuño Valencia 2016-04-15 - 17:43

Muy bien explicado genial artículo.

Didier 2016-04-24 - 04:40

Excelente material para aprender HTML5. Gracias.

frankkoq 2016-04-25 - 07:43

Me gusto muy entendible el articulo gracias!!

Germán 2018-06-10 - 06:00

Tenga en cuenta que NO todos los enlaces de un documento deben estar dentro de un elemento . El elemento está destinado solo al bloque principal de enlaces de navegación.

  1. Curso de HTML: el cabecero de un documento HTML | Jose J. Fernández

No se mostrará públicamente.

Un enlace a tu blog o página web.