DESARROLLADOR DE FRONT-END Nivel 2

ETIQUETAS EN HTML

La sintaxis que debe de seguir la mayoría de las etiquetas es la siguiente

<elemento atributo = “valor”> contenido </elemento>

ETIQUETAS DE TEXTO

<em> texto enfatizado <dfn> <abbr> definición / abreviatura href URL enlace o archivo

<srong> texto importante title significado hreflang idioma (ISO 639-1)

<mark> texto resaltado <cite> títulos de trabajos u obras download nombre de descarga

<i> voz/tono alternativo <q> citas (frases) rel alternate author bookmark help

<b> palabra clave cite URL enlace de referencia license prev next search prefetch

<u> anotaciones <time> fecha /hora (legible) nofollow noreferrer tag

<sub> <super> subíndice / superíndice datetime fecha /hora (ISO 8601) target _self _blank _parent destino

<small> pequeñas aclaraciones <data> equivalencia para máquinas type MIME formato de archivo
<var> variable o incógnita value información (para robots) alt texto alternativo (sólo para <area>)

<samp> resultado de operación <code> fragmento de código coords lista de coordenadas

<kbd> entrada de usuario (teclado) <a> <area> vínculos y área de enlaces shape rectangle circle poly default

ETIQUETAS DE AGRUPACIÓN

<p> párrafo de texto cite URL enlace de referencia

<div> capa (división en bloque) <figure> ilustración (figura, imagen...)

<span> capa (fragmento en línea) <figcaption> leyenda de ilustración

<hr> separación temática <main> contenido principal

<pre> texto preformateado <map> mapa de imágenes (<area>)

<blockquote> agrupación de cita name nombre del mapa

 DESARROLLADOR DE FRONT-END Nivel 2
ETIQUETAS EN HTML

ETIQUETAS DE ETIQUETAS DE ETIQUETAS DE

LISTAS TABLAS SECCIÓN

<ul> lista sin orden <table> tabla de datos tabulada <article> tabla de datos tabulada
<ol> lista ordenada border (fallback para U4 limitados) <h1><h2>...<h6> (fallback para U4 limitados)

start primer número de la lista sortable permite ordenar columnas <section> permite ordenar columnas

reversed lista inversa <tr> fila de la tabla (row) <nav> fila de la tabla (row)

type 1 a A i I tipo numeración <th> cabecera de la tabla (header) <aside> cabecera de la tabla (header)

<li> elemento de la lista <td> datos de la tabla (data) <header> cabecera (logo, título...)

value valor del elemento (robots) <caption> leyenda de la tabla <footer> pie de página

<dl> lista de definiciones <thead> agrupación de cabecera <address> información de contacto

<dt> <dd> término / descripción <tbody> agrupación de datos

<col> <colgroup> columna / agrupación

span aplicar a X columna ETIQUETAS DE

SCRIPTING

<script> ejecuta o carga un script

IDIOMA FECHA / HORA src URL

charset
enlace o archivo

UTF-8 ISO-8859-1 ...

(ISO639-1) (ISO8601) async carga asíncrona

defer aplaza ejecución

es español en inglés de alemán ... 2016-08-18T14:30:07+01:00
type MIME formato de archivo
<noscripts> alternativa sin scripts

<template> carga plantilla HTML

 DESARROLLADOR DE FRONT-END Nivel 2
ETIQUETAS EN HTML

ETIQUETAS MULTIMEDIA
<img> imagen JPG PNG SVG WEBP GIF <video> elemento de video MP4 WEBM OGV <source> formatos alternativos

src URL enlace a imagen <audio> elemento de audio MP3 OPUS OGG src URL enlace a video/audio

alt texto alternativo a imagen PARA <VIDEO> Y <AUDIO> type MIME ;codecs= CODEC

width height ancho/alto de imagen src URL enlace a video width height ancho/alto de imagen

<iframe> marco flotante (HTML) HTML preload none metadata auto <track> subtítulos

src URL enlace a página mediagroup agrupación multimedia src URL enlace a video/audio

width height ancho/alto de imagen autoplay reproduce al incio lang Idioma (ISO639-1)

sandbox allow-forms allow-pointer-lock

loop modo infinito (bucle) label leyenda del subtítulo
allow-top-navigation allow-same-origin
muted silencia el audio kind subtitles captions descriptions
allow-popups allow-scripts
controls muestra controles chapters metadata
<embed> recurso externo SWF

URL SOLO PARA <VIDEO> Y <AUDIO> default subtítulo primario

src enlace a recurso

type MIME formato de archivo src URL enlace a video <picture> imágenes JPG PNG SVG WEBP GIF

width height ancho/alto de imagen preload none metadata auto <source> formatos para <picture>

<object> recurso externo SWF mediagroup agrupación multimedia srcset URL lista de imágenes

