Etiquetas para Textos

<h1>

La etiqueta de encabezado H1 y sus hermanas pequeñas son una de las herramientas más potentes para decirle a los buscadores cual es la importancia del contenido de nuestra página web.

Qué es la etiqueta h1 (y qué no es)?

h1 es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web. Importante en este punto delimitar de forma clara la diferencia entre sitio web y página web: un título h1 debe hacer referencia a una página de tu sitio web, y no al sitio web en general.

La segunda de las conclusiones es que si resume el contenido de una única página, tu sitio web completo deberá tener un h1 para cada uno de los documentos, que resuma el contenido de la misma de la forma más específica posible. Un caso de mal uso para esta norma son aquellos sitios web donde el h1 está dedicado en todas las páginas al nombre de la compañía.

Como título que es lo lógico es que tu titular h1 aparezca cuanto más arriba de la página mejor, tal cual lo haría el título de una noticia en una web. confiere mayor importancia al contenido situado en el primer tramo de un documento web, y también para el usuario es lógico encontrar el h1 en esa posición.

Qué es la etiqueta h2 (y qué no es)?

La etiqueta h2 es un elemento similar al h1, que indica títulos de importancia para subsecciones del documento web actual. Por su naturaleza, puede haber varios h2 en un sitio, que indiquen los diferentes títulos de importancia de la página en la que nos encontramos.

No debemos confundir los h2 con herramientas para colocar títulos en las zonas de nuestra página: “Últimas noticias”, “Contáctame”, ”Zona de usuario”, “Páginas amigas”, “Bienvenido a mi web”… son títulos genéricos para bloques de una web, pero que nada tienen que aportar al contenido.

Qué es la etiqueta h3,h4… (y qué no es)?

Las etiquetas h3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un h2. Su incidencia en SEO es más limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de h4.!

Quitar todos los elementos restantes de tu sitio web y dejar sólo los titulares deberían en la mayoría de los casos dar una idea del contenido de tu página, tal cual lo hace un índice en un libro: las etiquetas de encabezado deben describir la estructura del artículo.

La etiqueta <br>, no se tiene que cerrar?

la verdad es que todas las etiquetas se pueden cerrar perfectamente, pero no estamos obligados a hacerlo, dado que HTML es un lenguaje bastante abierto y los navegadores permiten mostrar código con algunos errores o fallos de codificación sin que estos se vean reflejados en el aspecto de nuestra página.

<b> o <strong>?

Cualquiera de las dos etiquetas sirven para colocar un texto en negrita pero strong es la que más reconocen

los buscadores como

<span>

La etiqueta <span> se utiliza para añadir estructura a una

parte de un texto.!!

Esta etiqueta se usa comúnmente para añadir un

estilo determinado dentro de una sección del texto.

<p>RGB: <span class="rojo">Red</span>,<span class="verde">Green</span>,!<span class="azul">Blue</span>.</p>!

<i>

Transforma el texto en itálica

<blockquote>

La etiqueta blockquote se escribe gracias a la apertura <blockquote> y a su cierre </blockquote>. Todo lo que esté dentro de está etiqueta estará sujeto a su acción. El blockquote se usa para escribir una cita textual o un párrafo exacto y que éste se diferencie del resto del texto. El efecto que nos muestra es que crea unos espacios a la derecha y a la izquierda del texto, para que se diferencie de los demás.

<cite>

La etiqueta <cite> contiene una cita o referencia a otro lugar.

<tt>

son las iniciales de “teletype”. Utilizando esta et iqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>

<big> y <small>

Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces

la etiqueta <big>, haremos crecer la palabra dos puntos.!!

Un ejemplo sería el siguiente:!!

Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta

<big><big>más grande aún</big></big>.!!

Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.!

<sub> <sup>y

Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H ₂ O o números elevados a potencias 7³.!!Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: !!H 2 O o números elevados a potencias 7

3

.!

Etiqueta <body>

la etiqueta body también podemos personalizarla para darle el aspecto que nosotros deseemos

Color de fondo: bgcolor

El primer parámetro que debes conocer es el del color de fondo, el "bgcolor". A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir:!

<body bgcolor="#FF0000"></body>!

Imagen de fondo: background!Puede que no quieres que tu página tenga un color sólo de fondo, sino que quieras que tu página tenga una imagen. En ese caso deberás indicarlo con la etiqueta "background". La etiqueta quedaría de la siguiente manera:!<body background="URL"> </body>!

Color de texto: text

Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qué color queremos que sea nuestro texto. Esto lo definiremos con el parámetro "text". !Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente: <body text= "#000000"></body>

Márgenes: leftmargin, topmargin, rightmargin y bottommargin

Si queremos que nuestros márgenes sean de 10 píxeles por todas partes escribiremos lo siguiente:!<body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>!

Color de links: link, alink y vlink

En body también podemos ( y de hecho debemos hacerlo) definir el color de los vínculos de nuestra páginas, definir el color con el que se mostraran los links. Aquí debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del link ya visitado (con la etiqueta "vlink").

si queremos que nuestra página tenga un color de enlaces (de links) de color rojo y que esos enlaces sean rojos cuando estén activos y se queden en azul cuando estén inactivos deberemos escribir lo siguiente:!<body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>!