Hoy he tra√≠do a Jes√ļs de estilodevidaweb.com a mi blog, que te va a hablar sobre las etiquetas HTML b√°sicas imprescindibles que cualquier persona con una web puede necesitar en alg√ļn momento.

Si no tienes conocimientos sobre el tema, te recomiendo que no pierdas detalle del art√≠culo, porque es muy √ļtil para cualquier novato en html, y no es necesario tener grandes conocimientos para hacer uso de ellas. ¬°Te dejo con √©l!

 

HTML son las siglas en ingl√©s para ‚ÄúLenguaje de marcado de hipertexto‚ÄĚ, y literalmente, eso es el c√≥digo HTML, un lenguaje est√°ndar para escritura y lectura de sitios web. Esto, enmarcado en las pautas de programaci√≥n de sitios Web. En otras palabras, es el lenguaje universal que contiene los rasgos particulares que imprimes a tu sitio.

Es posible que actualmente, y aunque no sepas nada del tema, puedas crear tu propio sitio web funcional sin escribir ni una sola línea de código. Todo gracias a los potentes gestores de contenido que existen hoy en día.

Pero a fin de cuentas, se trata de tu sitio web, y hay cosas que no puedes hacer en el gestor de contenidos, por lo que debes conocer, aunque sea un poco, cómo hacer modificaciones o encontrar errores directamente en el código HTML de tu sitio.

¬ŅQuieres lo mejor para tu web y tu proyecto online?

PÔĽŅueÔĽŅs ser√° mejor que eches un ojo a las mejores herramientas de creaci√≥n y dise√Īo web.

Luego no digas que no te lo advertí...

Código HTML en WordPress

En WordPress puedes cambiar el formato preestablecido y visualizar tu informaci√≥n escrita en HTML. Para ello, basta con hacer clic en la pesta√Īa ‚ÄúHTML‚ÄĚ en la parte superior derecha del editor de contenidos al lado de la pesta√Īa ‚ÄúVisual‚ÄĚ, que es la herramienta de edici√≥n directa proporcionada por el gestor de contenidos, tambi√©n conocida como WYSIWYG.

Si editas tus contenidos en la forma visual, lo que ver√°s es algo como lo siguiente (En rojo marco la pesta√Īa de HTML):

 

etiquetas de html

 

Cuando marcas la casilla “HTML” en WordPress, el editor cambia un poco para que puedas editar directamente el c√≥digo. En este ejemplo, lo que veras ser√° algo as√≠:

 

codigos html

 

Como puedes apreciar en las imágenes, hay una gran diferencia entre la escritura libre en el formato visual en comparación al formato HTML. La cuestión es que el formato visual trae por defecto algunas cosas que puedes modificar, pero otras que no. Bien sea por el formato o por el tema de tu página.

En estos casos, puedes modificar los atributos visuales de tu p√°gina y contenidos directamente en el c√≥digo HTML y a√Īadir o cambiar los valores CSS, que son los que, a fin de cuentas, definen lo que el usuario final ver√°. M√°s adelante hablar√© sobre los atributos CSS.

¬ŅQu√© son las etiquetas HTML?

Ahora bien, todo código se rige por una serie de bases. Por ejemplo, un idioma es un código, y en este sentido tenemos ciertas reglas que se aplican indistintamente de la intención del escritor.

Los signos de puntuaci√≥n marcan el ritmo y la intensi√≥n, toda frase con sentido debe tener sujeto, verbo y predicado. Al comienzo de la frase abrimos con may√ļscula y cerramos el p√°rrafo con un punto final.

Así mismo funciona el código HTML, y a esas normas o reglas que indican la intención del escritor o programador se las llama Etiquetas HTML. Estas indican el formato final o ubicación del contenido al que hacen referencia.

Las etiquetas HTML se escriben entre par√©ntesis angulares (<>) e indican directamente el formato o intenci√≥n de esa parte del contenido, tal y como una may√ļscula al iniciar un texto normal.

Al finalizar la parte del contenido que se desea en ese formato, normalmente se cierra con la misma etiqueta, tal y como se cerraría un texto con un punto y aparte.

Por ejemplo, al iniciar un bloque de texto de p√°rrafo normal usamos la etiqueta HTML <p>, y al momento de cerrar el bloque de texto, la etiqueta </p>.

