Sara Chacón

TIPOS DE ETIQUETAS

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 de apertura Etiquetas de apertura y cierre
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.

Etiquetas Básicas

❯ PARA ELEMENTOS RAÍZ

Etiquetas Descripción
!DOCTYPE Esta es el tipo de documento del html
<html></html> Esto engloba todo el trabajo
<!--...--> Sirven para poner un comentario en tu trabajo

❯ DE METADATOS

Etiquetas Descripción
<title></title> Esta etiqueta contiene el título del documento
<head></head> Este delimita el encabezado del documento
<Link> Este se utiliza para unir un css u otra página, archivos, a tu html

➫ETIQUETAS DIRIGIDAS AL TEXTO HTML

❯ PARA TÍTULOS

Son las secciones relevantes para describir o iniciar un tema definido en HTML, ya sea para títulos principales o subtítulos.

Etiquetas Descripción Ejemplo
<h1></h1> se utiliza para colocar un título

Hola
<h2></h2> se utiliza para colocar un título de nivel 2

Hola
<h3></h3> se utiliza para colocar un título de nivel 3

Hola
<h4></h4> se utiliza para colocar un título de nivel 4

Hola
<h5></h5> se utiliza para colocar un título de nivel 5
Hola
<h6></h6> se utiliza para colocar un título de nivel 6
Hola
<a></a> En el código fuente HTML los enlaces se identifican mediante esta etiqueta y su atributo href, que contiene el URI del destino al que conduce el enlace

❯ PARA PÁRRAFOS

La etiqueta dirigida para crear párrafos en HTML es la etiqueta p, si tu deseas colocar varios textos tendrás que insertar varias de estas etiquetas

Etiquetas Descripción Ejemplo
<p></p> se utiliza para colocar un texto

¿Qué les ha parecido?
<tr></tr> se utiliza para separar un párrafo
<strong></strong> Fragmento de texto importante o palabras clave. Hoy es un gran día
<br> Sirve para dar un salto de línea Si la palabra no cabe
dentro de un...

➫Listado de etiquetas dirigidas a objetos

❯ Para estructuras:

Estas etiquetas son de tipo objeto porque pueden ser redimensionadas, en alto y ancho, también son conocidas como cajas.

Etiquetas Descripción Ejemplo
<body></body> Este abarca todo el contenido de la página
<img> Sirve para poner imágenes
<header></header> contiene el encabezado de una sección o documento
<nav></nav> está dirigida al menú de navegación del sitio web normalmente se encuentra dentro de la etiqueta header
<section></section> cada página web se compone de una estructura que contiene secciones, este sirve para tener má ordenado nuestro código
<div></div> Esta te permite agrupar varios elementos de bloque.
<article></article> nos ayuda a definir un contenido específico dentro de una web y que por si solo tiene sentido
<table></table> Con esta etiqueta puedes poner una tabla
<footer></footer> Contiene información general sobre el documento
<address></address> Esta contiene información de contacto del autor

❯ PARA BLOQUES

Etiquetas Descripción Ejemplo
<ol></ol> Esta te sirve para poner una lista ordenada
  1. Fresa
  1. Piña
<ul></ul> Sirve para poner una lista no ordenada
<li></li> Es un elemento de lista, ordenada y no ordenada

➫PROPIEDADES CSS

❯ PARA TEXTOS

Etiquetas Descripción Ejemplo
Font-family: Este sirve para cambiar el tipo de letra Chase
font-size: cambia el tamaño del texto Chase
color: Este te cambia el color del texto Chase
text-align: Este define la alineación del texto Chase
text-decoration Este te ayuda a quitar la decoración que tenga el texto none
list-style quita viñetas o numeraciones

➫PROPIEDADES CSS

❯ PARA objetos

Etiquetas Descripción Ejemplo
width este es el ancho del objeto 300px
Height esta es la altura del objeto 250px
border permite establecer cuatro bordes simultáneamente Border-color, border-radius
margin es un margen exterior de un elemento auto, 10px
padding Es un margen interior de un elemento 10px 5px
background-color Este pone el fondo de un color
background-image con este pones una imagen como fondo
background-size Le pones un tamaño a tu imagen de fondo
background-repeat para que tu imagen no se repita si es pequeña
Display es el tipo de caja que deseas
Flex direction Dirección de la caja row,row-reverse, column, column-reverse
justify-content Alínea en la dirección principal space-between, space-around, center
box-sizing este es la posición del borde y márgenes