HTML significa Lenguaje de marcado de hipertexto y es uno de los componentes básicos de la web junto con CSS (hojas de estilo en cascada) y Javascript. (Lo que son CSS y Javascript se responderá en futuras publicaciones de blog). HTML es la estructura de todas las páginas web de Internet en forma de encabezados, saltos de párrafo, para distinguir cierto contenido de otros. También puede insertar imágenes con HTML.

HTML es un lenguaje de marcado y no un lenguaje de programación, porque el código HTML solo tiene la tarea de proporcionar estructura. Para que un lenguaje se llame lenguaje de programación, debe ser posible ejecutar comandos, lo que no es posible con HTML.

Uno realmente se pregunta por qué es tan importante estructurar las páginas web. Una gran razón es hacer posible el diseño y la funcionalidad, lo que se logra en una colaboración entre HTML y CSS y HTML y Javascript respectivamente. Si HTML es la estructura, se puede decir que CSS es el diseño y la funcionalidad Javascript de una página web.

Para que todos los encabezados de una página web sean rojos, se necesita una estructura en el código HTML que permita distinguir los encabezados de otros contenidos. De la misma manera, es con la funcionalidad. Para que aparezca una ventana emergente cuando hace clic en un botón en una página web, ese botón debe estar marcado en el código HTML.

Otra razón por la que es importante estructurar las páginas web es que la estructura es utilizada por los motores de búsqueda. El hecho de que esta publicación de blog se titule ‘Qué es HTML’, que está marcado en el código HTML, hace que los motores de búsqueda entiendan que esta publicación de blog trata sobre HTML y, por lo tanto, pone más énfasis en ella que en el otro contenido.

Cómo usar HTML

Expliquemos qué es HTML usando ejemplos prácticos.

HTML es realmente muy simple. Por ejemplo, cómo escribir un elemento de párrafo:

Este es un párrafo común.

Un párrafo podría equipararse con el cuerpo del texto y tiene la abreviatura p. Comienzas con la etiqueta de inicio

, terminas con la etiqueta final

y dejas el contenido entre estas etiquetas. La línea completa de etiquetas de inicio, contenido y etiquetas de finalización se denomina elemento, en este caso, elemento de párrafo.

Los titulares suelen ser importantes en los sitios web para que un usuario pueda navegar fácilmente al lugar correcto lo más rápido posible. Para los encabezados, se utilizan las etiquetas h1, h2, h3, h4, h5 y h6, donde la h representa el encabezado y el número define la jerarquía del encabezado. Una etiqueta h1 suele ser el encabezado principal de un sitio web o publicación de blog, mientras que la etiqueta h6 es un subtítulo más abajo en el árbol del título.

El título de esta publicación de blog utiliza una etiqueta h1, de la siguiente manera:

¿Qué es HTML?

El título de esta sección de la publicación del blog es una etiqueta h2 y está escrito de la siguiente manera:

¿Cómo usar HTML?

Para enfatizar una parte de una oración, por ejemplo, se puede usar la etiqueta fuerte, de la siguiente manera:

HTML es importante para la
estructura
de un sitio web.

La línea anterior también es un ejemplo de cómo se puede usar un elemento HTML dentro de otro, el elemento fuerte está completamente dentro del elemento p. Nunca puede permitir que un elemento HTML comience en otro elemento pero termine afuera, de esta manera:

¡Si usa HTML como este
, comete errores!

Para agregar imágenes, se usa la etiqueta img. Una cosa que es un poco especial sobre el elemento img es que no tiene una etiqueta final. Para insertar una imagen de un logotipo, escriba lo siguiente (sin saltos de línea):

src = “https://Example.com/hub/Example
/Logo_Symbol_Original_RGB.png ”
alt = “Logotipo de Google”>

Tenga en cuenta que la etiqueta de inicio en el ejemplo anterior no está vacía, pero contiene el texto src = ‘…’. Esto se llama atributo y se usa a menudo en etiquetas de inicio HTML para proporcionar información adicional de algún tipo. En este caso, se especifica la ruta (src para la fuente) de la imagen.

Una etiqueta que puede parecer un poco más abstracta para un principiante es la etiqueta div. Se utiliza para definir una sección en un documento HTML. La razón por la que desea dividir un documento en secciones puede ser, entre otras cosas, porque es más fácil ver la estructura en sí, pero también, por ejemplo, porque desea que un determinado diseño se aplique a una determinada parte de un sitio web, pero no otro.

Para dar a una sección el color de fondo verde y el texto blanco, puede hacer lo siguiente:

color: blanco “>

¡Aquí hay un titular!

Aquí escribo una
oración un poco innecesaria y extrañamente larga solo
porque quiero que demande más
de una línea para poder probar mi punto
usando la etiqueta div.

¡Y aquí hay otro titular!

En este ejemplo, el código CSS se usa usando el atributo style = “…” para hacer que el fondo sea de color verde y el texto de color blanco, pero es con la ayuda de la etiqueta div que este encabezado en particular y los dos párrafos pueden formar una sección. donde se aplica el esquema de color, que no se aplica fuera del elemento div.

Hay mucho más que puede hacer con HTML, incluidas tablas y listas, pero me limitaré a tratar las cosas más básicas aquí.