Ejercicio migración de xhtml a html5. Estructura web semántica.

Ejercicio migración de xhtml a html5. Estructura web semántica.

Print Friendly, PDF & Email
Ejercicio migración de xhtml a html5. Estructura web semántica.
Valora esta entrada

Este ejercicio consiste en actualizar la estructura de una página web a html5.

Sirva como ejemplo este ejercicio muy parecido.

Te sugiero leer esta entrada con apuntes de teoría de clase.

Entremos en materia.

Enunciado

Traduce la solución presentada en este ejercicio, a html5.

Solución del ejercicio

Es importante considerar que no existe una solución única.

Es una cuestión subjetiva y según el criterio de cada uno.

Para solucionar el ejercicio se divide el documento en

  • <header>. Contiene un <nav>
  • <div id=”container”></div>. El container no tiene significado semántico. Se usa para agrupar un <main>. Este ejercicio no contiene un <aside>.
  • <footer>. El footer contiene diversos <section>.

La etiqueta <style> del <head> (no confundir <head> con <header>) se ha visto modificada.

<!DOCTYPE html>
<html>
<head>
	<title>Capas web</title>
	<meta charset="utf-8"/>
	<meta name="description" content="Ejemplo de documento html con capas como paso intermedio a transformar <div> en etiquetas de html5"/>
	<meta name="author" content="Francesc Ricart"/>

	<style>
		div, header, nav, main, aside, footer, figure, caption, section, article{
			border:1px solid #000000;
			padding:5px 10px;
		} 
	</style>

</head>
<body>
<div id="wrapper">
	<!-- cabecera -->
	<header>
		<img src="" alt="logotipo"/>
		<a href="tel:977207030" title="Llámenos">977207030</a>
		<!-- Menú de navegación -->
		<nav>
			<ul>
				<li><a href="">Servicios</a></li>
				<li><a href="">Blog</a></li>
				<li><a href="">Contacto</a></li>			
			</ul>
		</nav>
	</header>

	<!-- cuerpo principal del documento -->
	<div id="container">
		<main>
			<section>
				<h1>Un título muy representativo</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</section>
			
			<section>			
				<video controls src=""></video>
				<!-- contenido -->
				<article>
					<h2>Un título 2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="" title="ir a...">Saber más</a>
				</article>
			</section>
			
			<section>
				<!-- contenido -->
				<article>
					<h2>Un título 2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="" title="ir a...">Saber más</a>
				</article>
				<audio controls src=""></audio>
			</section>					
		</main>
	</div>

	<!-- pie de página -->
	<footer>
		<section>
			<h3>Sobre mí</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt.</p>
		</section>
		<section>
			<h3>Horarios</h3>
			<p>Mañanas:9.00-13.00<br/>Tardes:16.00-19.00<br/>Domingo cerrado.</p>
		</section>
		<section>
			<img src="" alt="ISO9001"/>
			<img src="" alt="ISO14001"/>
		</section>
	</footer>

	<!-- ancla -->
	<a href="#wrapper">Subir</a>
</div>
</body>

</html>

¡Hola!

Querido lector,

Con este ejercicio deseo que pasar de usar <div> para todo a etiquetas semánticas de estructura html5 sea muchísimo más fácil.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio html sobre listas anidadas para un menú de navegación
- 126
Ejercicio html dónde se práctica como anidar correctamente una lista no ordenada. Esta lista simula un futuro menú de navegación. Incluye solución.
Respuesta a dudas típicas cuando aprendemos html por primera vez
- 100
Cuando aprendes HTML por primera vez se presentan dudas lógicas fruto de nuestra inseguridad. Desafortunadamente en la red, en muchas ocasiones no encontramos las respuestas que necesitamos. En esta ...
Etiquetas básicas introductoras al html5
- 1075
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Imágenes en html: la etiqueta img
- 583
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Enlaces en html: la etiqueta a
- 268
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Ejercicio estructura web mediante capas con div e id
- 105
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.
Ejercicio html sobre códigos HTML y caracteres especiales
- 84
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Formatos de imagen png, gif, jpg y svg. ¿Cuándo usarlos?
- 88
¿Que formato de imagen usar? Influye la velocidad de carga, las transparencias, animaciones y la seguridad. Resumo las ideas clave.
Ejercicio html sobre url relativas y url absolutas
- 93
Ejercicio práctico html útil dónde se practica "../" y "nombrecarpeta/" para navegar con la etiqueta por los documentos de un proyecto web. Incluye solución
Resumen de atributos html para ayudarnos a memorizar
- 369
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.