¿Cuál es la estructura Básica de un documento html5?

Estrada Web Group
Administrador
¿Cuál es la estructura Básica de un documento html5?

aprende html 5 gratis y facil

Lo más novedoso de HTML5 son las nuevas API y los nuevos elemento y la semántica para darle más dinamismo a las páginas con menos código y facilitando al programador el maquetado de las paginas web.

En anteriores artículos vimos la introducción y el elemento doctype, en esta ocasión veremos la estructura básica que debe tener una página web con HTML5 y algunas mejoras establecidas en la misma.

Ya no tienes que usar DIV’s para maquetar la estructura de tu documento. Ahora cada parte tiene su propia etiqueta.

Estructura básica en HTML5:

 

<DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8"/>
		<title>Lección 2 de HTML5</title>
		<link rel="stylesheet" type="text/css" href="css/estilos.css">
		<link rel="shortcut icon" href="favicon"/>
	</head>
	<body>
		<header>
			<h1>Lección 2 de HTML5</h1>
			<h2>Cómo ser experto en html5</h2>
		<nav>
			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Programas</a></li>
				<li><a href="#">Servicios</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</nav>
		</header>
		<section>
			<article>
				<h2>Titulo del articulo</h2>
				<p>Aqui va el artículo</p>
				<img src="images/logo.png">				
			</article>
		</section>
		<aside>
			<h2>ASIDE</h2>
			<p>Puede haber mas de uno, y se les da formato diferente asignándoles ID o CLASS con CSS</p>
		</aside>
		<footer>
			<h2>FOOTER</h2>
			<p>Aqui todo el contenido del footer</p>
		</footer>
	</body>
</html>

 

La etiqueta DOCTYPE no pasa de moda, tu documento debe empezar definiendo que tipo de documento es, de ahí que deba incluir <!DOCTYPE html>. Mientras tanto la etiqueta <HTML> se usa para abrir tu documento html.

 

HEAD: Es para indicar la cabeza de tu documento. No debes confundir esto con header que se define más adelante.

  • META. Con esto defines el tipo de codificación del documento por ejemplo utf-8
  • TITLE: Sirve para especificar el título del documento. Este aparece en la barra del navegador. Esta es muy importante incluirla a los documentos creados, ya que la asociamos a una identidad por medio de su título.

 

HEADER: En esta sección va  la cabecera de tu sitio web. El nombre, slogan y logo deben ir aquí.

NAV: Es la principal barra de navegación o menú de navegación de tu sitio web. La posición y el estilo lo defines mediante CSS. Regularmente dentro de NAV estarán <ul> y <li>, que te sirven para dar forma y estilo a tu menú.

SECTION: Es la sección dónde va el contenido de tu sitio. Este a su vez puede agrupar articles

ARTICLE: Como su nombre lo indica, contiene un artículo. A su vez cada ARTICLE puede contener etiquetas <h2> para definir el título del artículo. Se recomienda que haya solo un <H1> por cada página que representa el título de tu página. A google no le gustan muchos <h1>, esto para tomarlo en cuenta en tu estrategia seo.

ASIDE: Contiene una barra lateral, como para poner enlaces a facebook, twitter y demás. Así divides el cuerpo de tu página en dos columnas. Una donde va el contenido, artículos, etc y otro donde van banners, ligas, etc.

FOOTER: Como su nombre lo indica este contiene el pie de página de tu sitio.

En la siguiente lección veremos más a detalle cada una de las etiquetas y Nuevas etiquetas estructurales de HTML5 como: <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>.

Envíanos tus comentarios, sugerencias u observaciones, tus comentarios ayudan a enriquecer y mejorar los artículo. De antemano gracias!!!

Compartir artículo:

Más artículos geniales

Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

El API de Google Maps ofrece una amplia gama de funcionalidades para interactuar con mapas. Se puede establecer estáticamente los marcadores (pines) mediante programación, pero también se puede permitir a los usuarios interactuar con el mapa arrastrando los marcadores existentes alrededor del mapa.

Ver artículo completo
Aprende HTML5 en 16 lecciones (Introducción)

Aprende HTML5 en 16 lecciones (Introducción)

¿qué es HTML5? Este post está dedicado a todos aquellos que quieren aprender HTML5, hoy iniciare una serie de 16 post donde explicare ¿qué es HTML5?, explicare como usarlo, las etiquetas, propiedades y más.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;