data URL enlace a recurso autoplay reproduce al incio sizes descriptor de ancho
name nombre del objeto loop modo infinito (bucle) media media queries
type MIME formato de archivo muted silencia el audio type MIME formato de archivo

width height ancho/alto de imagen controls muestra controles <canvas> lienzo de dibujo

<param> parámetros de <object> SOLO PARA <VIDEO> width height ancho/alto del lienzo

name nombre del parámetro poster URL enlace a imagen previa

value valor del parámetro width height ancho/alto de imagen

 DESARROLLADOR DE FRONT-END Nivel 2
ETIQUETAS EN HTML

ETIQUETAS DE DOCUMENTO ETIQUETAS HEAD Y METADATOS

<!DOCTYPE html> documento HTML5 <link> relación con otro documento <style> estilos CSS incrustados

<html> contenido del documento rel tipo de relación media tipo de medio aplicable

manifest URL archivo de caché alternate versión alternativa title nombre del estilo alternativo

<head> cabecera (metadatos) author información sobre el autor type MIME formato del archivo

<body> contenido de la página <base> base de URLs relativas

license licencia del documento

help documento de ayuda href URL enlace o archivo

ATRIBUTOS GLOBALES icon icono de la URL (favicon) target _self _blank _parent destino

canonical URL canónica

id identificador (único por página)

class clase (múltiples por página) prev next página anterior/siguiente

lang Idioma (ISO639-1) prefetch precarga de página

translate yes no palabra traducible search URL de búsqueda web

*
title información al pasar el ratón stylesheet URL de estilos CSS
ATRIBUTOS COMUNES DE FORMULARIO
data-* metadatos personalizados href URL enlace o archivo

style estilos CSS incrustados hreflang Idioma (ISO639-1) accesskey tecla de acceso rápido
dir ltr rtl auto dirección de texto type MIME formato de archivo tabindex orden del campo (número)

<meta> codificación del documento spellcheck true false revisa ortografía

charset UTF-8 ISO-8859-1 ...

form asocia con id de un formulario

<meta> metadatos del documento autofocus coloca foco en campo

name keywords description author hidden oculta un campo

application-name generator
contenteditable permite editar campo

content valor del metadato

 DESARROLLADOR DE FRONT-END Nivel 2
ETIQUETAS EN HTML

FORMULARIOS HTML
<form> formulario size tamaño de campo label texto visible

name list selected opción seleccionada

nombre del formulario asocia con id de <datalist>

method get post método HTTP placeholder sugerencia visual <optgroup> agrupación de opciones

action URL enlace a back-end size tamaño de campo label texto visible

accept- charset UTF-8 ISO-8859-1 ... list asocia con id de <datalist> <fieldset> agrupación temática

autocomplete on off placeholder sugerencia visual name nombre del campo

novalidate no realiza validaciones accept formatos soportados o MIME <legend> leyenda para <fieldset>

target _self _blank _parent destino alt texto alternativo <button> botón

enctype name nombre del campo

application/x-www-form-urlencoded src URL enlace o imagen

width height ancho/alto de imagen type submit reset button

multipart/form-data text/plain
autocomplete on off value valor inicial
<label> leyenda para un campo
cols número de columnas <keygen> generador de par de claves
for asocia con id de un campo
rows name nombre del campo
número de filas
<input> campo de entrada de datos
keytype
placeholder sugerencia visual rsa

name nombre del campo challenge

wrap soft hard mantiene saltos cadena de desafío
type text hidden search tel url email <select> lista de selección <output> resultados

number range color name nombre del campo name nombre del campo

password file size tamaño del campo for asocia con id de un campo

datetime date time week month multiple selección múltiple <progress> barra de progreso

checkbox radio <datalist> lista (modificable) value progreso actual

submit image reset button

<option> elemento de la lista max valor máximo

value valor inicial

<details> información (desplegable)
value valor inicial
 DESARROLLADOR DE FRONT-END Nivel 2
ETIQUETAS EN HTML

open despliega contenido

<summary> información

<dialog> cuadro de diálogo HTML

open despliega contenido

@
<meter> medidor @
value progreso actual

low umbral inferior

high umbral superior

optimum valor óptimo

ESQUEMAS DE <METER> RESTRICCIÓN DE CAMPOS ATRIBUTOS QUE ALTERAN FORMULARIO

campos numéricos formmethod get post

Low<Opt<High Low<High<Opt Low<High<Opt enlace a back-end

min max número mínimo/máximo formaction URL
Value<Low Value<Low Value<Low formnovalidate no realiza validaciones
step cantidad entre saltos
Value<High Value<High Value<High campos textuales formtarget _self _blank _parent

Otro Otro Otro minleght maxlenght patrón de validación formenctype multipart/form-data

pattern REGEX patrón de validación application/x-www-form-urlencoded text/plain

tipo general

required campo obligatorio

disabled desativado (no se envía) <!-- comentarios -->

readonly impide editar campo