¿Qué son las etiquetas de HTML y para que sirven?

El código HTML hace referencia al lenguaje que se emplea para el desarrollo de páginas web. Dicho código se compone por diferentes etiquetas que el navegador interpreta y a través de las cuales se puede crear o modificar la apariencia de un documento.

Ejemplos y usos de etiquetas HTML

A continuación, veremos algunos ejemplos de las principales etiquetas de html y sus funciones.

Etiqueta < html > < /html >

La etiqueta < html > se usa para iniciar el código html, siempre debe estar en el inicio de nuestro código, de lo contrario simplemente no se ejecutaría.

La etiqueta < /html > se usa para indicar en donde termina el código html.

A continuación veremos una muestra de donde se ubica el inicio y fin de esta etiqueta

Etiqueta < head > < /head >

La etiqueta < head > < /head >, conocida en español como cabecera, es la parte que no se muestra en el navegador en el momento de cargar la página. Esta etiqueta puede contener varios hijos que otorgan información sobre el sitio en cuestión.

La sección < head > en HTML es una parte importante de cualquier documento HTML y se utiliza para proporcionar información adicional sobre el documento, pero no se muestra en la página web. Aquí se incluyen metadatos, títulos, enlaces a recursos externos, hojas de estilo y scripts.

La sección < head > es un lugar para colocar información importante que no se muestra directamente en la página web, pero que es necesaria para su correcto funcionamiento y para mejorar la experiencia del usuario.

Por ejemplo, se puede usar para proporcionar un título para la página que se mostrará en la pestaña del navegador, enlaces a hojas de estilo CSS que definen la apariencia de la página y metadatos para mejorar la experiencia de búsqueda.

Esta etiqueta se encuentra en los siguientes lugares:

Etiqueta < title > < /title >

La etiqueta Etiqueta < title > < /title >, sirve para, (como su nombre lo dice) asignar un título a nuestra página, en este caso el título se ubica en la pestaña de nuestra página. Este es un ejemplo:

Como puedes ver, el texto que se encuentra entre las etiquetas < title > < /title > es "Mi Página", por lo tanto, el título que aparecera en la pestaña de nuestra página será "Mi Página" como se observa a continuación.

Etiqueta < body > < /body >

Esta etiqueta almacena todo el "cuerpo" de la página, incluyendo el encabezado, el contenido principal, la sección lateral y el pie de página.

Aquí puedes ver que todo el texto que se escribe entre estas etiquetas es visible en el navegador

Etiqueta < p > < /p >

Aquí se escriben los parrafos y demás textos

Atributos de la etiqueta < p > < /p>

• style cambia el color del texto


• align="center" alinea el texto al centro


• align="left" alinea el texto a la izquierda


• align="right" alinea el texto a la derecha


• ID identificador único a nivel de documento

Etiqueta < ul > < /ul >

Signfica "unordered list" o "lista no ordenada". Crea una lista no ordenada. Además se complementa con la etiqueta < li >< /li > (del ingles item list o elemento de lista) que declara cada uno de los elementos de una lista. El código HTML se vería así




Y se ejecutaría de este modo

• Primero
• Se empieza
• Desde el inicio

Etiqueta < br > < /br >

El elemento HTML line break < br > produce un salto de línea en el texto.Es útil para escribir un poema o una dirección, donde la división de las líneas es significante. No utilices < br > para incrementar el espacio entre líneas de texto; para ello utiliza la propiedad margin de CSS o el elemento < p >< /p >


Ejemplo

El texto que ves arriba, a sido insertado sin usar un solo salto de linea, y como puedes ver, se extiende horizontalmente a lo largo de nuestra página. Para evitar esto usamos nuestra etiqueta < br >, ubicandola en los lugares que deseemos, a fin de que los saltos de linea lo hagan ver un párrafo uniforme y ordenado. Y se vería de la siguiente manera:

Etiqueta < table > < /table >

Atributos de la etiqueta < table > < /table >

• align alinea horizontalmente la tabla


• background nos permite poner un color a la tabla


• bgcolor dar color a la tabla


• border definir el tipo de borde de la tabla


• bordercolor color del borde


• cellpadding define en pixeles , esl espacio entre los bordes de la celda y el contenido


• cellspacing define el espacio entre los bordes


• height alto de la tabla, px o %


• width ancho de la tabla px o %

Ejemplo 1: Horario escolar, uso de rowspan y colspan

Hora	Lunes	Martes	Miercoles	Jueves	Viernes
7:00 - 8:00	M3S2	M3S2	M3S3	Inglés IV	Tutoría
8:00 - 9:00				Ecología	M3S2
9:00 - 10:00		Física I	Ecología	M3S3	M3S3
10:00 - 11:00	Física I	Inglés IV
11:00 - 12:00			Fisica I	M3S1	C.D.
12:00 - 13:00	M3S1	Ecología	C.D.
13:00 - 14:00		M3S3

Ejemplo 2: Tabla dentro de otra tabla

Celda de la tabla principal

Tabla anidada, celda 1 Tabla anidada, celda 2 Tabla anidada, celda 3 Tabla anidada, celda 4

Ejemplo 3: Uso de rowspan y colspan

Animales en peligro de extinción
Nombre	Cabezas	Previsión 2020	Previsión 2030
Ballena	6000	4000	1000
Oso Pardo	50	0
Linces	10
Tigre	300	210

Haz llegado al final de este articulo, puedes leer de nuevo, o volver a la página principal