HTML Básico para los comentarios en blogs de WordPress

@ 11 . febrero . 2012

Muchas veces entras a un blog, te parece interesante el contenido del post y decides dejar un comentario ya sea para felicitar, profundizar el tema, o corregir/criticar algo.

Justo cerca del recuadro donde debes escribir el contenido, te encuentras un mensaje que dice algo como: Puedes usar HTML en los comentarios.

comentar con HTML

Te dices: “Ah, bueno” y escribes normalmente. Pero … :chan: el comentario que está un poco más arriba se ve mejor, con letras usando negrita, cursiva, recuadros de citas y palabras con enlaces. ¿Cómo habrá hecho? ¿Será el cuñado del dueño del blog? Nah !!!! Es simple: el comentarista ha usado código HTML. Sí, eso a lo que hace referencia lo que se mencionó más arriba.

Si quieres saber como usar HTML para que tus comentarios en otros blogs se vean mejor y sean más completos, esta es la solución:

¿Qué es el HTML?

HTML es un lenguaje para codificar páginas web, algo parecido a un lenguaje de programación pero para Internet. Su nombre es el acrónimo de Hypertext Markup Language: Lenguaje de Marcado de Hipertexto.

Para ver un ejemplo de página web, tan sólo tienes que entrar a una y das click derecho en cualquier parte, eliges Ver código fuente de la página y se abrirá una ventana con el código HTML.

¿Cómo funciona el HTML?

HTML funciona con etiquetas. Las etiquetas son una serie de palabras y signos especiales que el navegador interpreta como órdenes para mostrar de cierta manera el contenido de la página.

Una etiqueta siempre va entre los signos de menor que y mayor que. Estos signos sirven para que el navegador diferencie entre el contenido normal de texto y lo que es HTML.

Las etiquetas más usadas en comentarios son: blockquote, a href, strong, em, li y code.

Nunca olvides cerrar las etiquetas

Aunque hay algunas excepciones, todas las etiquetas tienen una apertura y un cierre, el cierre siempre lleva el signo “/” que significa fin de esa etiqueta:

Negrita: <strong>Hola, Aeromental</strong> = Hola, Aeromental
Cursiva: <em>Hola, Aeromental</em> = Hola, Aeromental
Palabras con enlace:
Visita a <a href="http://www.aeromental.com/">Aeromental</a> = Visita a Aeromental
Citas: <blockquote>Esto dijo Aeromental</blockquote> =

Esto dijo Aeromental

Código: Esto sirve para que escribas código y este se lea pero no se aplique, para esto usas la etiqueta code, por ejemplo:
* debes cambiar los [ ] por < >
[code]<em>Código de em</em>[/code] = <em>Código de em</em>
Lista con números: Aquí juegan las etiquetas “ol” (Lista Ordenada) y “li” (Elemento de la lista) <ol><li>elemento 1</li><li>elemento 2</li><li>elemento 3</li></ol>

  1. elemento 1
  2. elemento 2
  3. elemento 3

Si es lista sin números se usa “ul”: <ul><li>elemento 1</li><li>elemento 2</li></ul>

  • elemento 1
  • elemento 2

Todo siempre debe ser cerrado, no se deja nada abierto y se respeta el orden, si mezclas varios primero se cierra de adentro para afuera:

Esto es en <strong><em>negrita y cursiva</em></strong> = Esto es en negrita y cursiva
Cuando uses enlaces recuerda que es a href=”enlace completo”, el enlace completo siempre va entre comillas dobles y empieza con http://

Los foros usan BBCode, los blogs no.

La mayoría de los blogs (en especial de WordPress) tienen HTML activado para sus comentarios, en cambio muchos foros usan BBCode (foros en phpBB) que son las etiquetas entre corchetes, se ven así [b]negrita[/b] [i]cursiva[/i] [url=enlace]enlace[/url]. Esto no es código HTML (que es un estándar universal) y no funciona en los blogs (porque somos más cool).

Autor del post: DanielSemper: @aeromental + Facebook

  • saiseihogo

    Me encantó la parte de:

    “[…] y no funciona en los blogs (porque somos más cool)”.

    xD

  • Axel-R

    WoW :O , Voy a probar ……

    Nunca olvides cerrar las etiquetas

  • Axel-R

    ^_^ WAAAAAAAAAAAAA! Que emocion me salio en el primer intento (y)
    Por cierto como le haces para insertar imagenes y ventanas de video de “Youtube” en los comentarios, solo tu puedes insertarlos o como podemos hacerlo nosotros?

  • Axel-R

    :mmm: Deberías agregar un enlace de este post en la parte donde dice:

    HTML: Puedes usar HTML de blockquote, a href, strong, em, li y code. Lista de Emoticons

  • Axel-R

    :P Waaaaa! el segundo intento tambien me funciono (y)
    Soy un maestro del “Copy-Paste” :yaoming:

  • Axel-R:

    Buena idea, ya puse el enlace en el mensaje a este post (y)

    No pueden insertar ni imágenes ni videos, sólo enlaces. Es por un motivo de seguridad de WordPress, pero quizás en un futuro se vea una solución. Por el momento sólo yo puedo comentar con imágenes y videos. También puedo editar un comentario que enlaza a un video/foto y le pongo la imagen o video para que se muestre, pero para los comentaristas el sistema te lo borra.

  • Axel-R

    (y) Gracias por el dato DanielSemper …..
    Sos Grande :aplauso: …………………

  • ugn2010

    Ya tenia nociones… malas nociones, pero tenia!

    gracias por iluminar nuestro camino Daniel-san.

    Ahora, aprender grulla…

  • la grulla de daniel-san

    XD

  • ugn2010

    Waaaa!!! felicitaciones Daniel-san… ugn2010 nombrarte maestro de karate-do…

    Banzai!!!

  • Alonso

    Cosas interesantes = Click en la publicidad.

  • Alejandro

    Excelente yo sabia un poco pero con esto salgo de dudas aunque aun tengo una pregunta, para que sirve el code

  • Joslink

    Muy interesante. Gracias.

  • alia

    Hola, lo primero gracias por el dato.

    Como no voy a ser menos, yo también quiero probar.

    MUCHAS GRACIAS, AEROMENTAL

    =

    ;p

  • Sus

    Supongo que no se podrá usar en los comentarios cosas más sofisticadas como fórmulas matemáticas.