Esta clase pertenece al curso de HTML y CSS, y partiremos desde la clase anterior. Si no sabes de dónde partimos, te ruego revises las clases anteriores.
¿Qué encontrarás aquí?
Formateando el texto.
En esta clase sí que veremos etiquetas con las que podremos dar «significado» al texto, es decir, etiquetas que nos permitirán darle un determinado formato al texto. Importante: hay muchísimas etiquetas para esto. Aquí veremos las de uso más común.
Si queremos poner un texto en negrita, lo rodearemos con la etiqueta <strong>. Por ejemplo, <strong> Esto es un texto en negrita </strong>. Es posible que conozcas que en versiones anteriores de HTML, anteriormente se utilizaba para poner un texto en negrita la etiqueta <b>. Yo la he probado y aún sigue poniendo el texto en negrita, aún es soportada por los navegadores, pero en algún momento dejará de estarlo. Por ello, te aconsejo que pongas el texto en negrita con HTML con <strong>.
Si queremos poner un texto en cursiva puedes utilizar la etiqueta <em>. Por ejemplo, <em>Esto es un texto en cursiva </em>. También puede utilizar la etiqueta <i>.
De cara a optimizar tu web para el SEO (usando HTML para formatear texto), es aconsejable utilizar las etiquetas más modernas en HTML para estos cometidos, por tanto, te aconsejo encarecidamente utilizar <strong> para las negritas y <em> para las cursivas.
Si quiero subrayar un texto en HTML, usaré la etiqueta <u>. Por ejemplo, <u> Este es un texto subrayado </u>.
Si quiero tachar un texto en HTML, usaré la etiqueta <s>. Por ejemplo, <s> Esto es un texto tachado </s>.
Separando el texto.
Si yo ahora mismo pongo este código en Visual Studio Code y abro mi página web en mi navegador, veré lo siguiente:
<strong>Esto es un texto en negrita</strong>
<em>Esto es un texto en cursiva</em>
<u>Esto es un texto subrayado</u>
<s>Esto es un texto tachado</s>
Como puedes observar, yo no quiero que me salga todo el texto en una misma línea, sino que me salga una frase por línea. Pero, recordemos, el ordenador es tonto y no va a hacer lo que nosotros queramos, sino lo que nosotros le indiquemos. Por tanto, vamos a ver algunas formas sencillas de poder hacer que este texto sea más visual y podamos facilitar su lectura.
Con la etiqueta <br> puedo hacer un salto de línea, es decir, meter un espacio que ocupe una línea tras dicha etiqueta. Lo veremos mejor ahora con los ejemplos.
Con la etiqueta <hr> puedo introducir una línea horizontal que sirva para separar entre texto con dos temáticas distintas.
Importante: estas dos etiquetas no necesitas etiqueta de apertura y etiqueta de cierre, son etiquetas que sólo necesitamos poner una de ellas. Funcionarán tanto si ponemos <br> y <hr> como si ponemos <br/> y <hr/>.
Comprenderemos mejor esto que acabamos de ver con el siguiente ejemplo:
<br>
<br>
<br>
<strong>Esto es un texto en negrita</strong>
<em>Esto es un texto en cursiva</em>
<hr/>
<u>Esto es un texto subrayado</u>
<s>Esto es un texto tachado</s>
<hr>
<strong>Hola</strong>
<br>
<br>
<br>
<em>Probando</em>
<br/>
<strong>Probando</strong>
¿Puedo meter unas etiquetas dentro de otras?
Por supuesto. Precisamente eso es clave en HTML. Por ejemplo, todo lo anterior son líneas de texto. Pero tendremos que meterlo en un contenedor, y por ahora sólo hemos visto <div> (y muy por encima). Y cómo son líneas, podemos meterlos en etiquetas <span>. Por tanto, ese código HTML estaría más correcto si lo ponemos como en el siguiente código:
<div>
<span>
<strong>Esto es un texto en negrita</strong> <br>
</span>
<span>
<em>Esto es un texto en cursiva</em>
</span>
<hr/>
<span>
<u>Esto es un texto subrayado</u>
</span> <br>
<span>
<s>Esto es un texto tachado</s>
</span>
</div>
Fíjate en cómo he ido metiendo etiquetas dentro de otras y en cómo he indentado el texto, es decir, cómo he ido haciendo niveles de izquierda a derecha para mejorar la legibilidad del código: primero los <div>, que indican que estamos ante un contenedor de código (recordemos que un contenedor es como un espacio de la página web que va a ocupar dicho código); luego los <span> que le dicen al navegador que estamos ante una frase; y por último el formato dónde indicamos al texto que tiene un formato especial (negrita, cursiva etc.).
Visual Studio Code nos ayuda a indentar el texto con el tabulador (tab) del teclado, te animo a que lo pruebes. Es clave tener un código bien indentado porque cuando tienes miles de líneas de código, ello ayuda a cometer menos errores, al mantenimiento del código etc.
¿Y esto no sería mejor hacerlo con CSS?
Efectivamente, lo ideal es formatear el texto (y la página, en realidad) con CSS. Pero, entonces, ¿por qué ésta clase en este curso? Sencillo: anteriormente se hacía así, hay miles de webs con estas etiquetas, y si algún día te toca hacer mantenimiento o tocar webs antiguas, es posible que te encuentres con ellas, ya que eran muy habituales. Extremadamente habituales, repito.
Por otro lado, también te las he enseñado con fines didácticos. Me parece una buena aproximación a lo que significa dar estilo (negrita, cursiva etc.) a un texto. Porque precisamente eso y mucho más es lo que vamos a hacer en cuanto empecemos con CSS: dar estilos a nuestra página web.
Por concluir: mi consejo es que sólo utilices a día de hoy estas etiquetas que te acabo de enseñar hasta que aprendas a hacerlo con CSS (que te enseñaré más adelante). Y para una página web profesional, por favor, hazlo con CSS. Es mucho más limpio, y nos interesa un código lo más claro posible (menos errores, mantenimiento más fácil etc.).
En esta clase no tendremos ejercicios, ya que realizaremos ejercicios con estas etiquetas en las próximas clases y, en cuanto aprendamos CSS, dejaremos de utilizar estas etiquetas para hacerlo de la forma correcta y moderna: con CSS.
Por si hay alguna duda: las etiquetas que reemplazaremos por CSS tan pronto como podamos son <strong>, <b>, <em>, <i>, <br> y <hr/>. Es decir, las etiquetas que hemos visto en esta clase para formatear texto y poder hacer ejercicios con HTML mínimamente visuales hasta que veamos CSS.
Acceso al índice del curso.
Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!
Si has podido realizar todo lo que hemos visto en la clase sin problemas, perfecto. En caso de duda, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo) por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.