Conceptos básicos de HTML

HTML es un lenguaje de marcado que sirve para crear el esqueleto de cualquier página web. Se trata de un conjunto de etiquetas que definen el contenido que vemos en un página web, como texto, imágenes, tablas y listas, vídeos, etc.

HTML es un lenguaje de etiquetas que nos permite definir la estructura de nuestra página, en la cual podemos implementarle funcionalidades dinámicas a través del lenguaje CSS y JS como se verá más adelante en el curso.

Sintaxis

Para comenzar, tenemos la estructura base de nuestro documento.

Nuestra primer página web se vería así:

Elementos

HTML se compone de elementos que son los que nos permiten estructurar y dar significado al documento.

Con estos elementos podemos crear:

Estos elementos a su vez se componen de etiquetas, contenido y atributos.

Con las etiquetas definimos el inicio y fin de un elemento. Existen algunos elementos que no tienen etiqueta de cierre, como por ejemplo <img>.

El contenido es la información que se mostrará; en el ejemplo tenemos el texto Hola mundo, pero también pueden ser imágenes, videos, links, entre otras cosas.

Los atributos se utilizan para dar un comportamiento a los elementos.

Etiquetas

Como mencionamos arriba, utilizamos elementos para crear todo lo que desplegaremos en la página web. Y para definir estos elementos utilizamos etiquetas.

Encabezados

Son definidos utilizando las etiquetas <h1>, <h2>, hasta <h6>.

Párrafos

Se definen con la etiqueta <p>

Imágenes

Se definen con la etiqueta <img>. Para este elemento debemos definir además atributos.

Es importante mencionar que el único atributo obligatorio para poder desplegar una imagen es src.

Se definen con la etiqueta <a>.

El atributo href especifica la dirección del link. Y el texto que colocamos después de la etiqueta inicial, es el texto que se despliega en la página web.

Divisiones

Se definen con la etiqueta div y son de los elementos más útiles pues te permiten dividir el contenido de tu página web en secciones, mejor conocidas como contenedores.

Listas

Listas ordenadas

Se crean con la etiqueta <ol>. Cada elemento se crea con la etiqueta <li>.

Listas no ordenadas

Se crean con la etiqueta <ul>. Cada elemento se crea con la etiqueta <li>.

Tablas

Para crear una tabla utilizamos las siguientes etiquetas:

Como podemos ver en el ejemplo, el número de etiquetas <th> que definamos en la primer fila, determina la cantidad de columnas que tendrá nuestra tabla.

Botones

Para crear un botón, sobre el que podamos “dar click”, utilizamos la etiqueta <button>.

El texto escrito entre las etiquetas inicial y de cierre se muestra como un mensaje en el botón.


Existen muchas más etiquetas que podemos utilizar, aquí, puedes consultarlas todas: HTML etiquetas