Conceptos básicos de HTML que debes saber

Conoce HTML, cuáles son las partes principales de un elemento y cuáles son las etiquetas elementos y atributos de este lenguaje de marcado.

¿Qué es HTML?

Lenguaje Marcado de Hipertexto (HiperText Markup Language), consiste en un lenguaje de marcas o etiquetas que pueda crear documentos, que se utiliza para el desarrollo y creación de la estructura de páginas web.

Por ejemplo: este artículo que estas leyendo, posee un título, subtítulos, estilo de fuentes, cuerpo de texto, imágenes, links, entre otros. HTML es una forma de diferenciar las partes de un texto al que se le denomina documento web.

Entre las etiquetas más conocidas están las de títulos, imágenes, párrafos, saltos de página, entre otras.

Etiquetas, elementos HTML y atributos

Las etiquetas o marcas son las que colocamos antes y después del texto para definir qué función cumple dicho texto, y de esta manera definir la estructura de todo un documento. Si es un título, un subtítulo, si es un párrafo, entre otros.

Pero las etiquetas aparte de que sirven para ordenar un contenido, también ayudan a los buscadores como Google, encontrar la información por medio de ellas.

Una característica común que distinguen las etiquetas para poder identificarlas es el uso de los símbolos menor que <, mayor que > y la diagonal /.

Las partes principales de un elemento son:

Etiqueta de apertura: Es donde se empieza a definir el elemento, se utilizan los corchetes y la etiqueta según corresponda. Por ejemplo: <p>.
Contenido: Es lo que será visualizado por los usuarios.
Etiqueta de cierre: Corresponde a la etiqueta que se viene trabajando según haya sido la de apertura, solo que se añade la barra inclinada. Como en el ejemplo, sería </p>. Con esto ya quedaría definido el contenido y se visualizaría en la página acorde a la etiqueta definida.

Hoy en día, existen aproximadamente 142 etiquetas HTML y dos elementos principales: elementos bloque y elementos en línea.

Elementos bloque

Los elementos bloque siempre abarcan todo el ancho de la página, comenzando una nueva línea en el documento. Como es el caso de un elemento encabezado, este estará en una línea separada de un elemento párrafo.

Las páginas HTML con tienen estas tres etiquetas básicas:

**<html>** **</html>** Define todo el documento HTML
**<head>** **</head>** Este elemento contiene la información como el título y el conjunto de caracteres de la página.
**<body>** **</body>** Abarca todo el contenido de la página.

Otros elementos de bloques son los que definen como se van a comportar el texto, sea título, subtítulo, etc.

Etiquetas de encabezado: Van de <h1> a <h6>, donde h1 es el tamaño de letra más grande, usualmente utilizado para los títulos principales, h2 correspondería a subtítulos y a medida que va disminuyendo hasta llegar al h6.
Etiquetas de párrafo: Se encierra todo el texto que corresponda a un párrafo usando <p>.
Etiquetas de listas: Existen varias etiquetas, <ol> para las listas ordenadas y <ul> para las no ordenadas. Y para encerrar los elementos individuales de la lista con la etiqueta <li>.

Elementos en línea

Estos elementos son los que le dan formato al contenido interno de los elementos bloque, como agregar enlaces y texto enfatizado (negrita, cursiva, subrayado, etc), pero sin romper el flujo de contenido.

<strong> </strong> Muestra un elemento en negrita.
<a> </a> Etiqueta que se utiliza para crear hipervínculos.
<em> </em> Muestra el elemento en cursiva.
href Indica el destino del enlace.

Todas estas son algunas de las etiquetas conocidas en HTML, por supuesto la lista es aún más extensa.

Atributos HTML

Es la información adicional que se coloca siempre dentro de la etiqueta de apertura.

Alguno de ellos son:

href =” “ Indica el destino del enlace.
Id =” ” Para identificar un elemento único.
class =” ” Identificador múltiple.
style =” ” Para darle un estilo al contenido.
src=“ ” Para imágenes.
background-color =” ” Para color de fondo.
align =” ” Alineación de contenido.
height =” ” Para determinar altura.
width =” ” Para determinar ancho

Imágenes para artículos_Mesa de trabajo 1.png

¿En dónde se utiliza HTML?

Como fue mencionado anteriormente, la función principal es que permite estructurar el contenido de una página, como los párrafos, títulos, secciones y agregar enlaces mediante elementos y etiquetas.

HTML puede ser utilizado en:

Desarrollo web: Haciendo uso de las elementos y etiquetas para estructurar la página web y que vayan de la mano con el diseño y función del sitio.
Navegación por Internet: Se pueden seguir los enlaces entre páginas y sitios web relacionados, gracias a la etiqueta de hipervínculo.
Documentación Web: Con HTML se puede organizar y dar formato a los documentos como en Microsoft Word.

Ventajas de HTML

Es de código abierto y se ejecuta de forma nativa en todos los navegadores.
Es fácilmente integrado con lenguajes de programación Backend como PHP.
Para los principiantes es de fácil y rápido aprendizaje.
Permite describir de forma sencilla el hipertexto.
Ayuda presentar páginas y documentos web de forma estructurada.
Admite archivos pequeños.

Conclusión

HTML es un lenguaje de marcado de fácil aprendizaje para los principiantes y es utilizado principalmente para páginas web estáticas. Debe ser utilizado en conjunto con CSS para darle estilo al contenido y JavaScript para crear funcionalidades

Como recomendación, si estás comenzando, investiga todas las etiquetas y siempre tenlas a la mano al momento de practicar.

Si ya lo conoces, puedes poner en práctica tus conocimientos realizados diversos proyectos Frontend en Codealo.

Si tienes alguna duda e inquietud, puedes dejarnos un comentario o escribir al Instagram, con gusto te la aclararemos.

Fuente:

Gustavo B. (09 de agosto del 2021); ¿Qué es HTML? Explicación de los fundamentos del Lenguaje de marcado de hipertexto; Hostinguer.es

Javier Flores Herrera (25 de agosto del 2015); Qué Es HTML ; Codigofacilito.com

Víctor Sánchez (31 de julio del 2020); Listado de etiquetas HTML; CaronteStudio.com

Rosario Peiró; Lenguaje HTML; Economipedia.com