HTML significa Lenguaje de Marcas de Hipertexto (HyperText Markup Language). La parte más básica y fundamental de toda página Web. HTML es la estructura del contenido web, aunque no solo usaremos HTML para crear sitios Web, también utilizaremos como mínimo otro par de tecnologías para personalizar la apariencia de una página web (CSS) y el comportamiento (JavaScript).
las tres herramientas juntas forman equipo inseparable que tiene como resultado un sitio web moderno:
Estructura (HTML) + Personalización y apariencia (CSS) + Comportamiento (JavaScript) = Sitio Web moderno
¿HTML es un lenguaje de programación?
¡Definitivamente no! HTML no es un lenguaje de programación; solo es un lenguaje de marcado que permite definir la estructura de un documento HTML. Una página Web tiene elementos que encierran el contenido que se muestran en el navegador. Imaginemos una página Web como la página de una revista impresa, veremos elementos idénticos en ambos ejemplos:
- Encabezados o títulos.
- Párrafos.
- Imágenes.
- Secciones.
Etiquetas HTML
Para definir todos esos elementos en HTML tenemos que hacer uso de etiquetas y estas tienen una forma de ser escritas y no son colocadas como mejor le parezca al desarrollador. Por ejemplo, supongamos que queremos colocar un título principal, debemos hacerlo con la etiqueta correspondiente (<h1>).
La etiqueta de encabezado en HTML tiene apertura y cierre (<h1>...</h1>) observa detenidamente el ejemplo:
<h1>Historia Universal</h1>
Ahora, supongamos que queremos escribir un párrafo introductorio en un gran artículo sobre historia. Necesitamos la etiqueta de párrafo, la cual también tiene apertura y cierre(<p>...</p>):
<p>La historia universal bla blab bla</p>
¿Te parece fácil lo que has visto? pues resulta que todo HTML funciona bajo la misma lógica. Existen muchas etiquetas diferentes ya que son muchos elementos diferentes que puede tener una página web, pero básicamente es muy similar.
¿Cuáles son las partes de un elemento HTML?
Visto los dos ejemplos anteriores, estas son las partes de prácticamente todos los elementos HTML:
La etiqueta de apertura
Consiste en el nombre del elemento (en el primer ejemplo, h1), encerrado por paréntesis angulares (< >) de apertura y cierre. La etiqueta de apertura <h1> muestra el lugar donde inicia el encabezado.
La etiqueta de cierre
Se ve igual a la etiqueta de apertura, A diferencia que tiene una barra de cierre (/) antes del nombre de la etiqueta. La etiqueta de cierre </h1> indica donde finaliza el encabezado.
El contenido
La información contenida entre ambas etiquetas es el contenido del elemento, en el caso de nuestro ejemplo un título.
El elemento
La union de las tres partes anteriores forman el elemento HTML.
Atributos de los elementos HTML
Los atributos sirven para dar información adicional a los elementos HTML. Uno de los que más vas a ver es el atributo style que sirve para cambiar la apariencia de dicho elemento. quieres dar otro tamaño o color a un párrafo? Para eso tenemos el atributo style:
<p style="color: red; font-size: 20px; ">Este párrafo tiene estilo</p>
¿Cómo poner correctamente un atributo a un elemento HTML?
- Después del nombre del elemento de haber un espacio entre este y el atributo.
- En caso de que el elemento tenga varios atributos, también debe haber espacio entre ellos.
- El nombre del atributo, va seguido por un signo de igual (=).
- Se deben colocar comillas de apertura y de cierre para encerrar el valor del atributo.
Anidar elementos HTML
Van a existir oportunidades en la que tengamos que meter un elemento dentro de otro. Debes verlo como un puzzle, Vamos a mater un elemento span dentro de un párrafo, lo cual es muy común de ver si queremos tomar un texto dentro de un párrafo y aplicar otros estilos. Por ejemplo:
<p>Este párrafo tiene estilo gracias a un <span style="color: red; font-size: 20px; "> span</span></p>
Elementos HTML vacíos
No todos los elementos HTML tienen las mismas características, recuerda que dijimos anteriormente que tenían etiqueta de apertura, elemento de cierre y contenido. Existen unos elementos que no poseen estas características.
Vamos a ver en el siguiente ejemplo un elemento imagen y se podrá observar que no tiene contenido y que además el contenido de la imagen se coloca a traves de un atributo:
<img src="imagen.jpg" alt="imagen de ejemplo">
Atributos comunes para las imágenes en HTML
El ejemplo anterior hace uso de dos atributos que comúnmente se colocan para todas las imágenes
Atributo src
Mediante este atributo damos la ruta donde se encuentra la imagen que insertaremos en la página Web. Este atributo puede llamar a una imagen que este en el mismo servidor del sitio Web o una imagen remota.
Atributo alt
EL atributo alt es muy importante ya que tiene la función de mostrar información cuando la imagen esta cargando o cuando existe un error de carga en la imagen. Imagina que existen ocasiones en las que por errores una imagen no carga, entonces el usuario al pasar el ratón por encima del espacio donde debería estar la imagen y aparece una breve descripción de que trata la imagen.
Aunque no es propósito de este curso, es importante señalar el peso importante que tiene en el SEO el uso del atributo src. ¡Nunca dejes de usarlo!
Ya sabes que es realmente HTML y algunos elementos básicos de las páginas Web. Ahora sabes qué son etiquetas HTML, que son elementos HTML y para qué sirven los atributos de esos elementos. Próximamente vamos a aprender mucho sobre cómo hacer páginas web desde cero. ¡Disfruta el aprendizaje!