Vanessa Marlene Sanchez
HTML5
Con explicaciones simples
Vanessa Marlene Sanchez
Base
<!DOCTYPE> Tipo de documento debe abrir el navegador
<html> Determina que es un documento HTML
<head> Colocamos información sobre el documento HTML
<body> Define el cuerpo de nuestro documento HTML (contenido)
<title> Utilizado para el título de nuestro documento
<meta> Contiene los metadatos de nuestro HTML: charset, name
y content
Vanessa Marlene Sanchez
Base 2
<base> Definimos la URL base para todas las URL relativas:
href, target
<link> Permite conectar un documento externo a nuestro HTML
(href, rel, type)
Permite agregar detalles adicionales que se pueden ver o
<details>
esconder
<sumary> Encabezado que es visible para el elemento <details>
<!– –> Hacer comentario en HTML
Vanessa Marlene Sanchez
Secciones
<div> Agregar estilo o para marcar una semántica común
<section> Para definir nuestra sección de contenido temático
<article> Para definir contenido inedependiente
<header> Es el encabezado de nuestro contenido
<footer> Es el pie de página de nuestro contenido
<nav> En un grupo de enlaces de navegación
<main> Colocamos el contenido principal
Vanessa Marlene Sanchez
TEXTO
<p> Define un parrafo (atributo align)
<h1><h6> Solo se utiliza un h1, el resto nos permite definir
encabezado en distintos tamaños(atributo align)
<hgroup> Es para crear una agrupación de encabezado con las
etiquetas <h1> <h6>
<a> Nos permite definir un enlace: href, target, download,
rel, type, hreflang, accesskey, tabindex
<strong> Nos permite colocar el texto en negrita
<em> Nos permite colocar nuestra texto enfatizado
Vanessa Marlene Sanchez
TEXTO 2
<u> Nos permite colocar el texto subrayado
<del> Nos permite colocar el texto tachado
<sup> Nos permite colocar texto sobreescrito
<sub Nos permite colocar texto subíndice
<blockquote> Nos permite colocar una cita larga
<q> Nos permite colocar una cita corta (atributo cite)
Vanessa Marlene Sanchez
TEXTO 3
<pre> Nos permite definir un bloque de texto de forma
preformateada
<abbr> Define una abreviatura (atributo title)
<address> Nos permite defnir información de contacto
<cite> Nos permite definir el título de trabajo
<bdo> Nos permite definir la dirección del texto(atributo dir)
<mark> Nos permite definir el texto resaltado
Vanessa Marlene Sanchez
TEXTO 4
<span> Nos permite incluir texto en línea
<small> Nos permite crear un texto más pequeño
<time> Nos permite definir una fecha y hora(atributo datetime)
<var> Nos permite definir una variable de texto
<dfn> Nos permite definir el término de alguna definición
Nos permite aislar una parte del texto para que tenga
<bdi>
formato distinto
Vanessa Marlene Sanchez
TEXTO 5
<br> Nos permite dar un salto de línea
<wbr> Nos permite definir un posible salto de línea
Nos permite cambiar la temática de una línea que se ha
<hr> dibujado
Vanessa Marlene Sanchez
Listas
<ul> Es una lista desordenada (atributos: type, start,
reversed)
<ol> Es una lista ordenada (atributos: type, start,
reversed)
<li> Se usa para colocar un elemento de nuestra lista,ya sea
dentro de una lista ordenada o desordenada (atributo:
value)
<dl> Es para crear una lista de definición
Se utiliza para un término dentro de una lista de
<dt> definición
<dd> Es una definición de un término que está dentro de
nuestra lista de definición
Vanessa Marlene Sanchez
Tablas
<table> Nos permite crear una tabla (atributos: border,
cellpadding, cellspacing, width).
<caption> Nos permite agregar título a nuestra tabla
Nos permite definir una celda de encabezado en
<th> nuestra tabla
<tr> Nos permite crear una fila en nuestra tabla
Nos permite definir una celda en una tabla (atributos:
<td>
colspan, rowspan)
<thead> Nos permite agregar el contenido de un encabezado en
una tabla
Vanessa Marlene Sanchez
Tablas 2
<tbody> Nos permite agrupar el contenido del encabezado
dentro de una tabla
<tfood> Nos permite la agrupación del contenido de pie de
página en una tabla
Nos permite definir las propiedades para una o más
<col>
columnas de nuestra tabla (atributo span)
<colgroup> Nos permite definir un grupo de columnas
dentro de una tabla (atributo span)
Vanessa Marlene Sanchez
Multimedia & scripts
Nos ayuda a definir un scipt en JS u otro lenguaje
<script> de script (atributos: src, type, async, defer,
crossorigin)
Nos ayuda a definir un contenido alterno para
<noscript> navegadores que no admiten scripts
<canvas> Nos ayuda a definir un área para gráficos, dibujos,
utilizando scripts como JS
<audio> Nos permite colocar un archivo de sonido o
música para que se reproduzca cuando
cargamos nuestra página (atributos: src,
preload, autoplay, loop, controls)
Vanessa Marlene Sanchez
Multimedia & scripts 2
Nos permite definir un archivo de vídeo, para que
<video> se reproduzca cuando cargamos nuestra página
(atributos: src, width, height, poster, preload,
autoplay, loop, controls)
<source> Nos permite definir múltiples recursos de medios,
ya sea para multimedia como audio y video
(atributos: src, type, media)
Nos permite definir un texto de título o subtítulo para
<track> agregarlo a nuestros elementos multimedia (atributos:
src, srclang, label, default)
Nos permite crear un marco en línea en que
<iframe>
podemos cargar una página diferente
(atributos: src, width, height, frameborder,
scrolling)
Vanessa Marlene Sanchez
Multimedia & scripts 3
Nos permite definir contenido integrado como
<embed> puglins (atributos: src, type, width, height)
<object> Nos permite definir un objeto que se incrusta en
un documento HTML (imagen,video, etc).
(Atributos: data, type, width, height, name)
<param> Nos permite crear un parámetro para un objeto
(atributos: name, value)
<map> Nos permite definir una imagen como mapa de
img (atributo: name)
Vanessa Marlene Sanchez
Multimedia & scripts 4
<area> Nos permitir definir una región de un mapa de
img (atributo: shape, coords, href, alt)
<progress> Nos permite definir una barra de progreso para
tareas largas como descargas o carga de archivos
(atributos: value, max)
<meter> Nos permite definir un valor escalable dentro de un
rango referente o fraccional (atributo: value min, max,
low, high, optimum)
<code> Nos permite la definición de un fragmento de
código
Vanessa Marlene Sanchez
Formularios
Nos ayuda a crear nuestro formulario (atributos:
<form> action, method, target)
<input> Nos permite crear un campo de entrada (atributos:
type, name, value, placeholder, required,
autofocus y disabled)
<textarea> Es una área de texto para la entrada de cualquier
dato(atributos: name, rows, cols, placeholder, required,
autofocus, disabled)
<select> Nos permite crear una lista de manera
desplegable (atributos: name, size, required,
autofocus, disabled)
Vanessa Marlene Sanchez
Formularios 2
Nos permite colocar una opción en una lista
<option> desplegable (atributos: value, select, disabled)
<label> Nos permite definir una etiqueta para cada
elemento de nuestro formulario (atributo for)
<fieldset Nos ayuda a agrupar nuestros elementos de nuestro
formulario
<legend> Nos permite agregar una leyenda para cada
elemento de nuestro formulario agrupado
Vanessa Marlene Sanchez
Formularios 3
Nos permite agregar un botón a nuestro
<button> formulario (atributos: type, name, value,
autofocus, disabled)
<datalistl> Nos permite crear una lista de opciones ya
establecidas para un campo de entrada (atributo
id)
<optgroup> Nos permite agrupar opciones en nuestra lista
despegable (atributos: label, disabled)
Vanessa Marlene Sanchez
Formularios 4
<input type = Nos permite crear una casilla de verificación
(atributos: name, value, checked, required,
“checkbox”> autofocus, disabled)
Nos permite crear un botón de radio (atributos:
<input type=
name, value, checked, required, autofocus,
“radio”> disabled)
<input type = Nos permite crear un botón de envío a nuestro
formulario (atributos: name, value, formaction,
“submit”> formmethod, formtarget, formenctype,
autofocus, disabled)
Vanessa Marlene Sanchez
Formularios 5
<input type = Nos permite definir un botón para restablecer
nuestro formulario
“reset”>
<input type= Nos permite utilizar una imagen como botón de
envío a nuestro formulario (atributos: src, alt,
“image”>
name, value, formaction, formmethod,
formtarget, formenctype, autofocus, disabled)
<input type = Nos permite crear un campo no visible en el
“submit”> formulario (atributo: name y value)
Vanessa Marlene Sanchez
Gracias por leer
Si te gusto este contenido espera las
actualizaciones..
Apreciaría si lo compartes. Gracias.