div semánticos

Un div nos sirve para organizar la información a nivel de diseño de la página. Podemos usar div's indistintamente para cualquier parte de la página.

header, footer, section, nav, aside son los div con un valor semántico añadido. La propia etiqueta nos indica que tipo de información contiene, esto no ocurría con los div.

Ventajas:

  • Facilitan a los motores de búsqueda la indexación de la página.
  • Mejora la accesibilidad para personas con deficiencias visuales.
  • Hace más fácil al programador entender la página.

Los siguientes elementos contienen información de la sección a la que pertenecen. Pueden usarse dentro de cualquier elemento flotante, exceptuando sí mismos, el otro elemento y el elemento address. <header> contiene una cabecera (logo, titulo, menus, etc. ). <footer>(para el año de publicación, copyright).

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<p>
			Contenido de la página
		</p>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<section> – es como un div, en el sentido de que agrupa elementos. La diferencia es que un section implica una relación semántica entre los elementos que contiene, y el div no. Puede dividirse en diferentes entradas o artículos.

Es un área dentro del documento que queremos distinguir por algún motivo. Generalmente de estilo.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<section>
			<p>
				Contenido de la página
			</p>
			</section>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<article> – artículos, suelen ir dentro de la sección, aunque no es necesario

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<section>
			<p>
				Contenido de la página fuera de los artículos
			</p>
			<article>
				<h2>Titulo del artículo</h2>
				<p>Contenido del artículo</p>
			</article>
		</section>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<aside> – contenido tangencial

Se usa para poner notas, trucos, una explicación, una leyenda, etc.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<section>
			<p>
				Contenido de la página
			</p>
			<article>
				<h2>Titulo del artículo</h2>
				<p>Contenido del artículo</p>
			</article>
			<aside>
				Contenido tangencial
			</aside>
		</section>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<nav> – almacena los menús de navegación. Habitualmente están en el header de la página.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Página sencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
			<nav>
				<ul>
					<li><a href="#">Enlace 1</a></li>
					<li><a href="#">Enlace 2</a></li>
					<li><a href="#">Enlace 3</a></li>
				</ul>
			</nav>
		</header>
		<p>
			Contenido de la página
		</p>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Enlaces e imágenes
  6. Listas
  7. Listas
  8. iframes
  9. Páginas de consulta
  10. Tablas
  11. Estilos en línea
  12. Unidades de medida
  13. Hacer una NewsLetter con HTML
  14. favicon
  15. Hojas de estilos
  16. Capas
  17. GIMP
  18. Selectores CSS
  19. Margin Collapse
  20. padding y width
  21. Ejercicios de maquetación vertical
  22. display:block, inline, inline-block
  23. img vs background
  24. Flex Box
  25. Hacer una newsletter responsive sin media queries
  26. Algunos tips
  27. Ejercicios
  28. Break! - gran día de repaso
  29. Ejercicio - background centrado
  30. Links de interés
  31. position
  32. Opacidades
  33. Popups con CSS
  34. Galería de fotos
  35. Navigation Bar
  36. Estilo important!
  37. Hacer páginas reales
  38. Grid Layout
  39. Selectores avanzados de CSS
  40. Página de error 404
  41. Insertar un buscador de google
  42. Dominio y alojamiento
  43. Ejercicio - Proyecto
  44. HTML5: definición y ejemplos
  45. HTML5 vs HTML4
  46. Content editable
  47. Soporte para textos asiáticos
  48. divs semánticos
  49. Video y audio
  50. svg
  51. wbr - Word Break
  52. Formularios
  53. Motores de navegación
  54. text-shadow
  55. border-radius, box-shadow
  56. border-image
  57. background-size
  58. Multiple Background
  59. Background transparency
  60. Gradientes
  61. Fuentes
  62. columns
  63. text-overflow
  64. Animaciones con CSS3
  65. Responsive design
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?