Como utilizar tag y atributos HTML para crear una página web

html Tag Coding Página web

Si eres un new entry en el mundo de la programación web, y no sabes por donde empezar...

Ejemplo tras ejemplo, en este artículo, explicaremos cómo crear una página web desde cero.

El primer paso es definir la estructura de nuestra página a través de HTML. Este último no es un lenguaje de programación, sino un lenguaje de markup (marcado).
La estructura de una página HTML se compone de marcadores llamados tag HTML.
Los tag html están encerrados entre corchetes angulares. La mayoría de estos se caracterizan por abrir y cerrar tag.

../Schermata%202021-06-29%20alle%2017.51.59.png

La unión de tag de apertura, tag de cierre y contenido constituye el elemento HTML. El uso de tag permite crear la estructura de árbol típica de un documento HTML. Un elemento se llama padre (parent), cuando contiene uno o más elementos, y child (hijo) cuando está contenido dentro de otro elemento.

Estructura típica de un documento HTML:

../Schermata%202021-06-30%20alle%2011.49.09.png

Como puedes ver en el ejemplo anterior, las etiquetas principales de un documento HTML son: <html>, <head> y <body>.
El tag <html> es la raíz del documento HTML, es la etiqueta principal que contiene todos los demás elementos y le dice al navegador cómo debe interpretar el documento. Dentro del tag <head>, encontramos todas las etiquetas que tienen el propósito de impartir directivas al navegador, tales como:

El <title>, indica el título de la página. Se muestra dentro de la pestaña o en la parte superior de la ventana de cualquier navegador;
Los <meta>, están destinados a proporcionar información al navegador, como: la codificación de los caracteres utilizados en el documento, su capacidad de respuesta, compatibilidad con un navegador en particular, etc.;
El <link>, se utilizan para apuntar a ciertos recursos. En la mayoría de los casos se utilizan para vincular hojas de estilo externas;
Los <script>, sirven para conectar por ejemplo archivos Javascript con el fin de dar dinamismo a la página.

La etiqueta <body> es el cuerpo del documento. Contiene todo lo que el usuario realmente muestra en el navegador. Este último puede contener en su interior: imágenes, títulos, párrafos, videos, etc.
El objetivo principal de un tag es dar significado a su contenido. En este sentido, entra en juego la semántica: esa parte de la lingüística que estudia el significado de las palabras.

Así que después de esta pequeña explicación, puedes entender que el término tag semántico identifica el elemento que describe expresamente su significado.
Un ejemplo de tag semántico es <h1>, que se utiliza para el título principal de una página o artículo.
P.D: solo debe haber un tag <h1> en una página web.
Este tag forma parte de los denominados tag de cabecera, y se diferencia de las demás: <h2>, <h3>, <h4>, <h5> y <h6> precisamente por el significado que atribuye a su contenido.
El tag HTML pueden tener atributos dedicados a especificar en detalle la función o el tipo del elemento.

../Schermata%202021-06-30%20alle%2014.46.20.png

La tag <input> en el ejemplo anterior indica un elemento que permite a los usuarios ingresar información. P.D: se utiliza por ejemplo en los formularios.
Los atributos en este ejemplo específico son: type, name e placeholder. El atributo type especifica con precisión el tipo de contenido, en este caso particular textual. Alternativamente, puede ingresar como el valor del atributo type, por ejemplo: correo electrónico, botón, etc.
El atributo placeholder se utiliza para insertar un texto indicativo, con el objetivo de dirigir al usuario a completar el campo de entrada. Name en cambio es el nombre que le damos al campo.
Te recomiendo profundizar en el tema, y usar tag y atributos correctamente.

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo