Etiquetas huerfanas y Estructura de una pagina HTML5
Etiquetas huérfanas
Estas son las etiquetas que más se utilizan para insertar un elemento en un lugar específico (por ejemplo, una imagen). No es necesario delimitar el principio y el fin de la imagen, sólo significa que el equipo "Inserte una imagen aquí."
También, estas son las etiquetas que se usan con más frecuencia para insertar un elemento en un punto determinado.
No es necesario definir el comienzo o final de la imagen. Solo tienes que decirle al ordenador que <<inserte una imagen aqui>>.
- Una etiqueta huerfana se escribe así: <img></code>.
- Tomar en cuenta que el final / no es obligatorio. Podrían unicamente teclear <imagen>.
Para evitar confundirlos con el primer tipo de etiqueta, sin embargo, los administradores web recomiendan que esta / (barra) se debería añadir al final de las etiquetas huerfanas.
Así verás que añado una / a las etiquetas huérfanas y les recomiendo que hagan lo mismo; ES UNA BUENA PRÁCTICA.
.jpeg)
ESTRUCTURA BÁSICA DE UNA PÁGINA DE 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.
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.
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-8TITLE: 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!!!
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>
Comentarios
Publicar un comentario