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
0 Comments