Estructuras Básica de una Página HTML5

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


 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.

Un ejemplo de estructura HTML:

<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 el encabezado que se define más adelante.

  • META. Con esto define 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. Esto 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 define mediante CSS. Regularmente dentro de NAV estarán <ul> y <li>, que te sirven para dar forma y estilo a tu menú.

SETION: Es la sección dónde va el contenido de tu sitio. Este a su vez puede agrupar artículos

ARTICLE: Como su nombre lo indica, contiene un artículo. A su vez cada ARTÍCULO puede contener etiquetas <h2> para definir el título del artículo. Se recomienda que haya solo un <H1> por cada página que represente 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í divide 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.

Comentarios

Publicar un comentario

Entradas populares de este blog

Editor de texto (programas)

Imagen
Cuando escuchamos editor de texto pensamos simplemente en un lugar para escribir y juntar palabras. Pero es mucho más. Algunas utilidades de los editores de texto: En general, los editores tienen funciones muy parecidas a los procesadores de texto con las que podemos cortar, pegar, modificar, importar, hacer y deshacer acciones. Cuentan con opciones para buscar y reemplazar expresiones regulares, resaltar sintaxis, funciones de autocompletado y múltiples pestañas o paneles de ventana. Facilitan la puesta en marcha de listas y bases de datos que podemos cargar a cualquier gestor, como MySQL, con sencillez y velocidad sin tener que cargar aplicaciones especiales para realizar esta tarea. Permiten crear notas rápidas e incluso crear correos electrónicos. Los editores de texto a menudo se integran con el software de gestión de código fuente y crean herramientas de software de automatización a través de complementos. Muchos editores están incluidos en el mismo sistema y otros operativos pue...
Leer más

¿Qué son Etiquetas de dos en dos y Etiquetas Huérfanas?

Imagen
¿Que son? Las páginas HTML se llena con lo que se denominan etiquetas. Estos son invisibles en la pantalla para los visitantes, pero permiten que el equipo entienda lo que se desea mostrar. Las etiquetas son fáciles de detectar. Están rodeadas de "galones", es decir, los símbolos < y >, de esta manera: <etiqueta> ¿Para qué sirven? Indican la naturaleza del texto que encierran. Se refieren, por ejemplo: "Este es el Título de la página", "Esta es una imagen", "Este es un párrafo de texto", etc. Existen 2 tipos de etiquetas: Las Etiquetas de dos en dos y las Etiquetas Huérfanas Etiquetas de dos en dos: Se abren, contienen texto, y se cierran. Lo que aparece como: <title> Este es un título </title> Distinguimos una etiqueta de apertura (<title>) y una etiqueta de cierre (</ title>) que indica que el título termina. Todo lo que no se encuentra entre estas dos etiquetas no.es un título Aunque generalmente estas etiqu...
Leer más

Listas Ordenadas

Imagen
  ¿Qué son? Son aquellas en las que cada elemento se encuentra precedido por un número, o letra que representa la posición que dicho elemento ocupa en la lista. Las lista ordenadas se definen con las etiquetas <OL> </OL> y cada elemento de la lista con <LI>. Aunque no es necesario, muchos programas generadores de páginas HTML utilizan la etiqueta LI como si fuese cerrada <LI> </LI>.      Ejemplo de lista ordenada: <OL> <LI>Primer elemento <LI>Segundo elemento <LI>Tercer elemento<BR> <LI>Cuarto elemento </OL> Primer elemento Segundo elemento Tercer elemento Cuarto elemento Como se aprecia en el ejemplo podemos utilizar los saltos de párrafo para tener una mayor separación entre los elementos de la lista. La etiqueta <BR>, de salto de línea, no tiene ningún efecto ya que al final de cada elemento de la lista se genera un salto de línea automáticamente. Las listas ordenadas pueden iniciar con ...
Leer más