Tipos de Etiquetas

En HTML y CSS tenemos diferentes tipos de etiquetas cada uno con un propósito en particular una etiqueta se puede componerse de dos maneras. HTML son las siglas de HyperText Markup Language,
que constituye un estándar asumido y reconocido a nivel mundial. ... Es decir, con el lenguaje HTML se crean las páginas web, pero no su diseño, mientras que con CSS (un lenguaje de hojas de estilos), se le da a esos contenidos una apariencia atractiva para el usuario.
A partir de la creación de internet y el desarrollo de páginas web fueron surgiendo nuevos lenguajes. Estos nuevos idiomas rompen las barreras geográficas y culturales, consiguiendo una universalidad única. Por eso cada vez es más importante que todo profesional conozca qué son los lenguajes CSS y HTML, dos de los más importantes para la creación de páginas web. Sabemos que puede ser difícil a primera vista saber qué es exactamente HTML o CSS, o entender qué hacen y cómo funcionan.
Por eso hoy decidimos darnos a la tarea de contártelo. Una vez hayas terminado de leer este artículo entenderás muchas de las cosas que pasan en el front-end de todo sitio web.

ESTRUCTURA DE ETIQUETAS
Etiquetas que solo se aperturan	Etiquetas que tienen una apertura y un sierre
Este tipo de etiqueta común mente se utilizan para indicar una dirección u origen se componen por argumento u opciones tales como src href.	Este tipo de etiquetas común mente se utilizan para encerrar un contenido tales como texto img entre otros.

🌍Lista de etiquetas dirigidas al texto

🌭<p></p>

Se utiliza para escribir o colocar un texto

Propiedades

color:;

background-color:;

font-size:;

font-family:;

text-align:;

🌭<h1></h1>

Se utiliza para colocar un parrafo de algun tema

Propiedades

color

font-size:;

text-align:;

font-style:;

background-color:;

🌭<h2></h2>

Esta etiqueta sirve para identificar los subtitulos

Propiedades

color

font-size:;

text-align:;

font-style:;

background-color:;

🌭<h3></h3>

Cuando el contenido debe ser muy minucioso y bien explicado, el uso de H3, H4, H5 y H6 es importante para también destacar esos conectores de contenido.

Propiedades

color

font-size:;

text-align:;

font-style:;

background-color:;

🌭<h4></h4>

Cuando el contenido debe ser muy minucioso y bien explicado, el uso de H3, H4, H5 y H6 es importante para también destacar esos conectores de contenido.

Propiedades

color

font-size:;

text-align:;

font-style:;

background-color:;

🌭<h5></h5>

Cuando el contenido debe ser muy minucioso y bien explicado, el uso de H3, H4, H5 y H6 es importante para también destacar esos conectores de contenido.

Propiedades

color

font-size:;

text-align:;

font-style:;

background-color:;

🌭<h6></h6>

Cuando el contenido debe ser muy minucioso y bien explicado, el uso de H3, H4, H5 y H6 es importante para también destacar esos conectores de contenido.

propiedades

color

font-size:;

text-align:;

font-style:;

background-color:;

🌭<label>/label>

representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label.

Propiedades

color:;

text-align:;

font-famiy:;

background-color:;

🎲Listado de etiquetas dirigidas a objetos

😈<img>

La carpeta img nos sirve para tener unicamente guardada en esta carpeta todas las imagenes que vamos a utilizar durante nuestro trabajo

😈<header>

representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.

Propiedades

width:;

height:;

padding:;

box-sizing:;

display:;

😈<footer>

Propiedades

background-color:;

height:;

display:;

justify-content:;

flex-wrap:;

representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección (p.e, su ancestro mas cercano .)

😈<header>/header>

Propiedades

display:;

flex-direction:;

justify-content:;

background-color:;

background-image:;

El elemento de HTML Header representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.

😈<section>/section>

Propiedades

width:;

height:;

display:;

justify-content:;

flex-wrap:;

El elemento de HTML section representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas. Es, por lo tanto, una etiquéta semántica.

🎮Listado de propiedades css dirigidas a texto:

🙉color:;

Esta propiedad se utiliza en css para darle una mejor vista a tu texto o tus titulos y tu pagina se mire mas presentable

🙉font-size:;

La propiedad font-size permite establecer el tamaño de letra del texto. ... De esta forma, si el elemento contenedor tiene un tamaño de letra equivalente a medium , el tamaño utilizado si se indica un valor larger será large y si se indica un valor smaller será small .

🙉text-align:;

A pesar de su nombre, la propiedad text-align no sólo controla la alineación del texto. En realidad, esta propiedad establece la alineación de los contenidos (texto, imágenes) que se encuentran dentro de un elemento de bloque.

🎯Listado de propiedades dirigidas a objetos:

🎳width:;

La propiedad CSS width especifica la anchura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

🎳heigh:;

La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

🎳margin:;

🎳padding:;

La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde ( border ). No se permiten valores negativos.

🎳font-family:;

La propiedad font-family define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos.

🎳border:;

La propiedad border permite definir de golpe todos los bordes en una única regla de la hoja de estilos. Se puede utilizar border para definir el o los valores siguientes: border-width , border-style , border-color .

🎳margin-top:;

La propiedad CSS margin establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen: margin-top (en-US), margin-right , margin-bottom y margin-left (en-US). A esta propiedad no solo se le puede poner a que lado tambien mira el porcentaje de pixeles que uno quiere o desea

🎳background-color:;

Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra " transparent e"

🎳border-radius:;

La propiedad border-radius de CSS3 nos permite redondear los bordes de las cajas. Se usa principalmente en el diseño de las cajas que muestran el contenido de una web y para hacer algunas figuras sencilla, como los círculos.

🎳display:;

La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible). Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento.

🎳justify-content:;

La propiedad CSS justify-content define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor. ... Véase Using CSS flexible boxes (en-US) para más propiedades e información.

🎳flex-direction:;

La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).