¿Qué es HTML? Aprende desde el principio

Entender cómo funciona un lenguaje informático no es una tarea sencilla, y más cuando existen varios que se complementan entre sí. Si tú también te preguntas qué es HTML o qué es CSS, este es tu post. Hoy vamos a explicar de la forma más sencilla posible en qué consiste este sistema y cuál es su estructura básica.

Si quieres aprender más sobre marketing digital y, en concreto, especializarte en posicionamiento online, echa un vistazo al Curso de Posicionamiento Web y SEO Avanzado.

¿Qué es HTML?

El HTML es una parte fundamental de la web, junto con el CSS o el JavaScript. Es el lenguaje indispensable para construir páginas web y, al contrario de lo que mucha gente cree, aprender a utilizarlo no es tan difícil si le ponemos ganas. Para que quede claro, HTML no es un lenguaje de programación, sino un lenguaje de marcado de hipertexto que define de qué forma se presenta el contenido en un navegador web. Es un lenguaje informático que se utiliza para la creación de páginas web. Está formado por letras y símbolos que corresponden a tags y atributos, y es comprendido por todos los navegadores y dispositivos donde se visualicen sitios web. Permite insertar textos, sonidos e imágenes y combinarlos entre sí. También permite introducir referencias a otras páginas web mediante hyperlinks o hipervínculos.

Un poco de historia

El lenguaje HTML o Hyper Text Markup Language es un lenguaje informático creado por Tim Berners-Lee, conocido como el Padre de la Web. Este científico especializado en computación estableció la primera comunicación, a finales del año 1989, entre un servidor y un cliente mediante el uso del protocolo HTTP. En 1994 fundó el Consorcio de la World Wide Web, y su tarea consiste en supervisar el desarrollo continuo de la Web. Si te preguntas qué es HTML, él tiene la respuesta.

Para programar el lenguaje HTML se necesita un editor de textos plano. Realmente, cualquier persona puede aprender a crear una web sin nociones previas de programación. Sin embargo, cabe recordar que para otorgar una estética al sitio web sí será necesario tener algún que otro conocimiento más avanzado.

¿Qué diferencia hay entre HTML y CSS?

El lenguaje CSS es igual o más importante que el lenguaje HTML. Es complementario a este e imprescindible en la construcción de un sitio web. En los inicios de la web, las páginas se escribían únicamente con Hyper Text Markup Language. Sin embargo, esto suponía una barrera para el estilo de la página, ya que aspectos como el color, los tamaños o la posición de los elementos son complicados de escribir con el este sistema. Por esta razón, apareció el lenguaje CSS, que separa el contenido escrito del estilo de la web.

Principales elementos de HTML

Ahora que te haces una idea sobre qué es HTML, vamos a conocer los principales marcadores. Estos tags son identificados con un signo de menor que (<), seguido del nombre de la etiqueta y el signo mayor que (>). La mayoría de los tags deben cerrarse con la barra (/) entre el signo “<” y el nombre de la etiqueta.

1. Párrafo

Para definir un párrafo se utiliza el tag <p>. Debemos abrirlo y cerrarlo con los símbolos correspondientes.

<p>La pizza está fría.</p>

2. Encabezados

Las etiquetas de cabecera, también llamadas heading tags, se utilizan para crear una jerarquía entre las partes de un texto; es decir, utilizando títulos para separar las secciones. El principal tag es el <h1>, seguido por el <h2> y <h3>, y así sucesivamente hasta llegar al <h6>, que tiene menor importancia.

<h1>Título principal</h1>

<p>Párrafo de introducción.</p>

<h2>1. Primer subtítulo</h2>

3. Imagen

Para introducir una imagen utilizamos el tag <img>, que no requiere ser cerrado. El contenido de la imagen se define en la etiqueta con el atributo “src”, procedente de source, fuente.

<img src=”https://google.png”>

4. Ancla

El tag de anclaje define un enlace hacia otra página, y el atributo “href” determina el destino del enlace.

<a href=”https://veigler.com</a>

5. Lista ordenada

Para realizar una lista ordenada con elementos numerados tenemos que abrirla y cerrarla con el tag <ol>. Cada elemento debe estar etiquetado con el tag <li>.

<ol>

<li>Oferta formativa</li>

<li>Redes sociales</li>

</ol>

6. Lista desordenada

Las listas desordenadas muestran los elementos como bulletpoints. 

<ul>

<li>Marketing digital</li>

<li>Formulario de contacto</li>

<li>Email marketing</li>

</ul>

7. Tabla

La tabla muestra información en forma de filas y columnas. Se utiliza el tag <tabla> y se utilizan los tags <tr> para representar las filas, <th> para los encabezados y <td> para cada celda.

<table>

<tr>

<th>Nombre</th>

<th>Apellido</th>

</tr>

<tr>

<td>Veigler</td>

<td>Sefhor</td>

</tr>

</table>

8. Comentario

Podemos escribir comentarios para ayudar a comprender el código. Se utiliza el tag <! – ->, y todo lo que esté dentro de dicho tag no será visto por el usuario.

<p>Veigler Business School</p> <!– Escuela de formación online –>

Estructura básica de un documento HTML

Para iniciar un documento, debemos escribir <! DOCTYPE html> para informar al navegador de que el documento es HTML. A continuación abrimos el tag <html>, que tendremos que cerrar al final. En su interior añadimos <head>, que contiene los metadatos de la página, <title>, el título que aparecerá en la pestaña del navegador, meta tags y llamadas a archivos externos, entre otros. Recuerda incluir el tag <meta charset = “utf-8 “> para que el navegador pueda reconocer caracteres especiales, como acentos o virguillas. Finalmente, abrimos el tag <body>, donde agregamos todos los elementos que sí son visibles para el usuario.

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Veigler Business School</title>

</head>

<body>

<h1>Oferta formativa</h1>

<p>Echa un vistazo a nuestra oferta formativa</p>

</body>

</html>