Códigos HTML básicos que todo usuario de WordPress necesita saber

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 verá atrofiado. Por suerte para ti, 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 desglosarlos y ponerte 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 exactamente 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 tiene en su 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 junto con el texto de maneras nuevas e interesantes.

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<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://www.elegantthemes.com/gallery/divi">A link to our Divi page</a></p>
  </body>
</html>

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

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 descubrir qué significa cada una de esas etiquetas solo por contexto. Con eso fuera del camino, echemos un vistazo a los códigos HTML básicos más comunes que usará a lo largo de su carrera en la web.

Atrevido

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

01
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.

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

Subrayar

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

01
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 usarlos en orden jerárquico. Google quiere que anide 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 tendrán un solo <h1> , Google ya no lo penaliza por tener más. Solo tenga en cuenta que usar un <h1> restablece su anidamiento para la página (o al menos esa sección de la página).

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

Todos los encabezados de los elementos HTML de 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 lo puso en el camino hacia donde está hoy. Todo lo que necesita hacer es tener la URL de la imagen que desea y colocar un solo <img src> (que significa etiqueta de origen de la imagen ). Así:

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

Tenga en cuenta que no necesita cerrar la etiqueta de la imagen, y 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 se muestra 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 usar 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, más bien, hay muchas cosas que puedes hacer con los enlaces. En su forma más básica, lo combinará con una etiqueta <a href> . El <a> indica que es un enlace, y el <href> es literalmente la referencia de hipertexto (la URL) a donde está enlazando.

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

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

Se presenta en la página de esta manera: 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 las banderas del enlace.

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

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

Más atributos de enlace

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

  • rel indica algún tipo de relación entre el enlace y su destino. Como noreferrer para evitar que el tráfico de referencia 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 enlace 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 proporciona ninguna bonificación por aparecer, aparte de la exposición y los clics.

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

01
<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 vecesnecesidadquiere hacer una broma usando palabras tachadas. O tal vez necesite marcar cosas de una lista (o eliminarlas, como dice el propio código). O cualquier otra cosa para la que necesite tener una línea que atraviese el texto.

Ahí es cuando usas <del> alrededor del texto que quieres tachar. Para algunas personas, este es un código increíblemente común, mientras que otras quizás nunca lo usen. De todos modos, es fácil de recordar.

01
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 dan toneladas de espacio en blanco y rompen paredes de texto, sino que también te permiten organizar tus pensamientos en piezas 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.

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

01
02
03
04
05
06
07
08
09
10
<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://www.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 representan así para mostrar la diferencia:

  • Esto es parte de una lista desordenada.
  • Asi es esto.
  1. Y así es como configuras 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 está.

También puede anidar otros códigos en las listas. Así que puedes poner 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 en juego <blockquote> . Simplemente rodee cualquier texto que copie/pegue (y atribuya) con <blockquote> etiquetas de apertura y cierre, y estará listo para comenzar.

01
<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. Según el CMS y el constructor que esté utilizando, es posible que cada salto de línea se represente automáticamente como un párrafo separado. WordPress hace esto cuando escribes HTML. Sin embargo, no todo hace eso. Entonces, si necesita mantener sus párrafos separados y no tener una pared de texto, envuelva cada uno en <p> . El navegador entonces sabrá 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.

01
02
<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 puedes usar 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 usar el <br/> en medio de un <p> para romper una línea sin entrar en un nuevo párrafo (por el estilo de bloque y el bien de la organización). <br/> es una etiqueta de cierre automático, lo que significa que no puede contener contenido. Esto se indica mediante la barra inclinada al final del código.

Si bien puede usarlo para dividir texto y párrafos insertándolos donde desea pausas, esa no es una buena práctica para comenzar, y a medida que avanza más con HTML, CSS y JavaScript, deberá orientar el párrafo. elemento para hacer ciertas cosas. Puedes 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 que sea un veterano de los días anteriores a que JavaScript existiera. Seguimos utilizando los códigos HTML básicos para ejecutar las bases de todos nuestros sitios. No importa lo elegante que sea el sitio o lo avanzadas que sean sus características, cuando un enlace se rompe o las cosas están en negrita que no deberían estarlo, seguirá 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