Vamos a ver un ejemplo directamente en el editor. Indicada en flechas rojas, est√° la etiqueta para el encabezado 1, tanto la apertura como el cierre. Y en azul podemos ver la etiqueta para resaltar el texto con Negrilla, tanto la etiqueta de apertura como de cierre:

 

Etiquetas basicas HTML

 

Como puedes ver resaltado en verde, a la etiqueta de p√°rrafo inicial <p> se le agregan unas propiedades a fin de darles un formato especial. En este caso, se le indica el estilo de p√°rrafo centrado (“text-align:center;”) al interior de la etiqueta inicial, y al finalizar, el p√°rrafo se cierra normalmente con </p>.

Este es un ejemplo sencillo de cómo se aplican las propiedades a una etiqueta en particular. En todo caso, si dicho formato se desea, por ejemplo, para todos los párrafos, o para todos los títulos h1 o h2, o para todos los enlaces, etc, etc, en lugar de escribirlo dentro de las etiquetas HTML, es conveniente escribirlo aparte recurriendo al CSS.

Código CSS

CSS son las siglas en inglés para Hoja de estilo en cascada, este código facilita la vida de los programadores y programas que usan HTML para gestionar contenidos. El CSS permite crear códigos o instrucciones que funcionen para un sitio en general. Los CSS se insertan en el código de la página y establece los estilos que se usarán en todo el sitio.

Por ejemplo, con los CSS se programa la fuente, tama√Īo, color, color de fondo y otros aspectos visuales tanto de los t√≠tulos como de los p√°rrafos, botones, enlaces etc. As√≠, cada vez que coloques un elemento, este tendr√° los estilos establecidos en el CSS.

La inclusión de código CSS en HTML hace que el lenguaje se simplifique y sea menos propenso a errores. Anteriormente, se establecían estos valores manualmente en cada contenido cada vez que se utilizaba un título, un párrafo, un botón o cualquier otro elemento. Obviamente, esto resultaba engorroso, tanto para programadores como al momento de buscar un error o editar una pieza del código.

Pero continuemos con el tema de esta entrada, solo dimos un vistazo a lo que es CSS para evitar dolores de cabeza de principiante.

Etiquetas HTML básicas para la edición de contenidos

Atendiendo al objetivo de este escrito, te explicaré cuáles son las principales etiquetas HTML que más se usan al momento de editar el código.

Etiquetas HTML estructurales

Este tipo de etiqueta pertenece al tema o estructura misma del sitio. ¬°Cuidado! esto no lo debes editar bajo ning√ļn concepto, a menos que tengas conocimientos avanzados al respecto.

Los menciono porque en algunos productos o servicios web te pueden pedir que pegues partes de código en la estructura y debes familiarizarte con las etiquetas básicas de la misma.

<html> y <head>: estas etiquetas pertenecen al cuerpo mismo del contenido, html indica la existencia de un documento y la etiqueta head contiene toda la información privada relacionada al documento.

<title> y <meta>: estas indican el título del texto y las meta-descripciones que agregas a tu entrada como palabras clave, etiquetas etc. La etiqueta title es muy importante para optimizar el SEO de tu web. Puedes leer más info sobre esta etiqueta en este post.

<body>: esta etiqueta indica el inicio de cada entrada. Este es el contenido destinado a los usuarios finales.

Etiquetas HTML de título

Las etiquetas de t√≠tulo son las que indican el orden l√≥gico del texto, tanto visualmente para los usuarios, y m√°s importante a√ļn, para los motores de b√ļsqueda. Los t√≠tulos y subt√≠tulos son la estructura l√≥gica del contenido y se agrupan con las etiquetas <h1> <h2> <h3> <h4> <h5> <h6>

Estas etiquetas dejan claro a los motores de b√ļsqueda cu√°l es la tem√°tica central y cu√°les son los temas que se trataran alrededor de ese tema central o palabra clave.

Etiquetas HTML de bloque

Las Etiquetas HTML de bloque son aquellas destinadas a indicar el tipo de texto que se está insertando en la entrada. Además, contiene información del CSS.

<p>: Esta etiqueta indica el inicio de un p√°rrafo est√°ndar.

<pre>: Esta etiqueta indica el texto preformateado, este aparece en la forma visual de edici√≥n en la pesta√Īa de opciones de t√≠tulo.

<blockquote>: Esta etiqueta indica el cl√°sico formato de cita, con las comillas, variaci√≥n en el tama√Īo, fuente y alineaci√≥n seg√ļn indicaciones.

