HTML5 etiquetas basicas de contenido


Hoy voy a explicaros las etiquetas mas básicas para realizar una página completa en HTML5 junto con un ejemplo explicativo para que se pueda entender con mayor claridad.

Hasta ahora habíamos explicado que es HTML5 y como empezar a crear un página web, pero no habíamos dotado de nada de contenido a nuestra página. Bien, pues vamos a ver que etiquetas necesitamos y como se usan.

Encabezados

En primer lugar, todo página html5 necesita un encabezado, Si bien es verdad que no es imprescindible para hacerlo funcionar es altamente recomendable, pues si creamos un página web para que sea encontrada por otros usuarios, los motores de búsqueda dan suma importancia a estas etiquetas.Nos referimos a las famosas etiquetas "h", del ingles "Heading", que significa encabezado. tenemos 6 etiquetas de encabezado numeradas del 1 al 6 según su importancia.

<h1> , <h2>, <h3>, <h4>, <h5>, y <h6>

Así la etiqueta h1 es la mas importante de nuestro documento html y la etiqueta h6 sería la etiqueta menos importante. De esta manera la primera etiqueta que debemos introducir sería la etiqueta h1, la cual ha de darnos una descripción general de toda la página, seguido de la etiqueta h2 para el siguiente encabezado y así ir definiendo una estructura clara y semántica del contenido.

Párrafos

Una vez que tenemos claras las etiqutas "h" o heading es la hora de introducir los párrafos que anuncian nuestras etiquetas de encabezado o "h"

Para nuestros párrafos utilizaremos la etiqueta <p> de párrafo. Cada vez que envolvamos un texto con estas etiquetas estaremos indicando al navegador que interprete ese texto como un único párrafo, bien sencillo verdad?.

Saltos de linea

Si quisiéramos incluir un salto de linea, podremos usar la etiqueta <br/>. Esta etiqueta tiene auto cierre igual que nos pasaba con las etiquetas <meta>, cerramos la etiqueta en la misma etiqueta de apertura con el símbolo "/".

Linea horizontal

También tenemos otra útil etiqueta, <hr/>, la cual también se usa cerrando la en la misma etiqueta de apertura al igual que las etiquetas <meta> y <br>, y sirve para imprimir una linea horizontal en el documento.

Etiquetas semánticas HTML5

Bien ya hemos vista algunas de las principales etiquetas para insertar el contenido en nuestra página web, pero aun no hemos dicho nada de donde y como usarlas. Y es que HTML5 provee unas nuevas etiquetas semánticas para poder declarar las partes del documento que estamos usando.

Etiqueta Article

Normalmente, cada documento html que creemos tendrá una temática propia. Digamos que si estamos haciendo la página principal de una pagina de frutas hablaremos sobre las variedades de frutas, por ejemplo. Todo el contenido, párrafos, encabezados y demás elementos de ese contenido los envolveremos en la etiqueta <article>. Esto significa que todo lo contenido dentro de esta etiqueta es una unidad semántica y podríamos trasladarla a cualquier otro lado fuera de la página que no perdería su sentido.

Etiqueta section

dentro de nuestra página de frutas, podríamos hablar de manzanas por un lado, de las peras por otro lado, y de plátanos por otro lado. Pues cada "sección" de frutas donde hablamos de una fruta en particular, la consideramos una sección y usamos para ello la etiqueta <section>. Es importante notar que la diferencia mas notable con la etiqueta article es que si separamos el contenido de la etiqueta <section> de la página dejaría de tener sentido. Lo cual es su principal diferencia y forma de diferenciar la etiqueta <article> con <section>.

etiqueta footer

Por último para acabar nuestro documento html5 vamos a introducir un pie de página donde incluyamos los créditos. Para esta tarea HTML5 cuenta con la etiqueta <footer>. Aunque su uso puede ser mas amplio, en principio solo la vamos a usar para el pie de página. Pero también se podría usar por ejemplo para el pie de una etiqueta <article>.

 

Ahora os dejo la continuación del código del capitulo anterior completado con lo que hemos aprendido hoy. Ademas no estaría nada mal que fueses investigando por tu propia cuenta.

 

<!doctype html>
<html>
    <head>
        <meta charset=”utf-8“>
        <title>Página de frutas</title>
        <meta name=”description” content=“Página de variedades de frutas“/>
        <meta name=”author” content=”Joao Maria Arranz“/>
        <link rel=”shortcut icon” href=”favicon2.ico” type=”image/x-icon“/>
        <link rel=”stylesheet” href=”css/style.css“/>
    </head>
    <body>
        <article>
            <h1>Las frutas mas ricas y sabrosas </h1>
            <p> Vamos a presentar las pricipales frutas mas saludables y ricas </p>
            <section>
                <h2>Las manzanas </h2>
                <p>Las manzanas son ricas en.....Un texto completo sobre manzanas </p>
            </section>
            <hr/>
            <section>
                <h2>Las peras </h2>
                <p>Las peras son ricas en.....Un texto completo sobre peras </p>
            </section>
        </article>
        <footer>
            AQUI ESCRIBIREMOS EL PIE DE PÁGINA
        </footer>
    </body>
</html>

 

Publicado el 11/02/2013 a las 16:21

Comentarios en el post


Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola
Política de cookies +