Introducción a HTML: conceptos básicos

Qué es HTML (HyperText Markup Language): traducido literalmente es un lenguaje de marcado de hipertexto con el que se construye una web.

El concepto lenguaje de marcado significa que está compuesto por una serie de etiquetas que dan forma a elementos de texto y multimedia.

El concepto hipertexto hace referencia a la red de enlaces que tiene lugar entre los diferentes documentos web que se pueden crear con HTML. Los documentos pueden estar vinculados unos con otros, tanto en una red interna como en una red externa (Internet).

Una web es un archivo escrito en HTML que se descarga en el ordenador en el instante en el que ha sido visitada. El navegador (Firefox, Chrome, Safari…) leerá el código de ese archivo HTML y mostrará el resultado final en nuestra pantalla.

Por qué te interesa aprender HTML: saber cómo funciona el lenguaje de la web te ayudará a comprender su entorno, y adquirirás habilidades muy útiles que podrás utilizar en tu página web. Si tienes un blog con WordPress, podrás modificar y personalizar las entradas y el aspecto visual de tu web. Conocer este lenguaje te aportará ventajas como estas:

  1. Utilizar el editor de WordPress en la modalidad “código” te dará mayor libertad para editar tus artículos y aplicar formatos no disponibles en el editor visual.
  2. Con conocimientos básicos en HTML y CSS podrás personalizar el diseño de tu blog mediante el uso de Childthemes. Sobre esto te hablaré en un artículo que publicaré más adelante.
  3. Aplicar prácticas de SEO y posicionar mejor en los buscadores.

“Saber cómo funciona el lenguaje de la web te ayudará a comprender su entorno”

En el siguiente vídeo te muestro los entresijos de una página web y te explico como vas a poder interactuar con los ejemplos que verás al lo largo y tendido del artículo.

Ahora sí. ¿Estás listo? ¡Allá vamos!

Breve historia de HTML

El lenguaje HTML fue creado por el físico Tim Berners-Lee en el año 1990. Tim creó esta tecnología para compartir documentos a través de Internet de forma sencilla y accesible para todo el mundo.

Tim Berners Lee

Tim Berners-Lee, el padre de Internet

“Los locos que pensaron que podrían cambiar el mundo
son los que a lo largo de la Historia lo han logrado” –Rob Siltanen.

Estructura de un elemento HTML

El lenguaje HTML está compuesto por una serie de elementos que le dan forma a su contenido. Hay una gran variedad y cada uno tiene diferentes propósitos. Por lo general un elemento está compuesto por 3 partes:

Estructura de una etiqueta html

Como puedes observar en la imagen, el elemento HTML está formado por los tres puntos indicados: la etiqueta de apertura, el contenido y la etiqueta de cierre, que le dan el formato que nosotros le indiquemos. En este caso es la p (paragraph), que se utiliza concretamente para dar forma al párrafo.

  1. La etiqueta de apertura: está compuesta por los símbolos menor que (<) y mayor que (>) con el nombre de la etiqueta en su interior, en este caso la p.
  2. El contenido: el texto del párrafo.
  3. La etiqueta de cierre: es idéntica a la etiqueta de apertura, con la única diferencia de que el nombre de la etiqueta p irá precedida de la barra lateral derecha (/).

También podemos encontrar, aunque en menor medida, elementos sin cierre: están compuestos por una sola etiqueta de apertura y sus atributos –si procede. La etiqueta img (image), es una de ellas.

<img src="https://nombreweb.es/imagen.jpg" />

No te preocupes por entender este elemento aún, explicaré su funcionamiento en el punto Elementos HTML.

Tipos de elementos: definición y anidado

Antes de ver qué tipo de elementos tienes a tu disposición es importante que sepas que existen dos grupos distintos. Entenderlo es fundamental para que los uses correctamente.

Elementos de bloque y en línea

