Geek the Planet


Curiosidades no image

Published on abril 6th, 2009 | by Angelfire

5

Etiquetas HTML que deberias conocer

Es común que un diseñador/desarrollador programe en múltiples lenguajes, por esta razón,es muy dificil sacarle el máximo de potencial a cada lenguaje.

En esta ocasión les mostraré 10 etiquetas HTML, que tal vez muchos hayamos visto, pero que estoy seguro nunca o casi nunca hemos utilizado.

  1. cite: Todos conocemos la etiquete blockquote, que se utiliza normalmente para poner citas, sabian que tiene un hermanito?, sí, es la etiqueta CITE, que se utiliza comunmente para mostrar referencias y citas bibiliográficas.
  2. optgroup: Esta etiquita es una gran manera de añadir un poco de definición entre los grupos de opciones dentro de una caja de selección. Si usted necesita mostrar una serie de películas de cine dependiendo del horario de presentación, seria por ejemplo:
    <label for="showtimes">Showtimes</label>
    <select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select>

    Demo:

  3. acronym: Esta etiqueta es muy útil cuando queremos mostrar el significado de una sigla, por ejemplo (si se paran sobre la palabra SEO podrán ver la caja de texto):
  4. <acronym >SEO</acronym> is full of trickery and magic

    Demo: SEO is full of trickery and magic.

  5. address: Esta etiqueta es exactamente para lo que están pensando, sirve para mostrar una dirección de una manera un poco elegante mediante HTML, por ejemplo:
    <address>Glen Stansberry
    1234 Web Dev Lane
    Anywhere, USA
    </address>
  6. ins y del: Este par de etiquetes tal vez sean un poco más usadas, ins sirve para mostrar un texto subrayado y del sirve para mostrarlo tachado, por ejemplo:
    John <del>likes</del> <ins>LOVES</ins> his new iPod.
  7. abrr: Esta etiqueta es muy parecida al acronym, es fácil darse cuenta que sirve para abreviaturas, por ejemplo:
  8. <abbr >Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.
    
  9. rel: Esta etiqueta no he sabido bien como funcion, es útil de manera local, y podemos ver más claramente su funcionamiento cuando intentamos agregar un enlace a nuestro blogroll, que nos preguntan si es un contacto, un familiar, un amigo, etc, por ejemplo:
    <a rel="clickable" href="page.html">This link is editable</a>
  10. wbr: Esta etiqueta nunca la habia visto, las anteriores 7 si las conocia, pero esta no se ni de donde salio, igualmente su uso es bastante raro, dudo que alguien alguna vez la vaya a usar, sirve para insertar un salto de línea dentro de un texto, donde el diseñador lo crea conveniente, por ejemplo:
    <span>How do you say Supercalifragilistic<wbr>expialidocious?</span>
  11. bdo: Pensada para elegir la dirección del texto (de izquierda a derecha o de derecha a izquierda). Es obligatorio especificar el atributo dir, con el valor rtl (de derecha a izquierda) o ltr (de izquierda a derecha), por ejemplo:
    <bdo dir="rtl">Esta frase está escrita al derecho, pero debería leerse al revés</bdo>

    Demo:
    Esta frase está escrita al derecho, pero debería leerse al revés

  12. kbd: Pensada para identificar el texto que debe teclear el usuario, por ejemplo:
    En Amaya, para seleccionar un elemento, debes pulsar la tecla <kbd>F2</kbd>
    
  13. var: Pensada para identificar una instancia de una variable o de un argumento de programa, por ejemplo:
    <var>$saludo</var> = "Hola, mundo";

Como verán del post original he quitado un par de etiquetas y en compensación he puesto otras, bastante curiosas y poco usadas por cierto; por otro lado no puse en todos un ejemplo, por la sencilla razón que no tengo su definición en mi CSS y no vale la pena hacerlo para un solo ejemplo.

Visto en: Net Tuts plus

Ver Más: McLibre

Tags: , , , , , , , , , , , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



5 Responses to Etiquetas HTML que deberias conocer

  1. Nocensura says:

    Exelente el lo personal uso html pero me gustaria aprender php no me podrias mostar unos buenos tutoriales!!

  2. Torrecilla says:

    Muy buenas, pero yo estudio HTML y CSS a profundidad, y ya vi todas las etiquetas con todos sus atributos y las propiedades CSS con todos sus valores xd no son desconocidas para mi xd

  3. Francisco says:

    ¿Existe una etiqueta cite?
    Yo tenía entendido que cite era un atributo de la etiqueta blockquote en el que se colocaba la URL de donde se obtuvo el texto. Como referencia.

  4. Angelfire says:

    @Francisco: Claro Francisco, la etiqueta cite existe, en esta web puede encontrar más info: http://www.w3schools.com/tags/tag_phrase_elements.asp

  5. Maximiliano says:

    Angelfire, sobre la etiqueta es nueva en HTML5 y concuerdo en que es difícil encontrar un ejemplo… Buen post saludos

Back to Top ↑