QUÉ ES
HTML5
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje
HTML. Esta nueva versión (aún en desarrollo), y en conjunto con CSS3, define los
nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y
actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o
atributos, sino que incorpora muchas características nuevas y proporciona una
plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).
HTML5 está destinado a sustituir no sólo HTML 4, sino también XHTML 1 y DOM Nivel
2. Esta versión nos permite una mayor interacción entre nuestras páginas web y el
contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de
codificar nuestro diseño básico.
Características destacadas de HTML5.
1) Nuevas etiquetas semánticas para estructurar los documentos HTML,
destinadas a remplazar la necesidad de tener una etiqueta <div> que identifique
cada bloque de la página.
2) Los nuevos elementos multimedia como <audio> y <video>.
3) La integración de gráficos vectoriales escalables (SVG) en sustitución de los
genéricos <object>, y un nuevo elemento <canvas> que nos permite dibujar en
él.
4) El cambio, redefinición o estandarización de algunos elementos,
como <a>, <cite> o <menu>.
5) Almacenamiento local en el lado del cliente.
Estructura básica de un documento HTML5
En HTML existe un esqueleto básico, que todos debemos de conocer porque se viene
usando desde los inicios del lenguaje. Nos referimos a la conocida estructura del HEAD
/ BODY. Toda jerarquía de etiquetas comienza por <HTML> y dentro tenemos dos
grandes bloques <HEAD> y <BODY>. Bien, en este artículo nos vamos a adentrar en la
parte del <BODY>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link href="estilos.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Título de la WEB</h1>
</header>
<nav>
<a href="#">IR SECCIÓN 2</a>
<a href="#">IR SECCIÓN 3</a>
</nav>
<section>
<article>
<h2>CONTENIDO PRINCIPAL</h2>
<p>Este es el contenido principal de mi web.</p>
</article>
</section>
<aside>
<h3>Testimonios</h3>
<p>Me gusta mucho esta página.</p>
</aside>
<footer>
<h4>Redes sociales</h4>
<a href="#">Facebook</a>
<a href="#">Tiwtter</a>
</footer>
</body>
</htm>
Principales etiquetas
Las propias etiquetas expuestas son autoexplicativas, dado su nombre o en vista al
texto que hemos colocado a su contenido. Pero ten en cuenta que su uso queda un
poco en función de las necesidades del desarrollador. Por ejemplo
Etiqueta Función
<!–…–> Define un comentario
<!DOCTYPE> Define el tipo de docuemento
<a> Define un hipervínculo
<abbr> Define una abreviación
<address> Define la información de contacto del autor / propietario
del documento
<area> Define un área dentro de un mapa de imagen
<article> Define un artículo
<aside> Define el contenido lateral del contenedor de una página
<audio> Define contenido de sonido
<b> Define texto en negrita
<base> Especifica la base donde se abrirán todas las URL del
documento
<bdi> Aísla una parte del texto que puede tener un formato
diferente del texto externo
<bdo> Sobreescribe la dirección del texto
<blockquote> Define una sección que tiene otra fuente
<body> Define el cuerpo del documento
<br> Define un salto de línea
<button> Define un botón clickeable
<canvas> Se usa para dibujar gráficos en pantalla
<caption> Define el título de una tabla
<cite> Define el título de un trabajo
<code> Define un trozo de código de programación
<col> Especifica las propiedades de la columna para cada
columna del elemento <colgroup>
<colgroup> Especifica un grupo de una o más columnas de una tabla
<command> Define un botón command al que un usuario puede
invocar
<datalist> Especifica en un input una lista pre-definida de opciones
<dd> Define la descripción de un ítem en una lista de definición
<del> Define un texto que ha sido definido en un Mdocument
<details> Define detalles adicionales que el usuario puede ver o
esconder
<dfn> Define el término de una definición
<dialog> Define una caja o ventana de dialogo
<div> Define una sección en un documento
<dl> Define una lista de definición
<dt> Define un término (un ítem) en una lista de definición
<em> Define énfasis en un texto
<embed> Define el contenedor de una aplicación externa (no html)
<fieldset> Grupo de elementos relacionados en un formulario
<figcaption> Define el título para una figura <figure>
<figure> Especifica auto-contenido
<footer> Define el pie de página de un documento
<form> Define un formulario html
<h1> a <h6> Define encabezados o títulos
<head> Define información hacerca del documento
<header> Define la sección de encabezado del docuemnto
<hgroup> Grupo de encabezado (<h1> a <6>)
<hr> Define un cámbio de temática a partir de una línea
dibujada
<html> Define la raíz del documento
<i> Define una parte del texto de modo alternativo
<iframe> Define un frame en línea
<img> Define una imagen
<input> Define un control de entrada de texto
<ins> Define texto que ha sido insertado en un documento
<kbd> Define entrada del teclado
<keygen> Define un campo generador de claves para formularios
<label> Define el rótulo para un elemento <input>
<legend> Define un título para los elementos <fieldset>, <figure>,
<details>
<li> Define un ítem de una lista
<link> Define la relación entre un documento y un recurso
externo (generalmente con hojas de estilo)
<map> Define un mapa de imagen del cliente
<mark> Define texto resaltado o marcado
<menu> Define la lista de un menú
<meta> Define un metadato de un documento
<meter> Define una medida escalar en un rango conocido
<nav> Define un link de navegación
<noscript> Define un contenido alternativo para los usuarios que no
soportan scripts del cliente
<objet> Define un objeto embebido
<ol> Define una lista ordenada
<optgroup> Define un grupo de opciones relacionadas en una lista
desplegable
<option> Define una opción en una lista desplegable
<output> Define el resultado de un cálculo
<p> Define un párrafo
<param> Define un parámetro para un objeto
<pre> Define texto pre-formateado
<progress> Representa el progreso de una tarea en una barra
<q> Define una cita corta
<rp> Define que debe mostrar en navegadores que no
soportan scripts de ruby
<rt> Define una pronunciación de caracteres
<ruby> Define una notación de ruby
<s> Define texto que no es correcto
<samp> Define un ejemplo de salida de un programa
<script> Define un script del lado cliente
<section> Define una sección de un documento
<select> Define un drop-down list
<small> Define texto pequeño
<source> Define los recursos para elementos multimedia
<span> Define una pequeña sección de un documento
<strong> Define un texto en negrita
<style> Define un estilo para la información de un documento
<sub> Define un texto que es subíndice
<summary> Define un encabezado visible para el elemento <details>
<sup> Define un texto que es superíndice
<table> Define una tabla
<tbody> Define el cuerpo de una tabla
<td> Define una celda en una tabla
<textarea> Define un control de entrada de múltiples líneas
<tfoot> Agrupa los footer contenidos en una tabla
<th> Define una celda de encabezado en una tabla
<thead> Agrupa los encabezados de una tabla
<time> Define fecha / hora
<title> Define un título para el documento
<tr> Define una fila en una tabla
<track> Define texto de la pista para elementos multimedia (vídeo
y audio)
<ul> Define una lista desordenada
<var> Define una variable
<video> Define un vídeo o película
<wbr> Define un posible salto de linea
Listar y describir completamente los elementos semánticos
de HTML5
Elemento Descripción
<!DOCTYPE Indica que el documento está bajo el estándar de HTML5.
html>
<html> Representa la raíz de un documento HTML. Es una buena
práctica indicar el idioma mediante el atributo lang.
<head> En su interior se incluye la colección de metadatos sobre el
documento y los enlaces
a scripts y hojas de estilo.
<title> Representa el título del documento. Se muestra en la barra
superior del navegador o
en las pestañas de página.
<link> Utilizada para enlazar documentos externos de JavaScript y
CSS. Se debe incluir
dentro del <head>.
<meta> Define los metadatos que no pueden ser definidos usando otro
elemento HTML.
<style> Usada para escribir CSS interno.
<script> Define un script interno o un enlace hacia un script externo de
JavaScript.
<noscript> Representa un contenido alternativo a mostrar cuando el
navegador no soporta
scripting.
<body> Representa el contenido principal de un documento HTML.
Sólo puede existir un elemento <body> en el documento.
<section> Define secciones de una web.
<nav> Especifica una sección que contiene un menú de navegación
<article> Determina secciones de contenido.
<aside> Define la barra lateral de una página web.
<h1>,<h2>,<h3>,<h4>,<h5>, Describe el tema de la sección. Disponemos de seis niveles: de
<h6> h1 a h6, siendo <h1> la cabecera de mayor importancia.
Sólo puede existir una etiqueta <h1> en el documento.
<header> Determina la cabecera de una web o de un elemento.
<footer> Define el pie de página. También se puede utilizar para
definir el pie de otros elementos.
<address> Especifica una seccion que contiene una informacion de
contacto
<main> Determina el contenido principal del documento. Solo puede
existir un elemento <main> en el documento.
Tabla comparativa entre las características o diferencias
existentes entre HTML y HTML5
Caracteristicas
Multiplataforma
Simple no diferencia entre
HTML mayusculas yminusculas
No es mas que simple texto
Libre
Nuevas etiquetas que permiten
mejorar el marcado semántico de
un documento: <nav>, <section>,
<article>, <header>, <footer>,
<aside>.
Nuevos tipos de campos de
entrada en formularios: email,
time, number, range, color, etc.
La mejora más potente es el de las
HTML5 nuevas APIs, que permiten, vía
JavaScript, realizar tareas antes
impensables, muchas de ellas
enfocadas a la web móvil:
transformar en tiempo real
imágenes y
vídeos (pe, rotar, recortar…),
acceder a la cámara y/o
micrófono, geo localización,
websockets (los culpables de esas
ventanitas “fulanito quiere enviarle
notificaciones” tan de moda
ahora), almacenamiento local para
trabajar sin conexión, bases de
datos en el navegador, respuesta
a eventos táctiles.
Qué es el DOM y cuál es su funcionalidad
El modelo de objeto de documento (DOM) es una interfaz de programación para los
documentos HTML y XML. Facilita una representación estructurada del documento y
define de qué manera los programas pueden acceder, al fin de modificar, tanto su
estructura, estilo y contenido. El DOM da una representación del documento como un
grupo de nodos y objetos estructurados que tienen propiedades y métodos.
Esencialmente, conecta las páginas web a scripts o lenguajes de programación.
Es importante recordar que el acceso a los nodos, su modificación y su eliminación
solamente es posible cuando el árbol DOM ha sido construido completamente, es decir,
después de que la página XHTML se cargue por completo. Más adelante se verá cómo
asegurar que un código JavaScript solamente se ejecute cuando el navegador ha
cargado entera la página XHTML.
En JavaScript cada objeto tiene un nombre único y exclusivo. Cuando existe más de un
objeto en un documento web, estos se organizan en un vector y se le asigna una
identificación a cada uno, la cual se utiliza para hacer referencia a estos. Por ejemplo:
<frame id = "frame_1"> ... </frame>
Así, si existen varios elementos del tipo frame, se puede hacer referencia a cada uno de
estos de la siguiente forma:
Buscando por posición en el documento: document.frame[0]
Buscando por identificador: document.frame["frame_1"]
También se puede usar la función getElementById, así:
document.getElementById("frame_1")
¿Cuáles son las Etiquetas de Elementos
Estructurales en HTML5?
DIV
Es un elemento clásico y se debe usar para agrupar contenido en bloques o
capas y poder aplicarle un estilo o una ubicación a todo el conjunto, por ejemplo
si queremos que este alineado a la derecha. Esta etiqueta, por si sola, no genera
ningún diseño ni estructura, así que hay que combinarla con reglas de CSS.
Antes de usar esta etiqueta hay que evaluar si es más oportuno usar las
etiquetas que veremos a continuación
SPAN
Se usa para agrupar contenido dentro de un párrafo por ejemplo si queremos dar
diseño especial a un trozo de texto dentro de un párrafo
HEADER
Es una etiqueta nueva (de html5) y permite definir cabeceras dentro de una
página. En realidad pueden existir varias cabeceras, 1 la principal de la página
donde se ubicara la navegación, logotipo, h1, etc. Pero por ejemplo, en los
artículos (etiqueta article) es posible que tengan su propia cabecera con sus h2,
por ejemplo.
Eso sí, solo podemos tener un header en el elemento body o 1 por cada
elemento:
Article
Aside
Main
Nav
Section
FOOTER
Es muy similar a la anterior solo que para el pie de página. Dentro del body se
usa para definir la parte final de cada página, con copyright, y con diferentes
páginas… como el header dentro de un article puede existir un footer como por
ejemplo con un enlace o información del copyright del artículo en cuestión.
Eso sí, solo podemos tener un footer en el elemento body o 1 por cada
elemento:
Article
Aside
Main
Nav
Section
SECTION
ES otro elemento nuevo de HTML5 y se ha creado sobre todo para evitar el uso
excesivo de divs. Se debe usar para dividir un documento en diferentes
secciones como por ejemplo una sección de noticias y otra de productos que a
su vez está separado en header, div y footer.
Si tenemos varios elementos de este tipo (algo muy frecuente) es
recomendable usar aria-labelledby para identificarlas, por ejemplo:
<main>
<h1>Título principal<h1>
<section aria-labelledby="seccion1">
<h2 id="seccion1">Título sección 1</h2>
<p>Contenido</p>
</section>
<section aria-labelledby="seccion2">>
<h2 id="seccion2">Título sección 2</h2>
<p>Contenido</p>
</section>
</main>
NAV
Se usa para marcar una zona de enlaces como puede ser el menú principal, o los
del sidebar (laterales) o del footer. Podemos tener un nav dentro de header,
footer, section, y article.
Si tenemos varios elementos de este tipo es recomendable usar aria-labelledby
para identificarlas, por ejemplo:
<nav aria-labelledby="nav1">
<h2 id="nav1">Menú navegación 1<h2>
<ul>
<li><a href="x.html">Enlace 1</a></li>
<li><a href="x.html">Enlace 2</a></li>
<li><a href="x.html">Enlace 3</a></li>
<li><a href="x.html">Enlace 4</a></li>
</ul>
</nav>
<nav aria-labelledby="nav2">
<h2 id="nav2">Menú navegación 2<h2>
<ul>
<li><a href="x.html">Enlace 5</a></li>
<li><a href="x.html">Enlace 6</a></li>
<li><a href="x.html">Enlace 7</a></li>
<li><a href="x.html">Enlace 8</a></li>
</ul>
</nav>
Si los menús se repiten, por ejemplo en el lateral (sidebar) y en el footer, la
etiqueta aria- labelledby debe tener el mismo nombre, porque son el mismo
menú.
ARTICLE
Los articles son bloques de información, como si fuesen entradas de un blog,
pero no tienen que ser noticias, pueden ser servicios, productos, enlaces con
otras páginas, etc. La idea es que dentro de 1 sectión haya diferentes articles,
agrupados por que así tiene más lógica.
HGROUP
Si se da el caso que tenemos varios encabezados seguidos, debemos
agruparlos con esta etiqueta.
FIGURE
Si tenemos imágenes con título, descripción, copyright, etc. Debemos agrupar
todo el contenido relacionado con esa imagen con esta etiqueta.
ASIDE
En ocasiones cuando en una página estamos hablando sobre un tema, surge la
necesidad de aclarar algo que no está directamente relacionado con el resto,
para eso debe usarse esta etiqueta. Habitualmente se usa para establecer los
sidebars – laterales, que son contenido más general.
Si tenemos varios elementos de este tipo es recomendable usar aria-labelledby
para identificarlas, por ejemplo:
<aside aria-labelledby="sidebar1">
<h2 id="sidebar1">Título sidebar</h2>
<p>Contenido sidebar</p>
</aside>
<aside aria-labelledby="sidebar2">
<h2 id="sidebar2">ítulo sidebar</h2>
<p>Contenido sidebar</p>
</aside>
MAIN
Se usa para establecer el bloque principal de la página, es el contenido en el que
se debe explicar de qué trata la página que estamos viendo, y dentro pueden
existir etiquetas como: header, section, footer, article, etc.
Si tenemos varios elementos de este tipo es recomendable usar aria-labelledby
para identificarlas, por ejemplo:
<main aria-labelledby="title1">
<h1 id="sidebar1">Título 2</h1>
<p>Contenido principal</p>
</aside>
<aside aria-labelledby="title2">
<h1 id="sidebar2">Título 1</h1>
<p>Contenido principal</p>
</aside>
FORM
Se usa para marcar un formulario.
¿Cuáles son las Etiquetas de Metadatos en HTML5?
Etiqueta meta charset. Posiblemente de los metadatos mas importantes y explico por
qué, lo entenderéis enseguida.
Etiqueta meta author. Sirve para identificar correctamente el autor del sitio web. ...
Etiqueta meta description. Etiqueta meta keywords. Etiqueta title.
¿Para qué sirve el UTF-8 en HTML?
UTF-8 (UCS Transformation Format 8) es la Codificación de caracteres más común en
la red. El número de bytes que representan un carácter pueden ser desde uno hasta
cuatro. UTF-8 es retrocompatible con ASCII y puede representar cualquier carácter
Unicode estandar.
Elementos de HTML5 para:
Raíz de HTML
<!DOCTYPE Indica que el documento está bajo el estándar de HTML5.
html>
Representa la raíz de un documento HTML. Es una buena
<html> práctica
indicar el idioma mediante el atributo lang.
Metadatos del documento
c En su interior se incluye la colección de metadatos sobre el
documento y los enlaces a scripts y hojas de estilo.
<title> Representa el título del documento. Se muestra en la barra
superior del navegador o en las pestañas de página.
<link> Utilizada para enlazar documentos externos de JavaScript y
CSS. Se debe incluir dentro del <head>.
<meta> Define los metadatos que no pueden ser definidos usando
otro elemento HTML.
<style> Usada para escribir CSS interno.
Scripting
<script> Define un script interno o un enlace hacia un script externo de
JavaScript.
<noscript> Representa un contenido alternativo a mostrar cuando el
navegador no soporta
scripting.
Secciones
<body> Representa el contenido principal de un documento
HTML. Sólo puede existir un elemento <body> en el
documento.
<section> Define secciones de una web.
<nav> Especifia una sección que contiene un menú de navegación
<article> Determina secciones de contenido.
<aside> Define la barra lateral de una página web.
<h1>,<h2>,<h3>,<h4>, Describe el tema de la sección. Disponemos de seis
<h5>,<h6> niveles: de h1 a h6, siendo <h1> la cabecera de mayor
<header> Determina la cabecera de una web o de un elemento.
<footer> Define el pie de página. También se puede utilizar para
definir el pie de otros elementos.
<address> Especifica una sección que contiene información de
contacto.
<main> Determina el contenido principal del documento. Solo
puede existir un elemento <main> en el documento.
Agrupación de Contenido
<div> Capa o división utilizado para agrupar varias etiquetas HTML.
<p> Define un párrafo de texto (con sus etiquetas HTML para
texto).
<pre> Establece un texto preformateado (respetando espacios y
saltos de
línea).
<blockquote> Agrupa información y características de una cita (autor, fuente,
etc...).
<main> Contenedor para englobar la parte principal de la página.
<hr> Indica una separación temática del texto.
Semántica a nivel de Texto
<a> El Elemento HTML Anchor <a> crea un enlace a otras páginas
de internet, archivos
o ubicaciones dentro de la misma página, direcciones de
correo, o cualquier otra URL.
<abbr> El elemento HTML <abbr> (o Elemento de Abreviación HTML)
representa una abreviación o acrónimo; el atributo opcional
title puede ampliar o describir la abreviatura. Si está presente,
el atributo title debe contener la descripción completa
y nada más.
<b> b de bold=negrita.
<bdi> El elemento HTML <bdi> (o elemento de aislamiento Bi-
Direccional) aisla un trozo
de texto para que pueda ser formateado con una dirección
diferente al texto que hay fuera de él.
<bdo> bdo Bi-Directional Overriding=Anulación de bidireccionalidad.
<br> El elemento HTML line break <br> produce un salto de línea
en el texto (retorno de
carro). Es útil para escribir un poema o una dirección, donde la
división de las líneas es significante.
<cite> cite -cita . Marca una referencia a una fuente, o el autor de un
texto citado.
<code>
<data> El Elemento HTML <data> vincula un contenido dado con una
traducción legible
por una máquina. Si el contenido está relacionado con time- o
date-, debe usarse el elemento time.
<dfn>
<em> El elemento HTML <em> es el apropiado para marcar con
énfasis las partes importantes de un texto. El elemento <em>
puede ser anidado, con cada nivel de
anidamiento indicando un mayor grado de énfasis.
<i>
<kbd>
<mark> El Elemento HTML Mark <mark> representa un texto marcado
o resaltado como referencia o anotación, debido a su
relevancia o importancia en un contexto
particular.
<q> El elemento HTML <q> indica que el texto adjunto es una cita
corta en línea. La
mayoría de los navegadores modernos implementan esto
rodeando el texto entre comillas.
<samp> El elemento HTML Sample (<samp>) se utiliza para incluir
texto en línea que representa una muestra (o cita) de la salida
de un programa de ordenador. El contenido de esta etiqueta
es renderizado generalmente usando la tipografía
monoespaciada por defecto del navegador.
<small> El elemento HTML <small> hace el tamaño del texto una talla
más pequeña (por ejemplo, de largo a mediano, o de pequeño
a extra pequeño) que el tamaño mínimo de fuente del
navegador. En HTML5, este elemento es reutilizado para
representar comentarios laterales y letra pequeña, incluyendo
derechos de autor y texto legal,
independientemente de su estilo de presentación.
<span> span - abarcar. Es un contenedor en línea. Sirve para aplicar
estilo al texto o
agrupar elementos en línea.
<strong>
<sub> El elemento HTML <sub> define un fragmento de texto que se
debe mostrar, por razones tipográficas, más bajo, y
generalmente más pequeño, que el tramo principal
del texto, es decir, en subíndice.
<sup> El elemento HTML <sup> define un fragmento de texto que se
debe mostrar, por razones tipográficas, más alto, y
generalmente más pequeño, que el tramo principal
del texto, es decir, en superíndice.
<time> El elemento HTML <time> representa un periodo específico en
el tiempo. Puede incluir el atributo datetime para convertir las
fechas en un formato interno legible por un ordenador,
permitiendo mejores resultados en los motores de búsqueda o
características personalizadas como recordatorios.
<u>
<var> Marca variables de programas y similares.
Contenido incrustado
<embed> El Elemento HTML Embed ( <embed> ) representa un punto
de integración para
una aplicación externa o de contenido interactivo (en otras
palabras, un plug-in).
<iframe> El elemento HTML <iframe> (de inline frame)representa un
contexto de
navegación anidado, el cual permite incrustrar otra página
HTML en la página actual.
<object> El elemento HTML <object> representa un recurso externo,
que puede ser tratado como una imagen, un contexto de
navegación anidado, o como un recurso
que debe ser manejado por un plugin.
<param> param de "parameter" = parámetro. Permite especificar
parámetros de ejecución
para un objeto.
<picture> El elemento HTML <picture> es un contenedor usado para
especificar múltiples elementos source y un elemento img
contenido en él para proveer versiones de una imagen para
diferentes escenarios de dispositivos. Si no hay coincidencias
con los elementos <source>, el archivo especificado en los
atributos src del elemento <img> es utilizado. La imagen
seleccionada es entonces presentada en
el espacio ocupado por el elemento <img>.
<portal>
<source> El elemento HTML <source> especifica recursos de medios
múltiples para los
elementos picture, audio, o video. Es un elemento vacío.
Normalmente se utiliza
Datos tabulares
<caption> Es el encargado de darle un título descriptivo a las tablas.
<col> Permite especificar propiedades para una columna o un grupo
de ellas.
<colgroup> colgroup de column group = Grupo de columnas. Permite crear
grupos de columnas.
<table> El Elemento de Tabla HTML (<table>) representa datos en dos
o mas dimensiones.
<tbody>
<td> El elemento HTL Celda de tabla (<td>) define la celda de una
tabla que contiene datos.
Esta participa en el modelo de tablas.
<tfoot>
<th> El elemento HTML <th> define una celda como encabezado de
un grupo de celdas en
una tabla. La naturaleza exactade este grupo
está definida por los atributos scope y headers.
<thead>
<tr> El elemento HTML fila de tabla (table row) <tr> define una fila
de celdas en una tabla.
Estas pueden ser una mezcla de elementos td y th.
Formularios
<button> La etiqueta de HTML <button> representa un elemento
cliqueable de tipo botón que puede ser utilizado en formularios
o en cualquier parte de la página que
necesite un botón estándar y simple de aplicar.
<datalist> El elemento HTML <datalist> contiene un conjunto de
elementos option que
representan los valores disponibles para otros controles.
<fieldset> El elemento fieldset (grupo de campos) permite organizar en
grupos los campos
de un formulario.
<form> El elemento HTML form (<form>) representa una sección de
un documento que
contiene controles interactivos que permiten a un usuario
enviar información a un servidor web.
<input> El elemento HTML <input> se usa para crear controles
interactivos para formularios basados en la web con el fin de
recibir datos del usuario.Hay disponible una amplia variedad
de tipos de datos de entrada y widgets de control, que
dependen del dispositivo y el agente de usuario (user
agent).El elemento <input> es uno de los más potentes y
complejos en todo HTML debido
a la gran cantidad de combinaciones de tipos y atributos de
entrada.
<label> El Elemento HTML <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. Tal
control es llamado "el control etiquetado" del elemento label.
<legend> El elemento <legend> (leyenda) crea un título para un grupos
los campos
(fieldset) de un formulario.
<meter>
<optgroup>
<option> En un formulario Web , el elemento HTML <option> se usa
para representar un
item dentro de un select, un optgroup o un elemento HTML5
datalist .
<output>
<progress> La etiqueta HTML <progress> se utiliza para visualizar el
progreso de una tarea.
Aunque los detalles de como se muestran depende
directamente del navegador que utiliza el cliente, aunque
básicamente aparece una barra de progreso.
<select> El elemento select (<select>) de HTML representa un control
que muestra un menú de opciones. Las opciones contenidas
en el menú son representadas por elementos option, los
cuales pueden ser agrupados por elementos optgroup. La
opcion puede estar preseleccionada por el usuario.
<textarea> El elemento HTML <textarea> representa un control para la
edición mutilínea de
texto sin formato.
Biografia
Desconocido. (desconocido). etiquetas de grupacion. 2021, de
lenguajehtml Sitio web:
https://lenguajehtml.com/html/semantica/etiquetas-html-de-agrupacion/
IMACRESTE. (2018). HTML5: Elementos estructurales. 2021, de
imacreste Sitio web: https://imacreste.com/html5-elementos-
estructurales/
By Shenan. (2018). Semántica en HTML5, ¿Qué es y porqué te debe
importar?. 2021, de sss media Sitio web:
https://www.sss-media.com/desarrollo-web/que-es-la-semantica- en-
html-y-porque-te-debe-importar/
Fernanda Nuñes. (2021). HTML5, estructura básica y elementos
semánticos. 2021, de eniun Sitio web: https://www.eniun.com/html5-
estructura-basica-elementos- semanticos/
Desconocido. (desconocido). HTML5, estructura básica y elementos
semánticos. 2021, de eniun Sitio web: https://www.eniun.com/html5-
estructura-basica-elementos- semanticos/
desconocido. (desconocido). CAPÍTULO 1 ¿QUÉ ES HTML5?. 2021, de
arkaitzgarro Sitio web: https://www.arkaitzgarro.com/html5/capitulo-
1.html
