Códigos HTML básicos que todo usuario de WordPress debe conocer

Publicado: 2019-04-24

HTML es la base de casi todo en Internet. Es la piedra angular sobre la que se construye el contenido de Internet, y lo ha sido durante décadas. Sin una comprensión sólida de HTML, todo lo que haga con WordPress o cualquier otro diseño y desarrollo web se atrofiará. Por suerte para usted, hay una gran cantidad de códigos HTML básicos que todos los usuarios de WordPress, desde principiantes hasta veteranos, usan casi a diario. Vamos a analizarlos y ponerlo al día.

Suscríbete a nuestro canal de Youtube

¿Qué es HTML?

Aquí está la versión rápida: HTML significa lenguaje de marcado de hipertexto , lo que significa que no es un lenguaje de programación. HTML no le ordena a su computadora que ejecute cosas a través de un script. Más bien, toma el texto que tienes en tu página y lo marca. Cursiva, negrita, alineación, tamaño, etc. HTML también le brinda la capacidad de incluir imágenes y enlaces, y con HTML5, la versión más reciente los manipula y el texto de formas nuevas e interesantes.

El código HTML está contenido en banderas y es bastante fácil de leer. Una página HTML simple podría verse así: 

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

Cuando se representa en un navegador, se vería así:

Códigos HTML básicos

Como puede ver, HTML no es tan confuso. De hecho, incluso si nunca antes ha visto ningún código HTML, apuesto a que puede averiguar qué significa cada una de esas etiquetas solo por el contexto. Con eso fuera del camino, veamos los códigos HTML básicos más comunes que usará a lo largo de su carrera en la web.

Negrita

Cuando envuelve el texto en las etiquetas <strong> , le está diciendo al navegador que lo ponga en negrita. También puede usar simplemente <b> , pero con Google y otros motores de búsqueda que tienen preferencia por la codificación semántica, está más seguro con <strong>

You can make <strong>text bold</strong> by using this tag.

Cursiva

<Em> significa énfasis , y es la forma semántica de usar cursiva en HTML. También puede usar <i> para hacerlo.

You can put <em>text in italics<em> by using this tag.

Subrayar

Lo mismo ocurre con <u> y subrayado. En general, este tiene muy poco uso porque los enlaces están subrayados y el texto subrayado en el que no puede hacer clic da una mala experiencia de usuario.

You can <u>underline</u> by using this tag.

Encabezados

Probablemente, el más utilizado de todos los códigos HTML básicos son los distintos encabezados. Usa <h1>, <h2>, <h3>, <h4>, <h5>, <h6> para dividir tu contenido en secciones.

Asegúrese de utilizarlos en orden jerárquico. Google quiere que anide los encabezados, así que asegúrese de usar <h2> solo debajo de <h1> , no debajo de <h3> .

Si bien la mayoría de las páginas solo tendrán una <h1> , Google ya no lo penaliza por tener más. Solo tenga en cuenta que el uso de <h1> restablece el anidamiento de la página (o al menos esa sección de la página).

<h2>H2 is the most commonly used header tag.</h2>

Todos los encabezados de los elementos HTML en esta página son h2 .

Imagen