<address>: Define cuál es tu información de contacto, esto es especialmente relevante de cara a los buscadores.

Etiquetas HTML de formato de texto

Una vez asignados lo valores o etiquetas HTML propias del bloque de texto, podemos necesitar hacer ajustes al interior del mismo, las etiquetas de formato de texto son aquellas que nos ayudan a darle formato a secciones especificas del texto.

<strong>: Esta etiqueta es usada para resaltar en negrilla secciones o palabras especificas del texto.

<q>: Gracias a esta etiqueta podemos dar formato de cita a una frase o palabra. La diferencia con la etiqueta HTML <blockquote> es que esta es para dar formato a todo un p√°rrafo y diferenciarlo del bloque de texto, mientras que la etiqueta <q> se usa para citar al interior de un p√°rrafo est√°ndar o de otro tipo sin alterar el mismo.

<em>: Esta etiqueta da formato de cursiva al texto que se indique.

<Del>: Esta etiqueta de formato de texto se usa para subrayar un texto como si se eliminara del texto base, pero sin eliminarlo realmente.

<br>: Esta etiqueta marca un salto de línea simple en el flujo del texto. (Si estás editando el código HTML en WordPress, no es necesario usarla, simplemente basta con pulsar la tecla enter como si editaras texto normal y sigues escribiendo).

<Ins>: Esta etiqueta indica un cambio en el texto base, se a√Īade informaci√≥n de la fecha del cambio.

Etiquetas HTML de enlace

Al momento de querer a√Īadir un enlace por medio del c√≥digo, se usa una etiqueta HTML como esta: <a href=”URL”>. Y posteriormente, colocas el texto que ver√° el usuario con el link. Ser√≠a algo as√≠:

<a href=”https://estilodevidaweb.com”>Enlace a la pagina</a>.

Y se vería simplemente así para los usuarios: Enlace a la página.

Etiquetas HTML de imagen

Para usar una imagen en el contenido desde el código se usa la etiqueta <img> y se indica cual es la ubicación real de la imagen y su respectiva metadescripción. Así:

<img src=‚ÄĚurl de la imagen‚ÄĚ alt=‚ÄĚMetadescripci√≥n de la imagen‚ÄĚ/>

Como puedes ver, esta etiqueta HTML contiene en s√≠ misma el s√≠mbolo / que indica el cierre de la etiqueta. Es decir, no es necesario a√Īadir una etiqueta </img> para cerrarla.

Cómo funcionan las etiquetas HTML en WordPress

Es momento de mirar un poco cómo funciona la edición de código con etiquetas básicas de HTML en WordPress. Para empezar, debemos tener en cuenta que hablaremos de la edición de un contenido en WordPress (es decir, una página o un post), no de la edición de un sitio como tal.

WordPress facilita la vida poniendo ‚ÄúAccesos de escritura r√°pida‚ÄĚ para evitar que tengamos que hacerlo de forma manual.

 

lista de etiquetas html

 

Como se puede apreciar en la imagen, hay una barra de etiquetas que sirven para agregar las etiquetas de manera autom√°tica. Por ejemplo, vemos marcado en rojo las dos formas de trabajar con la etiqueta de imagen que ofrece el editor HTML de WordPress (resaltado en rosa en la imagen)

El bot√≥n donde dice ‚ÄúA√Īadir objeto‚ÄĚ sirve para agregar objetos previamente subidos a la biblioteca. Mientras que el bot√≥n ‚ÄúIMG‚ÄĚ se puede usar para usar im√°genes desde otras ubicaciones.

En la imagen tambi√©n podemos ver marcado en azul el bot√≥n ‚Äúb‚ÄĚ, que es el equivalente a la etiqueta <strong> usada para cambiar la letra a negrilla. Y marcado en verde est√° el bot√≥n ‚Äúlink‚ÄĚ, que al presionarlo, nos env√≠a al mismo cuadro de di√°logo en el que editamos los enlaces en el modo visual.

 

codigos html para paginas web

 

Puedes explorar cada uno de los botones de etiquetas HTML que facilita WordPress para que te familiarices un poco m√°s con los c√≥digos HTML. Otro ejercicio √ļtil es editar tus archivos en modo visual y luego verlos en HTML para observar un poco mejor el comportamiento de las etiquetas y atributos de las mismas que se agregan en la base inicial del c√≥digo.

ÔĽŅ