¿Qué es HTML?

HTML significa Hyper Text Markup Language, es el lenguaje más utilizado en la Web para desarrollar
páginas web.

El HTML describe la ESTRUCTURA y el CONTENIDO de una página web y es un lenguaje que

consiste en etiquetas agrupadas o estructuradas de una manera lógica en función de lo que
necesitamos como vista. Estas etiquetas le dicen al “navegador web” cómo debe mostrar el
contenido.

HTML es un lenguaje y como tal tiene su propio vocabulario (palabras) y su propia gramática (reglas).

HTML se diferencia de un lenguaje de programación, porque no define el COMPORTAMIENTO

(lógica) de las páginas web. HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido
para mostrarlo en un navegador Web.

Es decir, con el lenguaje HTML en sí mismo, sólo podremos presentar texto e imágenes básicas en
el navegador web. Para la lógica y la presentación estética de una página web, utilizaremos otros
lenguajes complementarios al HTML, tales como Javascript y CSS.

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu

contenido. Las etiquetas de encierre pueden cambiar palabras a cursiva, agrandar o achicar la letra,
etc. Por ejemplo,

Mi gato es muy gruñon

Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo
(<p>):

<p>Mi gato es muy gruñon</p>

Ventajas claves de aprender HTML

1. Crear un sitio web: podemos crear un sitio web o personalizar una plantilla web existente si
conocemos bien HTML.

2. Convertirnos en diseñadores web: si deseamos comenzar una carrera como diseñador web
profesional, el diseño de HTML y CSS es una habilidad imprescindible.

3. Comprender la Web: si deseamos optimizar nuestro sitio web para aumentar su velocidad y
rendimiento, es bueno conocer HTML para obtener los mejores resultados.

4. Aprender otros lenguajes: una vez que comprendamos los conceptos básicos de HTML, otras
tecnologías relacionadas como javascript, php o angular se volverán más fáciles de entender.

Etiquetas

Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consiste en
el nombre del elemento rodeado por "<" y ">".

Las etiquetas vienen de a pares, la primera etiqueta del par se llama etiqueta o tag de apertura y se
ve como esta: <p>. El tag o etiqueta de cierre se escribe igual que el de apertura, pero con la barra
de división y se ve como esto: </p>. Si quieres especificar que se trata de un párrafo, podrías
encerrar el texto con la etiqueta de párrafo (<p>)

Veamos un ejemplo y su anatomía en la siguiente imagen:

Las partes principales del elemento son:

1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso p), encerrado por
paréntesis angulares (<>) de apertura y cierre. Establece dónde comienza o comienza dónde a tener
efecto el elemento —en este caso, dónde es el comienzo del párrafo—.

2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de
cierre (/) antes del nombre de la etiqueta. Establece

dónde termina el elemento —en este caso dónde termina el párrafo—.

3. El contenido: este es el contenido del elemento, que en este caso es sólo texto.

4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivalente al

elemento.

Los elementos pueden también tener atributos, que se ven así:

Los atributos contienen información adicional acerca del elemento, la cual no quieres
que aparezca en el contenido real del elemento. Aquí class es el nombre del atributo
y editor-note el valor del atributo. En este caso, el atributo class permite darle al
elemento un nombre identificativo, que se puede utilizar luego para apuntarle al
elemento información de estilo y demás cosas.

Un atributo debe tener siempre:

1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el

elemento ya posee uno o más atributos).
2. El nombre del atributo, seguido por un signo de igual (=).
3. Comillas de apertura y de cierre, encerrando el valor del atributo.

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca

en la de cierre.

Comentarios HTML
Las etiquetas de comentario son usadas para insertar comentarios en el código HTML.

Los comentarios no son mostrados en el navegador web, sirven de ayuda para documentar el código
fuente dentro del mismo documento HTML.

Atributos

Un atributo se utiliza para definir las características de un elemento HTML y se coloca dentro de la
etiqueta de apertura del elemento. Todos los atributos se componen de dos partes: un nombre y un
valor

• El nombre es la propiedad que desea establecer. Por ejemplo, el elemento de párrafo <p> en el
ejemplo lleva un atributo cuyo nombre es alinear, que puede usar para indicar la alineación del
párrafo en la página.

• El valor es lo que desea que se establezca como valor de la propiedad y siempre entre comillas. El
siguiente ejemplo muestra tres valores posibles del atributo de alineación: izquierda, centro y
derecha.

• <html> </ html > - el elemento <html>. Este elemento encierra todo el contenido de la página entera
y, a veces, se conoce como el elemento raíz.

• <head> </head> - el elemento <head>. Este elemento actúa como un contenedor de todo aquello
que desea incluir en la página HTML que no es contenido visible por los visitantes de la página.
Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que
aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del
juego de caracteres, etc.

