Etiquetas ó Estilos, ¿Cuál utilizar?

No existe un estándar sobre cuándo aplicar estilos o etiquetas HTML en nuestro código, lo que sí es cierto es que podemos sustituir el uso de algunas etiquetas por estilos CSS. Aunque antes de hacerlo tienes que pensar bien el uso que le quieras dar.

A continuación, les comento mi opinión al respecto.

Por ejemplo, imaginemos que queremos poner un texto en negrita. Ni se te ocurra utilizar la etiqueta <b> ya que las arañas de los motores de búsqueda al analizar tu página, considerarán que el texto entre las etiquetas <b> no es importante, cuando tu interés es darle importancia, seriedad y urgencia al contenido encerrado entre las etiquetas <b></b>.

<b>Texto en negrita</b>

Ahora bien, si la idea es destacar la importancia de un texto con respecto al texto general en el que está contenido, pues utiliza la etiqueta <strong> y de hecho, resulta más entendible por las arañas de los buscadores.

<strong>Texto en negrita </strong>

Ver: http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element

Por otra parte, si llevas la idea de separar el contenido del diseño, te recomiendo que utilices el estilo CSS para las negritas:

.bold { font-weight:bold; }

Ya que estás enfatizando la "apariencia" de ese texto.

<span class=”bold”>Texto en negrita</span>

Recuerda que HTML es sinónimo de Significado y CSS es sinónimo de Apariencia.

Ejemplo 2: <br/>, <p>, <section> 

Si utilizas párrafos en tu código, no te recomiendo que utilices <br/> para los saltos del línea, una forma de tener el código más organizado es emplear la etiqueta <p>

<p>Mi párrafo</p>

Sin embargo, si el contenido que quieres agrupar comparte la misma temática puedes utilizar la etiqueta <section>

Ver: http://www.w3.org/TR/html5/sections.html#the-section-element

Y en otros casos el uso de CSS en mi opinión sería lo más correcto, ya que como dije anteriormente, estamos hablando de apariencia de un texto lo que se traduce a interfaz de usuario. En nuestro ejemplo para definir los márgenes del texto sería:

<div class="margin-left-10 margin-bottom-10 margin-right-10">Mi párrafo</div>

Y en nuestro fichero css, definiríamos las clases:

.margin-left-10{margin-left: 10px;}
.margin-bottom-10{margin-bottom: 10px;}
.margin-right-10{margin-right: 10px;}

Ejemplo 3: <small>

La etiqueta <small> que se emplea para poner un texto con tamaño de fuente más pequeño. Sería interesante en vez de utilizar esta etiqueta, crearnos una clase en nuestro fichero css indicando el tamaño de la fuente de nuestro small, es decir,

En vez de utilizar: <small>Mi texto pequeño</small>

Tendríamos en nuestro css:

.smallFontSize{ font-size: 11px;}

Y luego lo utilizaríamos así:

<div class=".smallFontSize">Mi texto pequeño</div>

Y bueno, así con las demás etiquetas...todo es cuestión de analizar qué objetivo se quiere lograr con nuestro código y evidentemente, cada programador tiene su estilo propio.