Los elementos HTML son cajas —ocultas a simple vista. Estas cajas se pueden introducir unas dentro de otras (como la famosa Matryoshka). Existen unas reglas que definen como se comportan estás cajas y qué elementos pueden ser anidados dentro de otros. Básicamente hay dos categorías de elementos en HTML:

  1. Elementos de bloque (block): su caja ocupará todo el espacio horizonal de la página sin importar lo que ocupe su contenido. Dentro de los elementos de bloque se pueden anidar otros elementos de bloque y también elementos en línea.
  2. Elementos en línea (inline): a diferencia de los elementos en bloque su caja solo ocupará el espacio horizontal necesario para albergar su contenido. Dentro de los elementos en línea se pueden anidar otros elementos en línea pero no de bloque.

¿Estás un poco perdid@, verdad? Es normal, para aclarar tus dudas no hay nada más sencillo que ver el siguiente vídeo, lo comprenderás enseguida.

Anidado de elementos

El anidado de elementos no son más que elementos dentro de otros, creando una especie de jerarquía. Se deben anidar correctamente siguiendo las reglas de anidado de los elementos de bloque y en línea.

Atributos

Los atributos te permitirán asignar características y comportamientos a una elemento HTML. Se tiene que aplicar siempre a la etiqueta de apertura.

Partes del atributo

Atributos html

Observa la ilustración anterior. Un atributo está compuesto por dos partes:

  • Nombre del atributo: describe qué parte del elemento va a ser definido.
  • Valor del atributo: asigna el comportamiento que afectara a dicho elemento.

Características del atributo

Estas son las tres características fundamentales de un atributo:

  1. Las etiquetas pueden contener más de un atributo a la vez:
<p id="parrafo-3" dir="ltr">Bla bla bla...</p>
  1. Algunos atributos pueden contener varios valores separados por espacios:
<p class="estilo-1 estilo-2">Bla bla bla...</p>
  1. A un mismo atributo se le pueden asignar distintos tipos de valores. Por ejemplo:
<p dir="ltr">Bla bla bla...</p>
<p dir="rtl">Bla bla bla...</p>
<p dir="auto">Bla bla bla...</p>
  • ltr (Left to right): texto de izquierda a derecha, o bien
  • rtl (Right to left): de derecha a izquierda, o bien
  • auto: automático.

Atributos con valores booleanos

Los atributos booleanos tienen como valor el mismo nombre que el atributo. Como el valor es implícito no es necesario asignárselo para que ejecute la orden. Como puedes ver en el siguiente ejemplo ambas formas de emplear el atributo booleano tendrán el mismo efecto sobre el elemento.

<p hidden="hidden">Lorem ipsum dolor sit amet...</p>
<p hidden>Lorem ipsum dolor sit amet...</p>

“Utiliza siempre la variante corta para los atributos booleanos”

Las importancia de las comillas en los atributos

Atributos html incorrectos

A la hora de utilizar los atributos hay una regla básica que tienes que conocer. Envolver el valor del atributo con entrecomillados distintos es un error de sintaxis. Otro error muy común se produce cuando el texto del valor del atributo contiene las mismas comillas que las utilizadas para envolver el valor, como en la siguiente ilustración:

Comillas duplicadas en el valor

Para evitar estos errores hay dos posibles soluciones:

  1. Combinar o intercambiar  las comillas:
