Í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. Ejercicio resumen de fundamentos de HTML
  8. iframes
  9. Páginas de consulta
  10. Tablas
  11. Estilos en línea
  12. Unidades de medida
  13. Capas
  14. Hacer una NewsLetter con HTML
  15. favicon
  16. Hojas de estilos
  17. Selectores CSS
  18. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Ejercicio - background centrado
    6. background-size
    7. Multiple Background & size
    8. background con rgba
    9. Gradientes
    10. Fuentes
    11. columns
    12. Animaciones con transition
    13. text-overflow
    14. transform
  19. GIMP
  20. display:block, inline, inline-block
  21. Margin Collapse
  22. padding y width
  23. Ejercicios de maquetación vertical
  24. Hacer una newsletter responsive sin media queries
  25. img vs background
  26. Flexbox
  27. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. contenteditable
    6. Soporte para textos asiáticos
    7. wbr - Word Break
  28. Ejercicios de HTML
  29. Break! - gran día de repaso
  30. Links de interés
  31. position
  32. Opacidades
  33. Popups con CSS
  34. Ejercicio - Galería de fotos
  35. Navigation Bar
  36. !important
  37. Páginas reales
  38. Grid Layout
  39. Selectores avanzados de CSS
  40. HTML5: definición y ejemplos
  41. HTML5 vs HTML4
  42. divs semánticos
  43. Video y audio
  44. svg
  45. Formularios
  46. Animaciones con CSS3
  47. Responsive design
  48. Más ejercicios de html
  49. Página de error 404
  50. Insertar el buscador de google
  51. Dominio y alojamiento
  52. Ejercicio - Proyecto
  53. Ejercicio - Clientes y proveedores

divs 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, main, 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 introducción a un contenido.
  • Habitualmente contiene:
    • Una o varias etiquetas de encabezado (<h1> - <h6>)
    • Un logo o ícono.
    • Información del autor.
  • Puedes tener varios
<footer>

  • Contiene información sobre el elemento que lo envuelve. Típicamente:
    • Información de CopyRight
    • Información del autor.
    • Información de contacto.
    • Sitemap.
    • Enlace de regresar a la parte superior de la página.
    • Documentos relacionados.
<!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>

<main> . Define secciones dentro de la web, como un encabezado, o un pie, 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>
		<main>
			<p>
				Contenido de la página
			</p>
			</main>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<article>

  • Un artículo contiene una unidad de información que tiene sentido por sí misma. Ejemplos:
    • Una entrada de un blog.
    • Una noticia.
    • Un comentario.
    • Un comentario en un foro.
<!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>
		<main>
			<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>
		</main>
		<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.relacionados con un contenido principal.

<!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>
		<main>
			<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>
		</main>
		<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>

<main>

  • Especifica el contenido principal del documento.
  • El contenido de la etiqueta main no debe estar repetido en ningún otro sitio como sidebars, footers, etc.
  • Sólo puede haber una etiqueta main por página.
  • Esta etiqueta no debe estar anidada dentro de ninguna etiqueta <article>, <aside>, <footer>, <header> y <nav>.
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.