En WordPress, aunque normalmente se trabaja con bloques o editores visuales, hay códigos HTML básicos que se usan muchísimo, ya sea en el Editor de Código, en widgets, entradas, páginas, menús, o dentro de plantillas y themes.
A continuación te dejo una guía clara y práctica con los códigos HTML más usados en WordPress, explicados como para clase 👨🏫👇
1. Estructura básica de contenido
Estos son los más comunes para redactar entradas y páginas.
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado menor</h3>
<p>Este es un párrafo de texto.</p>
En WordPress:
h1→ título principal (normalmente lo genera el theme)h2 – h6→ subtítulos dentro del contenidop→ texto normal
2. Enlaces (muy usados)
<a href="https://ejemplo.com">Texto del enlace</a>
Con opciones extra:
<a href="https://ejemplo.com" target="_blank" rel="noopener">
Abrir en nueva pestaña
</a>
Muy usado para:
- Enlaces externos
- Afiliados
- Navegación interna
3. Imágenes
<img src="imagen.jpg" alt="Descripción de la imagen">
Con clases de WordPress:
<img src="imagen.jpg" alt="Texto alternativo" class="aligncenter size-large">
Clases comunes:
alignleftalignrightaligncentersize-thumbnailsize-mediumsize-large
4. Listas (ordenadas y no ordenadas)
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<ol>
<li>Paso uno</li>
<li>Paso dos</li>
</ol>
Muy usadas en:
- Tutoriales
- Artículos SEO
- Guías paso a paso
5. Formato de texto
<strong>Texto en negritas</strong>
<em>Texto en cursiva</em>
<u>Texto subrayado</u>
Otros útiles:
<mark>Texto resaltado</mark>
<small>Texto pequeño</small>
6. Contenedores (muy importantes)
<div>
Contenido aquí
</div>
<span>Texto en línea</span>
div se usa para:
- Secciones
- Cajas
- Layouts
span para:
- Estilos puntuales dentro de texto
7. Clases y estilos (WordPress + CSS)
<div class="mi-clase">
Contenido
</div>
Estilo directo (no recomendado, pero común):
<p style="color:red;">Texto rojo</p>
8. Tablas
<table>
<tr>
<th>Nombre</th>
<th>Precio</th>
</tr>
<tr>
<td>Producto A</td>
<td>$100</td>
</tr>
</table>
Muy usadas en:
- Comparativas
- Reviews
- Precios
9. Botones (con HTML)
<a href="#" class="button">Comprar ahora</a>
Muchos themes usan clases como:
buttonbtnwp-block-button
10. Etiquetas especiales en WordPress
Saltos de línea
<br>
<hr>
Código
<code>código</code>
<pre>bloque de código</pre>
11. HTML que WordPress bloquea o limita
Por seguridad, WordPress no permite fácilmente:
<script><iframe>(solo en ciertos contextos)- JavaScript directo
Para eso se usan:
- Plugins
- Bloques HTML personalizados
- Functions.php
Resumen rápido (los más usados)
| Etiqueta | Uso |
|---|---|
<h1>-<h6> | Títulos |
<p> | Texto |
<a> | Enlaces |
<img> | Imágenes |
<ul><li> | Listas |
<div> | Contenedores |
<strong> | Negritas |
<table> | Tablas |