<p title="Descripción 'breve'">Bla bla bla...</p>
<p title='Descripción "breve"'>Bla bla bla...</p>
  1. Utilizar códigos HTML especiales, llamados HTML entities. Estos códigos serán reemplazados por el carácter adecuado. En este ejemplo el código &quot; equivale a las comillas dobles ("), podremos añadirlas sin producir un error. Sobre estos códigos te hablaré en el apartado: Caracteres especiales y códigos HTML.
<p title="Descripción &quot;breve&quot;">Bla bla bla...</p>

Elementos HTML

Existen un montón y es prácticamente imposible verlos todos en un solo artículo. Así que en esta entrada te voy a hablar de aquellas que podrás utilizar de manera más recurrente en el editor de WordPress y que hacen referencia a las etiquetas de texto e imágenes. Al final del artículo citaré varias fuentes para consultar documentación sobre HTML y cursos online gratuitos y de pago por si te interesa ampliar tus conocimientos.

Párrafos

A estas alturas ya te habrás familiarizado con la etiqueta p, ya que la he utilizado en varios ejemplos. Es un elemento de bloque y se utiliza para introducir párrafos.

See the Pen Párrafos by Víctor (@vrico) on CodePen.

Saltos de línea

La etiqueta br (break) es una etiqueta en línea y sin cierre. Te permite crear saltos de línea para “romper” el flujo del texto. De esta forma puedes introducir el punto y aparte en un párrafo.

See the Pen Saltos de línea by Víctor (@vrico) on CodePen.

Cómo puedes ver el nombre de las etiquetas es bastante descriptivo e intuitivo, utiliza las iniciales o palabras completas de su nombre en inglés.

Con respecto al texto en latín, no, no me ha poseído un demonio JEJEJE. He utilizado un generador de texto para no estar pensando en el texto cada vez que quiero introducir un ejemplo. Es un procedimiento habitual en Diseño web.

Texto en negrita

Las etiquetas strong y b (bold) son elementos en línea y se utilizan para resaltar el texto en negrita dándole mayor cuerpo al texto. El uso de strong es más común puesto que le da un significado semántico al texto, mientras que p solo se debe utilizar por motivos estéticos.

See the Pen Negrita by Víctor (@vrico) on CodePen.

Cursivas

Existen dos elementos para los textos en cursiva, son elementos en línea y la forma de emplearlos dependerá del significado que le quieras dar:

  1. i (italic): esta etiqueta se debe emplear para introducir texto en otro idioma, términos técnicos, etc.
  2. em (emphasis): como su propio nombre índica, está etiqueta se utiliza para crear énfasis y hacer hincapié en una palabra o frase.
<p>Aprender <i>HTML</i> es divertido</p>
<p>"Se marcho de casa <em>muy enfadado</em>"</p>

Títulos

Las etiquetas h1, h2, h3h6 son etiquetas de bloque y dan formato a los encabezados. La etiqueta h1 (heading 1) es el título de mayor relevancia y el h6 el de menor, creando así un estructura jerárquica de encabezados.

<h1>Título de primer nivel</h1>
<h2>Segundo título de menor relevancia</h2>
<h3>Y así sucesivamente hasta el "h6"</h3>

Texto tachado, eliminado y añadido

En HTML tienes a tu disposición 3 etiquetas en linea muy útiles. Se emplean para indicar que un texto ha dejado de tener validez, o bien, para dejar constancia de las modificaciones de un fragmento de texto tras una actualización —muy útiles en blogs. Veamos cuáles son:

  • s (strike): se emplea para marcar el texto como tachado.
  • del e ins (deleted, inserted): estos dos elementos se utilizan en conjunto. Las etiquetas del se emplearán para texto que deseas marcar como “anticuado” y dentro de las etiquetas ins añadirás el texto actualizado, de esta forma se deja constancia visual de la actualización.

Ejemplos de uso de las etiqueta s, del e ins:

See the Pen Etiquetas s, del e ins by Víctor (@vrico) on CodePen.

Imágenes

<img src="https://nombreweb.es/imagen.jpg">

La etiqueta img es un elemento en línea y sin cierre, se emplea para insertar imágenes. En el atributo src, se añade la dirección URL (el enlace) donde está almacenada la imagen que queremos que aparezca en el documento.

Decoración de texto

La etiqueta span, es un elemento en línea y no tiene ningún significado semántico. Se utiliza mayoritariamente para aplicar estilos al texto mediante CSS.

See the Pen La etiqueta span by Víctor (@vrico) on CodePen.

Sobre CSS te hablaré largo y tendido en el próximo artículo.

Enlaces

Las etiquetas a (anchor, ancla) son un elemento en linea y se utilizan para crear enlaces. En el atributo href se introduce la dirección URL donde quieres enlazar, y dentro de las etiquetas el texto que quieres mostrar para el enlace. Se pueden crear distintos tipos de enlaces, a continuación te muestro los más comunes:

  1. Enlace: se asigna una dirección URL en el atributo href (hypertext reference), que enlazará a otra ubicación. Si un usuario decide hacer clic, será “transportado” a esa fuente, ya sea externa o interna.
<!-- Interna -->
<a href="http://www.tuweb.com/blog">Blog</a> 
<!-- Externa --> 
<a href="http://www.wikipedia.es">Wikipedia</a>

También es posible especificar como queremos que se abra ese enlace mediante el atributo target (objetivo) y sus distintos valores:

  • _blank: abrir el enlace en una nueva ventana o pestaña.
  • _self: abrir en la ventana o pestaña actual.
<a href="http://www.wikipedia.es" target="_blank">Wikipedia</a>
<a href="http://www.wikipedia.es" target="_self">Wikipedia</a>
  1. Enlace a archivo de descarga: puedes especificar la ruta y el nombre del archivo que pretendes adjuntar para que los usuarios lo descarguen:
<a href="http://www.tuweb.com/archivo.doc">Documento</a>
  1. Enlace para enviar un email: con el protocolo mailto: seguido del correo electrónico puedes crear un enlace para que se abra el gestor de correos que el usuario tenga asignado por defecto en su ordenador.
<a href="mailto:info@tuweb.com">info@tuweb.com</a>
  1. Enlace a llamada telefónica: con el protocolo tel:, seguido del número de teléfono —sin espacios y con el prefijo (si se requiere), se pueden crear enlaces que realicen una llamada telefónica. Muy útil para los móviles, se abrirá el dial telefónico del móvil o Skype si se trata de un ordenador y este está instalado.
<a href="tel:34655555555">+34 655 555 555</a>
  1. Enlace en la misma página: este tipo de enlace permite navegar a distintas partes de la misma página para facilitar la navegación del contenido. Para ello en el enlace que dirigirá al usuario a la parte del contenido deseado se tiene que proceder de la siguiente manera:
<!-- #1 -->
<a href="#seccion-1">Ir a sección 1</a>
<!-- #2 -->
<p id="seccion-1">Lorem ipsum dolor sit amet...</p>

En el atributo href se escribe el símbolo # seguido de un nombre de referencia. Es importante no introducir espacios u otro tipo de caracteres, si el nombre de referencia es largo puedes utilizar el guión o la barra baja (- o _). El siguiente paso es asignar el mismo nombre de referencia a la parte que se desea vincular mediante el atributo id, en esta ocasión sin el símbolo #.

A continuación puedes ver este tipo de enlaces en funcionamiento:

See the Pen Enlaces de ancla de página by Víctor (@vrico) on CodePen.

Listas

Las etiquetas ul y ol (unorganized list y organized list) son elementos de bloque y permiten crear listas. Estas etiquetas además irán siempre acompañadas de las etiqueta hijo li (list item) dónde residirán los elementos del listado.

<!-- Lista no ordenada -->
<ul>
  <li>Item nº 1</li>
  <li>Item nº 2</li>
  <li>Item nº 3</li>
</ul>
<!-- Lista ordenada -->
<ol>
  <li>Item nº 1</li>
  <li>Item nº 2</li>
  <li>Item nº 3</li>
</ol>

See the Pen Listas by Víctor (@vrico) on CodePen.

El estilo numérico para las listas ol se puede cambiar mediante CSS, pudiendo optar: (a, b, c) o (I, II, III), entre otros.

Citas

Par añadir citas hay disponibles dos etiquetas:

  1. blockquote: elemento de bloque, se emplea para citas largas.
  2. q: elemento en línea, se utiliza para insertar citas cortas, cómo por ejemplo una cita dentro de un párrafo.

See the Pen Citas: blockquote y q by Víctor (@vrico) on CodePen.

Línea divisoria

La etiqueta hr (horizontal rule) es una etiqueta de bloque y sin cierre. Representa una linea horizontal que se puede utilizar como separador.

See the Pen Línea divisoría by Víctor (@vrico) on CodePen.

Tablas

Las tablas son ideales para organizar datos de manera estructurada. En HTML se necesitan un mínimo de 4 elementos para formar una tabla:

  1. table: las etiquetas que albergarán toda la estructura.
  2. tr (table row): es la fila que contendrá la celdas.
  3. th (table header): como las etiquetas tr pero para crear la fila de las cabeceras.
  4. td (table data): las celdas con los datos.
<table>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
</table>

El anterior es un ejemplo de una tabla simple, pero también es posible realiza tablas más completas utilizando otras etiquetas y atributos que te ayudarán a agrupar mejor la información. Los atributos más útiles a la hora de crear tablas más complejas son colspan y rowspan (expandir columna/fila).

Dado que la estructura para crear tablas en HTML es muy rica en características y funcionalidades veamos en un vídeo cómo crearlas:

Ver el ejemplo práctico del video en Codepen

Comentarios

En HTML existe un elemento especial formado por las etiquetas <!-- y --> que se utiliza para escribir comentarios o notas en el código que puedan servir como referencia al autor para futuras modificaciones o consultas. Cualquier texto o elemento HTML que se encuentre dentro de estas etiquetas quedará oculto y no se montará en la web.

<p>Lorem ipsum dolor sit amet...</p>
<!-- Nota: Añadir X cosa antes de publicar -->

Documento HTML: estructura, espacios y saltos de línea

Estructura

Ya has aprendido algunas de las etiquetas disponibles. Ahora es el momento de ver las partes que forman un documento de HTML integro. A continuación puedes ver su estructura:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Estructura de un documento HTML</title>
  </head>
  <body>
    <!-- 
      Dentro del body irá el contenido visible en la página web 
    -->     
    <h1>Estructura de un documento HTML</h1>
    <p>Lorem ipsum...</p>
  </body>
</html>

¿Has notado que el código tiene sangría? De esta forma el código es legible, está ordenado y es posible visualizar claramente la profundidad jerárquica de cada elemento. La sangría se realiza con la tecla tabulador ().

Empezando desde arriba voy a explicar las 4 partes del documento:

  1. DOCTYPE: esta parte no tiene mucho misterio, informa al navegador de que tipo de documento se trata.
  2. html: esta es la etiqueta raíz (root) de aquí emanarán el resto de elementos. En el atributo lang se asigna el valor del idioma para dicho documento mediante la nomenclatura de idiomas, en este caso es de Español.
  3. head: en este etiqueta es donde se añadirán las etiquetas para definir metadatos y cargar archivos externos que complementan a HTML, cómo CSS y JavaScript. Se podría decir que es dónde se configura gran parte del documento.
  4. body: dentro de esta etiqueta es donde irán todas las etiquetas HTML que se verán en la página web.

Cuando edites HTML en el editor de WordPress no necesitarás ninguna de estas etiquetas —doctype, html, head, etc…— ya que el código que escribas será introducido dentro de body por WordPress. Aún así, saber como está formado un archivo HTML te dará una visión amplia de como funciona y, quien sabe, quizá algún día lo necesites cuando te conviertas en Diseñador web.

Espacios y saltos de línea en el código HTML

No importa cuantos espacios introduzcas en el texto, una vez interpretado el código estos se reducirán a uno solo. Los saltos de línea también serán ignorados, para introducirlo utiliza la etiqueta br. Por lo tanto el ejemplos que verás a continuación se mostrarán igual en la pantalla.

<p>Esto es un párrafo</p>
<p>Esto    es 
un 
párrafo
</p>

Si necesitas introducir más de un espacio por alguna razón, será necesario utilizar códigos especiales, algo que veras en el apartado: Caracteres especiales y símbolos en HTML.

Creación de un documento HTML

Ha llegado el momento de que aprendas a crear un archivo HTML. También veremos editores especiales para HTML y por qué usarlos en lugar de los editores convencionales.

Edición HTML con Mac y Windows

En este vídeo te explico como crear archivos HTML con el editor avanzado de Visual Studio Code (Mac y Windows).

Caracteres especiales y símbolos en HTML

Los caracteres <, >, &, ", ', son caracteres reservados para HTML ya que forman  parte de su sintaxis. Por ende si necesitas escribirlos lo tienes que hacer mediante el uso de unos códigos especiales provistos en HTML. El código será remplazado por el carácter en cuestión. La composición de este código consta de 3 o 4 partes, según el método empleado:

  1. Abreviación:   & + abreviatura + ;
  2. Numérico:   & + # + nº + ;

Caracteres especiales

SímboloNombreCódigoDescripción
<&lt;&#60;Less than
>&gt;&#62;Greater than
"&quot;&#34;Quote
'&apos;&#39;Apostrophe
&&amp;&#38;Ampersand

La columna de “Descripción” al mismo tiempo es un recurso mnemotécnico para ayudarte a recordar fácilmente el código correspondiente para cada símbolo.

No todos los símbolos tienen su versión abreviada, pero si los más comunes, por lo tanto para esos casos es necesario usar el método numérico (&#39;).

Símbolos

SímboloNombreCódigoDescripción
£&pound;&#163;Pound
¢&cent;&#162;Cent
©&copy;&#169;Copyright
®&reg;&#39;Registered
&trade;&#38;Trademark
«&laquo;&#171;Left arrow quote
»&raquo;&#187;Right arrow quote
¼&frac14;&#188;Fraction 1/4
½&frac12;&#189;Fraction 1/2
¾&frac34;&#190;Fraction 3/4
µ&micro;&#181;Micro
º&deg;&#176;Degree
×&times;&#215;Times
÷&divide;&#247;Divide
(espacio)&nbsp;&#160;Non-breaking space

Siguientes pasos con HTML

Si te interesa seguir avanzando en tu aprendizaje te vendrán bien conocer fuentes de calidad. Te dejo un listado muy completo de los sitios de referencia que he conocido a lo largo de los años en mi continuo aprendizaje sobre la materia.

  • Documentación:
    1. MDN (Mozila Developer Network): sin duda la web de referencia para consultar documentación sobre HTML. Aunque no toda la documentación está traducida al castellano.
    2. w3schools.com: en esta web también puedes encontrar información sobre HTML, no está en castellano, pero siempre podrás decirle a google que la traduzca por ti.
  • Cursos online:

De todas estas fuentes video2brain es la única que no he probado, la he añadido como alternativa ya que está en castellano. Para mi teamtreehouse.com es la mejor de todas, sin menospreciar al resto que también son excelentes sitios para aprender.

Nota: Teamtreehouse es un enlace de afiliado, eso significa que me llevo una pequeña comisión, esto no supone un incremento en el precio final. Si compras un producto de afiliado estarás contribuyendo para que continue publicando contenidos de gran calidad de forma gratuita. Siempre recomiendo lo que he probado y considere que es material de calidad.

En el próximo artículo te hablaré de CSS, esa parte te gustará mucho, ya que se trata del lenguaje que te permitirá realizar personalizaciones en tu tema de WordPress y ajustar el blog a tus preferencias.

¡C’est fini!  ¡The end!  ¡Fins ací! ¡Se acabó! Jeje. Hasta aquí el tutorial de introducción a HTML. Con estas bases tienes suficientes conocimientos para catapultar tu aprendizaje sobre una de las tecnologías más fascinantes: La web. Los suscriptores podéis descargar este artículo en formato eBook, redactado y diseñado con mucho mimo para llevártelo dónde quieras —no es un simple copiar y pegar.

¿Que te ha parecido este artículo? ¿Tienes alguna duda o crees que algún apartado podría estar mejor explicado? Adelante, lánzate e inicia una conversación en los comentarios. Si esta entrada te ha resultado útil y crees que puede ser útil a no dudes en ayudarme a difundirlo y compártelo en las redes sociales.

6 comentarios en “Introducción a HTML: conceptos básicos

  1. Hola, Víctor.

    Vaya pedazo de post. Para los que no somos muy amigos del código nos viene muy bien, ya que a veces hay que hacer pequeños ajustes o el editor de WordPress se lía y hay que acceder al HTML.

    Me lo guardo en favoritos para tenerlo siempre a golpe de click. Sigue así, crack.

    Un abrazo.

  2. Hola, Pablo:

    Muchas gracias por pasarte por el blog y comentar. Se que para muchos oír la palabra código les “horroriza”, y es normal, cuando uno ve todo esa masa de código y desconoce su funcionamiento se hace un lío y le entran sudores fríos, ja, ja, ja.

    La información que se encuentra para aprender HTML en la red suele contener una verborrea bastante técnica y aburrida —salvo contadas excepciones. Así que yo quería aportar mis conocimientos en la materia de una manera más amable y entretenida, al fin y al cabo el lenguaje HTML no es complicado. Saber usarlo es muy útil para aquellos que tienen una web/blog y quieran hacer pequeños ajustes que solo son posibles entrando de lleno en el código.

    Un abrazo.

  3. Magnífico el artículo Víctor. Es un gran trabajo!
    Para los que estamos aprendiendo HTML es de gran ayuda. Está muy bien estructurado y las explicaciones son muy claras, pudiendo comprobar resultados en los ejemplos que incluyes.
    Algunas etiquetas, como las de negrilla y cursiva, ¿no están en desuso? ¿Aconsejas utilizar este tipo de etiquetas para aplicar estilo o es preferible usar CSS?
    Muchas gracias.
    Saludos.

  4. Hola Victoria:

    Con respecto a las etiquetas: tanto <i> cómo <b> son válidas de nuevo en el estándar actual, que es HTML5.

    La diferencia ahora está en su uso: <i> se emplea para marcar palabras técnicas o en otro idioma, mientras que <em> se debe utilizar para enfatizar el texto. La etiqueta <b> ahora se utiliza para remarcar un texto en negrita simplemente por estética, sin que este tenga un significado semántico, como si es el caso de <strong>.

    Una alternativa a la etiqueta <b> es utilizar la etiqueta <span> y CSS:

    <p><span style="font-weight:bold;">Texto en negrita</span></p>

    Qué opción utilizar es elección de cada uno.

    En este enlace puedes ver (inglés) la nueva definición para los elementos <i> y <b>: http://html5doctor.com/i-b-em-strong-element/.

    Yo utilizo estas etiquetas siguiendo la semántica descrita en la documentación de HTML5 y solo empleo CSS en casos especiales, cómo por ejemplo subrayar en color un fragmento de texto.

    Gracia por comentar y compartir tus dudas en el blog.

    Saludos.

Deja un comentario


Uso de los datos de los comentarios


Responsable del fichero: Víctor Rico Penalba. La finalidad: moderar los comentarios del blog. La legitimación: consentimiento del interesado. Destinatarios: tus datos se encuentran alojados en mi proveedor de hosting, Raiolanetworks, empresa de servidores Española ubicada en Lugo. Podrás ejercer tus derechos de acceso, rectificación, limitación o suprimir tus datos enviando un email a o ante la Autoridad de Control. Encontrarás más información en la Política de Privacidad.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.