╔════════════ ༺❀༻❤༺❀༻ ════════════╗

TIPOS DE ETIQUETA

╚════════════ ༺❀༻❤༺❀༻ ════════════╝

En HTML y CSS tenemos diferente tipos de etiquetas cada uno con un propósito en particular una etiqueta se puede componerse de dos maneras.

ESTRUCTURA DE ETIQUETAS
Etiquetas que solo se apertura	Etiquetas que tienen una apertura y un cierre
Este tipo de etiqueta comúnmente se utilizan para indicar una dirección origen que se componen por argumento u opciones.	Este tipo de etiquetas comúnmente se utilizan para encerrar contenidos tales como texto, img, entre otros.

Antes de profundizar más sobre algunos de los tipos de etiquetas y su clasificación, mencionaré la estructura básica que debe de llevar una página web.

Estructura básica de página web en html:

<html></html>

Se utiliza para indicar que se trabaja un documento html.

<head></head>

Provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.

<title></title>

Permite escribir el título del documento. El título no se muestra en la página, sino en la parte superior de la ventana del visualizador.

<body></body>

Representa el contenido de un documento HTML. Solo puede haber un elemento <Body></Body> en un documento.

<header></header>

Representa un grupo de ayudas introductorias o de navegación

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
font-family
font-size
padding;
background-image;

<nav></nav>

Es importante no confundir con las etiquetas section o menu, nav sólamente contiene enlaces a las diferentes secciones de la web.

<section></section>

Representa una sección genérica de un documento.

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
font-family
font-size
padding;
background-image;

<article></article>

Representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
font-family
font-size
padding;
background-image;

<div></div>

Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc).

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
font-family
font-size
padding;
background-image;

<link>

Ayuda a conectar el documento HTML con el documento CSS.

<footer></footer>

Representa un pie de página

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
font-family
font-size
padding;
background-image;

Ejemplo:

Etiquetas dirigidas al texto:

<p></p>

Se utiliza para colocar texto.

Ejemplo:

Resultado:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;

<h1></h1> a <h6></h6>

Se utiliza para colocar un titulo directo en html.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;

<u></u>

Se utiliza para que el texto salga subrayado.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;

<s></s>

Se utiliza para que el texto salga ~~tachado~~.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;

<mark></mark>

Se utiliza para que el texto salga marcado.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;

<span></span>

Especifica texto en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;

<em></em>

Especifica un texto enfatizado.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;

<ol></ol>

Se utiliza para crear listas enumeradas

<ul></ul>

Se utiliza para crear listas con viñetas

<li></li>

Se utiliza para definir un articulo de una lista.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

text-aling;
font-family;
color;
font-size;
text-decoration;
background-color;
list-style;

<br>

Se utiliza para representar un salto de linea

Ejemplo:

Etiquetas dirigidas a objetos:

<img>

Se utiliza para colocar una imagen.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
filter;
margin;
padding;

<table></table>

Se utiliza para colocar una tabla

<tr></tr>

Se utiliza para colocar una fila.

<td></td>

Se utiliza para colocar una celda.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
padding;
background-image;

<form></form>

Se utiliza para colocar un formulario.

Ejemplo:

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
padding;
background-image;

<a></a>

Se utiliza para colocar un enlace.

Ejemplo:

Este enlace te llevará a el inicio.

Algunas propiedades Css aplicables a esta etiqueta:

width;
height;
background-color;
margin;
font-family
font-size
text-decoration
padding;
background-image;

Propiedades css dirigidas a texto:

font-family;

Se utiliza para colocar la fuente de la letra.

Ejemplo:

color;

Se utiliza para seleccionar el color del texto.

Ejemplo:

font-size;

Se utiliza para escoger el tamaño de letra.

Ejemplo:

text-aling;

Se utiliza para seleccionar en que posicion queremos el texto.

Ejemplo:

border-Style;

Se utiliza para seleccionar el estilo del borde.

border-color;

Especifica el color del borde del elemento.

Ejemplo:

text-decoration;

Especifica la decoracion del texto.

Ejemplo:

background-color;

Especifica el color del fondo del elemento.

Ejemplo:

list-style;

Permite establecer simultáneamente las tres propiedades relacionadas con los marcadores de los elementos de una lista.

Ejemplo:

Propiedades dirigidas a objetos:

margin;

Se utiliza para colocar cuatro márgenes.

padding;

Se utiliza para marcar la distancia desde el borde de un elemento hasta su contenido.

width;

Especifica la anchura del area de contenido de un elemento.

height;

Especifica la altura del area de contenido de un elemento.

line-height:;

Establece la altura de una casilla remarcada por líneas.

display:;

Se utiliza para colocar el tipo de caja.

flex-direction:;

Se utiliza para colocar el tipo de caja.En una caja flex podemos colocar los elementos en cualquier dirección: horizontalmente ( row ) o verticalmente ( column ), en el sentido lógico o en el sentido contrario ( -reverse ).

justify-content:;

Se utiliza para alinear los ítems del eje principal (por defecto, el horizontal).

box-sizing:;

Es una propiedad CSS para cambiar el modelo de caja por defecto de los navegadores.

flex-wrap:;

Especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas.

Ejemplo:

background-image;

Se utiliza para el fondo de la imagen.

bacground-size:;

Permite redimensionar las imágenes de fondo. El valor de la propiedad background-size puede ser una palabra clave o el tamaño de la imagen redimensionada..

Ejemplo:

filter:;

Brinda efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento.

Ejemplo:

cursor:;

Coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor.

Transition:;

Proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea.

border-radious:;

Permite definir qué tan redondeadas serán las esquinas.

Ejemplo:

Ejemplo

object-position:;

La propiedad object-position determina el alineamiento del elemento dentro de la caja.

Ejemplo:

object-fit:;

La propiedad CSS object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un <img> o <video> , debería redimensionarse para ajustarse a su contenedor.

Ejemplo: