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 ↑
  • Comentarios recientes

  • Miniposts

    • iOS 8 disponible para descargar

      Hoy se anunció de manera oficial iOS 8, la fecha de llegada será el próximo 17 de septiembre. En iPhonehacks han recopilado los enlaces de descarga directo para los diferentes dispositivos que soportan la nueva versión del sistema operativo. Así que para quienes no desean esperar, ya pueden acceder a la versión Golden Master ...

    • Festigame Colombia 2014

      El festival de videojuegos, cultura gamer y entretenimiento familiar más grande de América Latina ha llegado a nuestro país. Festigame que es un evento creado en Chile en 2012, se ha convertido en el evento anual donde las marcas más importantes de la industria presentan sus últimos productos en el ...

    • Peter Griffin también tiene cuenta en Instagram

      El protagonista de la serie de humor, Padre de Familia, Peter Griffin ha inaugurado su presencia en la red social de fotografía con divertidas fotografías de su vida, y a pesar de ser un personaje de ficción ya ha superado los 200.000 seguidores en tan sólo dos semanas. Son unas fotos bastante divertidas, las ...

    • Manual y documentación de Node.js para Android

      Node.js se ha venido haciendo bastante popular en los últimos años, cada vez son más los usos que como desarrolladores web le damos a esta tecnología. La siguiente aplicación es el manual y la documentación de Node.js, que contiene los siguientes temas: About these Docs Synopsis Assertion Testing Buffer C/C++ Addons Child Processes Cluster Console Crypto Debugger DNS Domain Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities VM ZLIB

    • Star Wars Traceroute

      ¿Qué pasa cuando un ingeniero está muy desocupado? pues pasan cosas como esta: Mac y Linux Van a la consola y escriben: traceroute 216.81.59.173 Windows Buscan el CMD y escriben: tracert 216.81.59.173 El resultado es interesante y sorprendente. Si quieren ver la salida de la ejecución del comando, pueden ver el gist Ver más: Beagle Network

  • Comunicados - Notas de Prensa