• <meta charset = "utf-8"> - <meta>. Este elemento establece el juego de caracteres que tu
documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos.
Básicamente, puede manejar cualquier contenido de texto que pueda incluir. No hay razón para no
establecerlo, y puede evitar problemas en el futuro.

• <title> </ title > - el elemento <title> establece el título de tu página, que es el título que aparece en
la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir
la página cuando es añadida a los marcadores o como favorita.

• <body> </body> - el elemento <body>. Encierra todo el contenido que deseas mostrar a los
usuarios web que visitan tu página, ya sea texto, imágenes, videos, juegos, pistas de audio
reproducibles, y demás.
• <h1>,…, <h6> Los elementos de encabezado implementan seis niveles de encabezado del
documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado
describe brevemente el tema de la sección que presenta. La información de encabezado puede ser
usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un
documento automáticamente. Sus etiquetas son <h1>,…, <h6> y </h1>,…, </h6>.

• <p> El elemento <p> (párrafo) es apropiado para distribuir el texto en párrafos. Sus etiquetas son
<p> y </p>.

• <b> El elemento HTML <b> indica que el texto debe ser representado con una variable bold, o
negrita, de la tipografía que se esté usando. Sin darle al texto importancia adicional. Sus etiquetas
son <b> y </b>.

• <strong> El elemento <strong> destaca el texto. Sus etiquetas son <strong> y </strong>. El
elemento <strong> le da al texto más énfasis que el elemento <b>, con una importancia más alta
semánticamente.

• <i> El elemento HTML <i> muestra el texto marcado con un estilo en cursiva o itálica. Sus etiquetas
son <i> e </i>.

• <em> El elemento HTML <em> es apropiado para marcar con énfasis en el texto. El elemento
<em> puede ser anidado, con cada nivel de anidamiento indicando un mayor grado de énfasis. Sus
etiquetas son <em> y </em>.

• <br> El elemento HTML <br> produce un salto de línea en el texto (retorno de carro). Es útil para
escribir un poema o una dirección, donde la división de las líneas es significante. No lo utilices para
incrementar el espacio entre líneas de texto; para ello utiliza la propiedad margin de CSS o el
elemento <p>.

• <li> El elemento HTML <li> o elemento de lista declara cada uno de los elementos de una lista. Sus
etiquetas son <li> e </li>.

• <ol> El elemento <ol> permite definir listas o viñetas ordenadas con numeración o alfabéticamente.
Sus etiquetas son <ol> y </ol>.

• <ul> El elemento HTML <ul> de "lista desordenada" - lista no ordenada. crea una lista no ordenada.
Sus etiquetas son <ul> y </ul>.

• <div> El elemento HTML <div> es exclusivamente usado como contenedor para otros elementos
HTML. En conjunto con CSS, el elemento <div> puede ser usado para agregar formato a un bloque
de contenido. Sus etiquetas son <div> y </div>.

• <img> El elemento HTML <img> posee los atributos src y alt pero no tiene etiqueta de cierre. Se
puede representar así <img src = "imagen.png" alt = "Mi descripción de imagen"> Un elemento <img>
no encierra contenido. También a este tipo de elemento se lo conoce como elemento vacío. El
propósito del elemento <img> es desplegar una imagen en la página web, en el lugar que
corresponde según la estructura del documento.

• El nombre de archivo de la imagen de origen está especificado por el atributo src. Los navegadores
web no siempre muestran la imagen a la que el elemento hace referencia. Es el caso de los
navegadores no gráficos (incluidos aquellos usados por personas con problemas de visión), si el
usuario elige no mostrar la imagen, o si el navegador es incapaz de mostrarla porque no es válida o
soportada. En ese caso, el navegador la reemplazará con el texto definido en el atributo alt

• <a> El Elemento HTML Anchor <a> crea un enlace a otras páginas de Internet, archivos o
ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL que
especifiquemos en sus atributos. Se puede representar así <a
href="https://developer.mozilla.org/es/docs/Web/HTML/Element/a"> </a> donde la dirección del
enlace está especificada por el atributo href.
• Dentro del atributo href la URL puede escribirse de forma absoluta (incluyendo el dominio) o relativa
(sin incluir el dominio) solo para enlaces dentro del mismo dominio. Tanto de una forma u otra, la ruta
de carpetas debe especificarse.

<b> ... </b>

<i> ... </i>

<u> ... </u>

Listas

Listas Ordenadas

Las listas ordenadas son listas en las que el orden de los elementos SI importa y se indican con la
etiqueta <ol> </ol>, dentro se le anida otra etiqueta <li> </li> quedando de la siguiente manera:

Listas Desordenadas

Las listas desordenadas son listas en las que el orden de los elementos NO importa y se indican con
la etiqueta <ul> </ul>, dentro, se le anida otra etiqueta <li> </li> quedando de la siguiente manera: