loader image
HTML 🤔¿Qué es y para qué sirve?

Primero empecemos analizando quĂ© significan las siglas HTML: 

HyperText Markup Language 

que en español sería: Lenguaje de marcado de hipertexto. Entendiendo el hipertexto como texto que contiene enlaces a otros textos. En otras palabras HTML es un lenguaje (no de programación) que nos permite marcar texto de una página web. El marcado de un texto es importante porque de esta forma puedes indicarle al navegador que texto es un título, que texto es un menú, que texto es un link a una página externa etc. Pero ¿para qué necesitas marcar un texto?

Dentro del desarrollo web, existen tres pilares fundamentales para la creación de una página. Es decir tres tecnologías que si o si tienes que utilizar ya sea directamente o a través de un framework o librería. Estos pilares fundamentales son HTML, CSS y Javascript. Existen muchas tecnologías más pero vendrían a ser opcionales dependiendo de la página o sitio web que estés construyendo. Entonces con html vas a hacer el marcado del texto que lleva una página, con CSS le vas a dar estilos (hacer que la página se vea bonita) y con javascript le das la funcionalidad.

Para hacer este marcado en HTML se utilizan las etiquetas. Estas etiquetas tienen la siguiente estructura:

<h1>¿Qué es HTML?</h1>

Las etiquetas son las que empiezan con el signo “menor que” < y terminan con el “mayor que” >. En el ejemplo anterior h1 significa que es un encabezado donde <h1> es la etiqueta de apertura y  </h1> es la etiqueta de cierre. La mayorĂ­a de las etiquetas de HTML tienen apertura y cierre pero hay algunas solamente tienen de apertura como la etiqueta que permite indicar un salto de lĂ­nea: <br>

Todo lo que se encuentra en medio de las etiquetas se conoce como contenido. También puedes anidar etiquetas, es decir poner etiquetas dentro de otras etiquetas:

<h1>¿Qué es <b>HTML</b>?</h1>

En la línea anterior, la etiqueta <b></b> permite indicar que el texto encerrado está en negritas, entonces esto se mostraría así:

¿Qué es HTML?

đź’ĄImportancia

HTML es fundamental en la creación de una página web. De hecho es la estructura principal. Sin html no hay página web, inclusive las plataformas que te permiten la construcción de páginas web sin la necesidad de código, internamente lo que están haciendo es construyendo esa página con su estructura en HTML.

🏗️Estructura básica

Si estás empezando a escribir código HTML debes conocer primero su estructura básica. HTML lo puedes escribir en un editor de texto plano, como el bloque de notas de tu computador o en un editor de código. Esta segunda opción es mucho más recomendable porque te ayuda enormemente a escribir código más rápido. Hay varios editores de código como Visual Studio Code, Sublime text, Atom, entre los más conocidos. Una vez que has elegido tu editor de código lo primero que vas a escribir para poder trabajar con HTML es lo siguiente:

<!DOCTYPE html>
<html lang=»es»>
<head>
  <meta charset=»UTF-8″>
  <title>Nombre de la página</title>
</head>
<body>
  <!– AquĂ­ empiezas a escribir cĂłdigo. –>
</body>
</html>

Significado de cada etiqueta:

Esta es la estructura básica, sin esto no podrás empezar. A continuación te explico qué significa cada una de las etiquetas:

<!DOCTYPE html>

Indica al navegador que todo el texto que contiene el documento corresponde a un documento tipo HTML.

<html lang=»es»></html>

Dentro de las etiquetas “html” se estructura todo el contenido con las dos etiquetas principales head y body. lang=»es» es un atributo, y con el valor igual a “es” indicamos que el lenguaje de la página es español.

<meta charset=»UTF-8″>

El conjunto de caracteres utilizada en la página será UTF-8 (que dicho en palabras sencillas es un estándar para todos los idiomas, lo que significa que permitirá en pantalla escribir palabras con tildes y letras ñ en el caso del español)

<title></title>

Con esto especificamos el nombre que va a tener la pestaña del navegador cuando se encuentre en nuestra página.

<head></head>

Todo lo que se encuentra dentro de esta etiqueta no se muestra en el navegador pero es muy importante por temas de metadata, es decir datos que pueden ser utilizados por los buscadores como google para que la encuentre más rápido a la página

<body></body>

AquĂ­ que se encuentra todo el contenido que se va a mostrar en el navegador <!– –> Finalmente, todo lo que se encuentra dentro de estas etiquetas representa un comentario, te servirá de ayuda para poder ir dejando notas dentro de tu cĂłdigo y despuĂ©s recuerdes más fácilmente para quĂ© servĂ­a cada lĂ­nea de cĂłdigo.

Existen muchas más etiquetas que debes aprender par ir marcando tu documento HTML, pero que no las nombraré aquí para no hacer el post muy extenso, sin embargo si estás interesado en conocerlas a detalle te dejo un link a un curso completamente gratuito sobre HTML donde encontrarás cada una de las etiquetas más importantes de HTML explicadas a detalle con ejemplos prácticos: Curso completo html

đź’˝Compatibilidad

Actualmente HTML ha sido adoptado por prácticamente todos los navegadores actuales. Su uso se ha convertido tan común y necesario dentro del mundo del desarrollo web que es difícil encontrar un navegador que no soporte html hoy por hoy, incluido navegadores para dispositivos móviles. Sin embargo la última versión de HTML, que es HTML5, no es 100% con todos los navegadores, sobre todo versiones antiguos de navegadores

📜¿HTML5?

HTML desde su primera aparición en 1991 ha ido evolucionando en el tiempo creándose nuevas versiones hasta llegar a HTML5, la versión actual, la misma que está vigente desde el 2014. Esta versión tiene nuevas etiquetas con respecto a sus versiones anteriores. Agrega etiquetas semánticas, que quiere decir que indican que tipo de contenido encierran. Esto es muy importante sobre todo para optimizar el trabajo de los buscadores web como google por ejemplo. La etiquetas semánticas que ha incorporado HTML5 para indicar el contenido dentro de la página web son las siguientes:

<header>
<nav>
<section>
<article>
<aside>
<footer>

Sin la necesidad de dar mayor informaciĂłn, leyendo estas etiquetas tu ya te puedes hacer una idea de que tipo de contenido van a encerrar 

đź“š Si quieres aprender HTML de forma sencilla, te dejo un tutorial completo desde cero en el siguiente link: Curso completo html

¿Ya sabes HTML5, CSS3 y Javascript y quieres poner tus conocimientos en práctica? te recomiendo este blog : Cómo mejorar tus habilidades como desarrollador frontend construyendo páginas reales

Quizás tambiĂ©n te interese leer…

 

 

Ăšnete a la conversaciĂłn

 

 

0 Comments

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

SuscrĂ­bete

Lo mejor de mi contenido directo en tu bandeja de entrada

No te preocupes,  a mi tampoco me gusta el spam. Solo tendrás lo más nuevo de CodingTube