Insertar imágenes es una de las cosas más útiles que hace HTML. Sacó a Internet de sus estilos brutalistas y se encaminó hacia donde está hoy. Todo lo que necesita hacer es tener la URL de la imagen que desea y poner un solo <img src> (que representa la etiqueta de origen de la imagen . Así:

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

Tenga en cuenta que no es necesario cerrar la etiqueta de la imagen y que las comillas no son necesarias para que se muestre la imagen. Mucha gente todavía los usa para hacer que el código sea más legible.

El atributo <alt> es el texto que aparece con fines de accesibilidad y también está indexado por los motores de búsqueda. Para las personas con lectores de pantalla y otros dispositivos, el texto alternativo es absolutamente necesario para utilizar Internet. Siempre es una buena práctica tener texto alternativo para sus imágenes.

Enlaces

Bueno. Enlaces. Están sucediendo muchas cosas con los enlaces. O, mejor dicho, hay muchas cosas que puede hacer con los enlaces. En su forma más básica, la pondrá junto con una etiqueta <a href> . El <a> indica que es un enlace y el <href> es literalmente la referencia de hipertexto (la URL) al que está enlazando.

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

Cerrarás el código de enlace simplemente con un </a> y podrás usar cualquier texto que desees entre ellos. Ese será el enlace en el que se puede hacer clic y se llama texto de anclaje .

Se muestra en la página así: Un enlace a nuestra página Divi, y este es el texto de anclaje.

Además, también puede anidar código HTML. Puede hacer que se pueda hacer clic en una imagen insertando una etiqueta <img src> entre los indicadores del enlace.

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

Puede ver cómo se muestra un enlace de imagen en el que se puede hacer clic aquí:

Códigos HTML básicos para enlaces directos de imágenes

Más atributos de enlace

También puede incluir bastantes atributos diferentes en los enlaces para que se comporten de cierta manera (como ocultar su URL para que no sea un referente o abrir el enlace en una nueva ventana). Algunos de los más útiles para ti serán

  • rel indica algún tipo de relación entre el enlace y su objetivo. Como noreferrer para evitar que el tráfico de referencias se rastree hasta usted.
  • target le dice al navegador dónde abrir el enlace: _blank lo abrirá en una pestaña en blanco, por ejemplo.
  • nofollow va junto con rel y le dice a los motores de búsqueda que no desea pasar ningún link juice al sitio de destino. Esto es bueno cuando se vincula a contenido controvertido, etc. También evita que las personas envíen enlaces no deseados en sus comentarios, y hace que su contenido pueda verse como imparcial, ya que no está proporcionando ninguna ventaja por aparecer más que la exposición y los clics.

Hay más, pero esos son los que probablemente verá con más frecuencia.

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

Texto tachado

Si eres como yo, a veces tu necesitar quiere hacer una broma con palabras tachadas. O tal vez necesite marcar cosas de una lista (o eliminarlas, como dice el código). O cualquier otra cosa para la que necesite tener una línea que atraviese el texto.

Ahí es cuando usa <del> alrededor del texto que desea tachar. Para algunas personas, este es un código increíblemente común, mientras que otras tal vez nunca lo utilicen. Independientemente, es fácil de recordar.

You can use <del>this code</del> for strikethrough text in HTML.

Liza

Las listas son otra parte importante del contenido web en estos días. No solo te brindan toneladas de espacio en blanco y rompen paredes de texto, sino que también te permiten organizar tus pensamientos en partes digeribles.

Hay dos tipos de listas que puede hacer con códigos HTML básicos. Listas ordenadas que están numeradas 1, 2, 3 y así sucesivamente. Las listas desordenadas usan viñetas o símbolos (según el diseño de su sitio) en lugar de números.

Envuelve cada lista con <ul> o <ol> para listas ordenadas o desordenadas, respectivamente. Y cada elemento de la lista debe estar envuelto en <li> .

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

Y esos códigos se renderizan así para mostrar la diferencia:

  • Esto es parte de una lista desordenada.
  • Asi es esto.
  1. Y así es como se configura una lista ordenada.
  2. Este es un enlace en una lista.
  3. Y el texto de este enlace está en negrita , pero esta parte no lo es.

También puede anidar otros códigos en las listas. Para que pueda escribir texto en negrita, insertar enlaces, etc.

Cotizaciones en bloque

En algún momento de su carrera en WordPress, necesitará citar el sitio web de otra persona. Ahí es donde entra <blockquote> . Simplemente rodee cualquier texto que copie / pegue (y atributo) con las etiquetas de apertura y cierre de <blockquote> , y estará listo.

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

Así es como se verá en una página:

Este texto aparecerá con un estilo especial para indicar que es una cita.

Párrafos

El HTML de párrafo es un poco extraño. Dependiendo del CMS y el constructor que esté utilizando, es posible que represente automáticamente cada salto de línea como un párrafo separado. WordPress hace esto cuando escribe HTML. Sin embargo, no todo hace eso. Entonces, si necesita mantener sus párrafos separados y no tener un muro de texto, envuelva cada uno en <p> . El navegador sabrá entonces mostrar cada bloque de texto como un párrafo separado en lugar de un bloque continuo. De forma predeterminada, los navegadores ignoran los saltos de línea a menos que se indique lo contrario.

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Líneas y saltos de línea

Es posible que desee otras separaciones entre sus párrafos y secciones. Ahí es cuando puede utilizar las etiquetas <hr> y <br/> .

<hr> inserta una línea de separación donde sea que esté. Mucha gente usa esto para separar widgets en una barra lateral o secciones principales de una página web.

La etiqueta <br/> es un salto de línea. Puede utilizar <br/> en medio de un <p> para romper una línea sin entrar en un nuevo párrafo (por motivos de organización y estilo de bloque). <br/> es una etiqueta de cierre automático, lo que significa que no puede haber contenido dentro de ella. Esto se indica con la barra al final del código.

Si bien puede usarlo para dividir texto y párrafos insertándolos donde desee los descansos, esa no es una buena práctica para entrar y, a medida que avance en HTML, CSS y JavaScript, deberá orientar el párrafo elemento para hacer ciertas cosas. Puede leer más sobre la distinción aquí.

Terminando

HTML es absolutamente necesario para interactuar con Internet. Todos los usan de la misma manera, ya sea que se esté iniciando en el desarrollo y diseño web o sea un veterano de los días antes de que JavaScript existiera. Seguimos utilizando los códigos HTML básicos para ejecutar las bases de todos nuestros sitios. No importa qué tan elegante sea el sitio o qué tan avanzadas sus funciones, cuando un enlace se rompa o las cosas se pongan en negrita que no deberían ser, todavía estará investigando para ver si las etiquetas <a href> o <strong> son haciendo bien.

¿Cuáles son sus códigos HTML básicos más utilizados en estos días?

Imagen destacada del artículo por enterlinedesign / shutterstock.com