Nota: puede descargar una versión PDF / ePub / Mobi de este libro para poder leerlo sin conexión.
Introducción
¡Bienvenidos! Escribí este libro para ayudarlo a aprender HTML rápidamente y familiarizarse con los temas avanzados de HTML.
HTML, una abreviatura de Hyper Text Markup Language, es uno de los bloques de construcción más fundamentales de la Web.
HTML nació oficialmente en 1993 y desde entonces evolucionó a su estado actual, pasando de documentos de texto simples a aplicaciones web enriquecidas.
Este manual está dirigido a una amplia audiencia.
Primero, el principiante. Explico HTML desde cero de una manera sucinta pero completa, por lo que puede usar este libro para aprender HTML desde lo básico.
Luego, el profesional. HTML a menudo se considera algo secundario para aprender. Podría darse por sentado.
Sin embargo, muchas cosas son oscuras para muchas personas. Yo incluido. Escribí este manual para ayudarme a comprender el tema, porque cuando necesito explicar algo, es mejor que primero me asegure de conocer el tema de adentro hacia afuera.
Incluso si no escribe HTML en su trabajo diario, saber cómo funciona HTML puede ayudarlo a evitar algunos dolores de cabeza cuando necesite comprenderlo de vez en cuando, por ejemplo, al modificar una página web.
Puede comunicarse conmigo en Twitter @flaviocopes.
Mi sitio web es flaviocopes.com.
Índice de libros
- Prefacio
- Conceptos básicos de HTML
- El encabezado del documento
- El cuerpo del documento
- Etiquetas que interactúan con el texto
- Enlaces
- Etiquetas de contenedor y estructura de página HTML
- Formularios
- Mesas
- Etiquetas multimedia: audio y video
- iframes
- Imagenes
- Accesibilidad
PREFACIO
HTML es la base de la maravilla llamada Web.
Hay un poder increíble detrás de este conjunto de reglas bastante simple y limitado, que nos permite, desarrolladores, creadores, diseñadores, escritores y técnicos, crear documentos, aplicaciones y experiencias para personas de todo el mundo.
Mi primer libro HTML salió en 1997 y se llamó "HTML Unleashed". Un tomo grande, de muchas páginas y largo.
Han pasado más de 20 años, y HTML sigue siendo la base de la Web, con cambios mínimos desde entonces.
Claro, tenemos más etiquetas semánticas, HTML de presentación ya no existe, y CSS se ha encargado del diseño de las cosas.
El éxito de HTML se basa en una cosa: simplicidad .
Se resistió a ser secuestrado en un dialecto XML a través de XHTML, cuando finalmente la gente se dio cuenta de que eso era demasiado, demasiado complejo.
Lo hizo por otra característica que nos brinda: el perdón . Hay algunas reglas, cierto, pero después de aprenderlas, tienes mucha libertad.
Los navegadores aprendieron a ser resistentes y a intentar siempre hacer todo lo posible al analizar y presentar HTML a los usuarios.
Y toda la plataforma web hizo una cosa bien: nunca rompió la compatibilidad con versiones anteriores. Increíblemente, podemos volver a los documentos HTML escritos en 1991, y se ven más o menos como se veían entonces.
Incluso sabemos cuál fue la primera página web. Es esto: //info.cern.ch/hypertext/WWW/TheProject.html
Y puede ver la fuente de la página, gracias a otra gran característica de la Web y HTML: podemos inspeccionar el HTML de cualquier página web .
No dé esto por sentado. No conozco ninguna otra plataforma que nos brinde esta capacidad.
Las excepcionales herramientas de desarrollo integradas en cualquier navegador nos permiten inspeccionar e inspirarnos en HTML escrito por cualquier persona en el mundo.
Si es nuevo en HTML, este libro tiene como objetivo ayudarlo a comenzar. Si es un desarrollador web experimentado, este libro mejorará sus conocimientos.
Aprendí mucho mientras lo escribía, a pesar de que he trabajado con la Web durante más de 20 años, y estoy seguro de que también encontrará algo nuevo.
O volverás a aprender algo antiguo que olvidaste.
En cualquier caso, el objetivo del libro es serle útil y espero que tenga éxito.
Conceptos básicos de HTML
HTML es un estándar definido por WHATWG , un acrónimo de Web Hypertext Application Technology Working Group, una organización formada por personas que trabajan en el navegador web más popular. Esto significa que está básicamente controlado por Google, Mozilla, Apple y Microsoft.
En el pasado, el W3C (World Wide Web Consortium) era la organización encargada de crear el estándar HTML.
El control pasó informalmente de W3C a WHATWG cuando quedó claro que el impulso del W3C hacia XHTML no era una buena idea.
Si nunca ha oído hablar de XHTML, aquí tiene una breve historia. A principios de la década de 2000, todos creíamos que el futuro de la Web era XML (en serio). Entonces HTML pasó de ser un lenguaje de creación basado en SGML a un lenguaje de marcado XML.
Fue un gran cambio. Teníamos que conocer y respetar más reglas. Reglas más estrictas.
Con el tiempo, los proveedores de navegadores se dieron cuenta de que este no era el camino correcto para la Web y lo rechazaron, creando lo que ahora se conoce como HTML5.
El W3C no estuvo realmente de acuerdo en ceder el control de HTML, y durante años tuvimos 2 estándares en competencia, cada uno con el objetivo de ser el oficial. Finalmente, el 28 de mayo de 2019, el W3C hizo oficial que la versión HTML "verdadera" era la publicada por WHATWG.
Mencioné HTML5. Déjame explicarte esta pequeña historia. Lo sé, es un poco confuso hasta ahora, como ocurre con muchas cosas en la vida cuando hay muchos actores involucrados, pero también es fascinante.
Teníamos la versión 1 de HTML en 1993. Aquí está el RFC original.
HTML 2 siguió en 1995.
Obtuvimos HTML 3 en enero de 1997 y HTML 4 en diciembre de 1997.
Tiempos ocupados!
Pasaron más de 20 años, teníamos todo esto de XHTML, y finalmente llegamos a esta "cosa" de HTML5, que en realidad ya no es solo HTML .
HTML5 es un término que ahora define un conjunto completo de tecnologías, que incluye HTML pero agrega muchas API y estándares como WebGL, SVG y más.
La clave para entender aquí es la siguiente: ahora no existe (ya no) una versión HTML. Es un estándar de vida. Como CSS, que se llama "3", pero en realidad es un montón de módulos independientes desarrollados por separado. Como JavaScript, donde tenemos una nueva edición cada año, pero hoy en día, lo único que importa es qué características individuales implementa el motor.
Sí, lo llamamos HTML5, pero HTML4 es de 1997. Eso es mucho tiempo para cualquier cosa, y mucho menos para la web.
Aquí es donde ahora "vive" el estándar: //html.spec.whatwg.org/multipage.
HTML es el lenguaje de marcado que usamos para estructurar el contenido que consumimos en la Web.
El HTML se sirve al navegador de diferentes formas.
- Puede ser generado por una aplicación del lado del servidor que lo construye según la solicitud o los datos de la sesión, por ejemplo, una aplicación Rails o Laravel o Django.
- Puede ser generado por una aplicación del lado del cliente de JavaScript que genera HTML sobre la marcha.
- En el caso más simple, puede almacenarse en un archivo y ser servido al navegador por un servidor web.
Profundicemos en este último caso. Aunque en la práctica es probablemente la forma menos popular de generar HTML, sigue siendo esencial conocer los bloques de construcción básicos.
Por convención, un archivo HTML se guarda con una extensión .htmlo .htm.
Dentro de este archivo, organizamos el contenido mediante etiquetas .
Las etiquetas envuelven el contenido y cada etiqueta le da un significado especial al texto que envuelve.
Hagamos algunos ejemplos.
Este fragmento de HTML crea un párrafo con la petiqueta:
A paragraph of text
Este fragmento de HTML crea una lista de elementos usando la uletiqueta, que significa lista desordenada , y las lietiquetas, lo que significa elemento de lista :
- First item
- Second item
- Third item
Cuando el navegador sirve una página HTML, las etiquetas se interpretan y el navegador representa los elementos de acuerdo con las reglas que definen su apariencia visual.
Algunas de esas reglas están integradas, como cómo se representa una lista o cómo se subraya un enlace en azul.
Algunas otras reglas las establece usted con CSS.
HTML no es una presentación. No se preocupa por cómo se ven las cosas . En cambio, se preocupa por lo que significan las cosas .
Depende del navegador determinar cómo se ven las cosas, con las directivas definidas por quién crea la página, con el lenguaje CSS.
Ahora, esos dos ejemplos que hice son fragmentos de HTML tomados fuera del contexto de una página.
Estructura de la página HTML
Hagamos un ejemplo de una página HTML adecuada.
Las cosas comienzan con la Declaración de tipo de documento (también conocida como doctype ), una forma de decirle al navegador que se trata de una página HTML y qué versión de HTML estamos usando.
El HTML moderno usa este tipo de documento:
Luego tenemos el htmlelemento, que tiene una etiqueta de apertura y cierre:
... La mayoría de las etiquetas vienen en pares con una etiqueta de apertura y una etiqueta de cierre. La etiqueta de cierre se escribe igual que la etiqueta de apertura, pero con un /:
some content Hay algunas etiquetas de cierre automático, lo que significa que no necesitan una etiqueta de cierre separada ya que no contienen nada en ellas .
La htmletiqueta de inicio se utiliza al principio del documento, justo después de la declaración del tipo de documento.
La htmletiqueta final es lo último que está presente en un documento HTML.
Dentro del htmlelemento tenemos 2 elementos: heady body:
... ... En su interior headtendremos etiquetas que son imprescindibles para crear una página web, como el título, los metadatos y CSS y JavaScript internos o externos. En su mayoría, cosas que no aparecen directamente en la página, pero que solo ayudan al navegador (o bots como el bot de búsqueda de Google) a mostrarlo correctamente.
En su interior bodytendremos el contenido de la página. Las cosas visibles .
Etiquetas vs elementos
Mencioné etiquetas y elementos. ¿Cual es la diferencia?
Los elementos tienen una etiqueta de inicio y una etiqueta de cierre. En este ejemplo, usamos las petiquetas de inicio y cierre para crear un pelemento:
A paragraph of text
Entonces, un elemento constituye el paquete completo :
- etiqueta de inicio
- contenido de texto (y posiblemente otros elementos)
- etiqueta de cierre
Si un elemento no tiene una etiqueta de cierre, solo se escribe con la etiqueta de inicio y no puede contener ningún contenido de texto.
Dicho esto, podría usar la etiqueta o el término del elemento en el libro que signifique lo mismo, excepto si menciono explícitamente la etiqueta inicial o la etiqueta final.
Atributos
La etiqueta inicial de un elemento puede tener fragmentos especiales de información que podemos adjuntar, llamados atributos .
Los atributos tienen la key="value"sintaxis:
A paragraph of text
También puede usar comillas simples, pero usar comillas dobles en HTML es una buena convención.
Podemos tener muchos de ellos:
A paragraph of text
y algunos atributos son booleanos, lo que significa que solo necesita la clave:
Los atributos classy idson dos de los más comunes que encontrará utilizados.
Tienen un significado especial y son útiles tanto en CSS como en JavaScript.
La diferencia entre los dos es que un ides único en el contexto de una página web; no se puede duplicar.
Las clases, por otro lado, pueden aparecer varias veces en varios elementos.
Además, an ides solo un valor. classpuede contener varios valores, separados por un espacio:
A paragraph of text
Es común usar el guión -para separar palabras en un valor de clase, pero es solo una convención.
Esos son solo dos de los posibles atributos que puede tener. Algunos atributos solo se utilizan para una etiqueta. Son altamente especializados.
Se pueden utilizar otros atributos de forma más general. Acaba de ver idy class, pero también tenemos otros, como los styleque se pueden usar para insertar reglas CSS en línea en un elemento.
No distingue entre mayúsculas y minúsculas
HTML no distingue entre mayúsculas y minúsculas. Las etiquetas se pueden escribir en mayúsculas o en minúsculas. En los primeros días, las gorras eran la norma. Hoy la minúscula es la norma. Es una convención.
Sueles escribir así:
A paragraph of text
así no:
A paragraph of text
Espacio en blanco
Bastante importante. En HTML, incluso si agrega varios espacios en blanco en una línea, el motor CSS del navegador la contrae.
Por ejemplo, la interpretación de este párrafo:
A paragraph of text
es lo mismo que esto:
A paragraph of text
y lo mismo que esto:
A paragraph of text
> Con la propiedad CSS de espacio en blanco puede cambiar el comportamiento de las cosas. Puede encontrar más información sobre cómo CSS procesa los espacios en blanco en las especificaciones de CSS.
Normalmente favorezco
A paragraph of text
o
A paragraph of text
Las etiquetas anidadas deben tener una sangría de 2 o 4 caracteres, según su preferencia:
A paragraph of text
- A list item
Nota: esta característica de "espacio en blanco no es relevante" significa que si desea agregar espacio adicional, puede enojarlo bastante. Le sugiero que use CSS para hacer más espacio cuando sea necesario.
Nota: en casos especiales, puede usar la entidad HTML (un acrónimo que significa espacio sin interrupciones ); más sobre las entidades HTML más adelante. Creo que no se debe abusar de esto. Siempre se prefiere CSS para alterar la presentación visual.
EL ENCABEZADO DEL DOCUMENTO
La headetiqueta contiene etiquetas especiales que definen las propiedades del documento.
Siempre está escrito antes de la bodyetiqueta, justo después de la htmletiqueta de apertura :
... ... Nunca usamos atributos en esta etiqueta. Y no escribimos contenido en él.
Es solo un contenedor para otras etiquetas. En su interior podemos tener una amplia variedad de etiquetas, dependiendo de lo que necesites hacer:
titlescriptnoscriptlinkstylebasemeta
La titleetiqueta
La titleetiqueta determina el título de la página. El título se muestra en el navegador y es especialmente importante ya que es uno de los factores clave para la optimización de motores de búsqueda (SEO).
La scriptetiqueta
Esta etiqueta se utiliza para agregar JavaScript a la página.
Puede incluirlo en línea, usando una etiqueta de apertura, el código JavaScript y luego la etiqueta de cierre:
..some JS O puede cargar un archivo JavaScript externo usando el srcatributo:
El typeatributo por defecto está establecido en text/javascript, por lo que es completamente opcional.
Hay algo muy importante que saber sobre esta etiqueta.
A veces, esta etiqueta se utiliza en la parte inferior de la página, justo antes de la etiqueta de cierre . ¿Por qué? Por motivos de rendimiento.
La carga de scripts bloquea de forma predeterminada la representación de la página hasta que se analiza y carga el script.
Al colocarlo en la parte inferior de la página, el script se carga y ejecuta después de que toda la página ya se haya analizado y cargado, lo que brinda una mejor experiencia al usuario que mantenerlo en la headetiqueta.
Mi opinión es que ahora esto es una mala práctica. Deja scriptvivir en la headetiqueta.
En JavaScript moderno, tenemos una alternativa que es más eficaz que mantener el script en la parte inferior de la página: el deferatributo. Este es un ejemplo que carga un file.jsarchivo, relativo a la URL actual:
Este es el escenario que activa la ruta más rápida a una página de carga rápida y JavaScript de carga rápida.
Nota: el asyncatributo es similar, pero en mi opinión una opción peor que defer. Describo por qué, con más detalle, en la página //flaviocopes.com/javascript-async-defer/
La noscriptetiqueta
Esta etiqueta se utiliza para detectar cuándo los scripts están deshabilitados en el navegador.
Nota: los usuarios pueden optar por deshabilitar los scripts de JavaScript en la configuración del navegador. O es posible que el navegador no los admita de forma predeterminada.
Se usa de manera diferente dependiendo de si se coloca en el encabezado del documento o en el cuerpo del documento.
Ahora estamos hablando del encabezado del documento, así que primero introduzcamos este uso.
En este caso, la noscriptetiqueta solo puede contener otras etiquetas:
linketiquetasstyleetiquetasmetaetiquetas
para alterar los recursos servidos por la página, o la metainformación, si los scripts están deshabilitados.
En este ejemplo, configuré un elemento con la no-script-alertclase para mostrar si los scripts están deshabilitados, como estaba display: nonepor defecto:
... .no-script-alert { display: block; } ... ... Resolvamos el otro caso: si se coloca en el cuerpo, puede contener contenido, como párrafos y otras etiquetas, que se representan en la interfaz de usuario.
La linketiqueta
La linketiqueta se utiliza para establecer relaciones entre un documento y otros recursos.
Se utiliza principalmente para vincular un archivo CSS externo a cargar.
Este elemento no tiene etiqueta de cierre.
Uso:
... ... ... El mediaatributo permite la carga de diferentes hojas de estilo según las capacidades del dispositivo:
También podemos vincularnos a otros recursos que no sean hojas de estilo.
Por ejemplo, podemos asociar un feed RSS usando
O podemos asociar un favicon usando:
Esta etiqueta se utiliza también para el contenido de varias páginas, para indicar la página anterior y siguiente usando rel="prev"y rel="next". Principalmente para Google. A partir de 2019, Google anunció que ya no usa esta etiqueta porque puede encontrar la estructura de página correcta sin ella.
La styleetiqueta
Esta etiqueta se puede usar para agregar estilos al documento, en lugar de cargar una hoja de estilo externa.
Uso:
.some-css {} Al igual que con la linketiqueta, puede usar el mediaatributo para usar ese CSS solo en el medio especificado:
.some-css {} La baseetiqueta
Esta etiqueta se utiliza para establecer una URL base para todas las URL relativas contenidas en la página.
... ... ... La metaetiqueta
Las metaetiquetas realizan una variedad de tareas y son muy, muy importantes.
Especialmente para SEO.
meta los elementos solo tienen la etiqueta de inicio.
La más básica es la descriptionmetaetiqueta:
Esto podría ser utilizado por Google para generar la descripción de página en sus páginas de resultados, si encuentra que describe mejor la página que el contenido de páginas (no me pregunten cómo).
La charsetmetaetiqueta se utiliza para establecer la codificación de caracteres de la página. utf-8en la mayoría de los casos:
La robotsmetaetiqueta indica a los robots del motor de búsqueda si deben indexar una página o no:
O si deben seguir enlaces o no:
También puede establecer nofollow en enlaces individuales. Así es como puede configurar nofollowglobalmente.
Puedes combinarlos:
El comportamiento predeterminado es index, follow.
Se pueden usar otras propiedades, incluyendo nosnippet, noarchive, noimageindexy más.
También puede decirle a Google en lugar de apuntar a todos los motores de búsqueda:
Y otros motores de búsqueda también pueden tener su propia metaetiqueta.
Hablando de eso, podemos decirle a Google que desactive algunas funciones. Esto evita la función de traducción en los resultados del motor de búsqueda:
La viewportmetaetiqueta se utiliza para decirle al navegador que establezca el ancho de la página en función del ancho del dispositivo.
Ver más sobre esta etiqueta.
Otra metaetiqueta bastante popular es la http-equiv="refresh". Esta línea le dice al navegador que espere 3 segundos, luego redirija a esa otra página:
El uso de 0 en lugar de 3 redirigirá lo antes posible.
Esta no es una referencia completa; Existen otras metaetiquetas menos utilizadas.
Después de esta introducción del título del documento, podemos comenzar a sumergirnos en el cuerpo del documento.
EL CUERPO DEL DOCUMENTO
Después de la etiqueta head de cierre, solo podemos tener una cosa en un documento HTML: el bodyelemento.
... ... Al igual que las etiquetas heady html, solo podemos tener una bodyetiqueta en una página.
Dentro de la bodyetiqueta tenemos todas las etiquetas que definen el contenido de la página.
Técnicamente, las etiquetas de inicio y finalización son opcionales. Pero considero una buena práctica agregarlos. Solo por claridad.
En los siguientes capítulos, definiremos la variedad de etiquetas que puede usar dentro del cuerpo de la página.
Pero antes, debemos introducir una diferencia entre elementos de bloque y elementos en línea.
Elementos de bloque vs elementos en línea
Los elementos visuales, los definidos en el cuerpo de la página, se pueden clasificar generalmente en 2 categorías:
- elementos de bloque (
p,div, elementos, las listas y los elementos de la lista dirección, ...) - elementos en línea (
a,span,img, ...)
¿Cuál es la diferencia?
Los elementos de bloque, cuando se colocan en la página, no permiten otros elementos junto a ellos. Hacia la izquierda o hacia la derecha.
En cambio, los elementos en línea pueden colocarse junto a otros elementos en línea.
La diferencia también radica en las propiedades visuales que podemos editar usando CSS. Podemos alterar el ancho / alto, el margen, el relleno y el borde de los elementos del bloque. No podemos hacer eso para los elementos en línea.
Tenga en cuenta que usando CSS podemos cambiar el valor predeterminado para cada elemento, estableciendo una petiqueta para que esté en línea, por ejemplo, o spanpara que sea un elemento de bloque.
Otra diferencia es que los elementos en línea pueden estar contenidos en elementos de bloque. Lo opuesto no es verdad.
Algunos elementos de bloque pueden contener otros elementos de bloque, pero depende. La petiqueta, por ejemplo, no permite tal opción.
ETIQUETAS QUE INTERACTUAN CON EL TEXTO
La petiqueta
Esta etiqueta define un párrafo de texto.
Some text
Es un elemento de bloque.
Dentro de él, podemos agregar cualquier elemento en línea que nos guste, como spano a.
No podemos agregar elementos de bloque.
No podemos anidar un pelemento en otro.
De forma predeterminada, los navegadores diseñan un párrafo con un margen en la parte superior e inferior. 16pxen Chrome, pero el valor exacto puede variar entre navegadores.
Esto hace que dos párrafos consecutivos estén espaciados, replicando lo que pensamos de un "párrafo" en el texto impreso.
La spanetiqueta
Esta es una etiqueta en línea que se puede usar para crear una sección en un párrafo que se puede segmentar usando CSS:
A part of the text and here another part
La bretiqueta
Esta etiqueta representa un salto de línea. Es un elemento en línea y no necesita una etiqueta de cierre.
Lo usamos para crear una nueva línea dentro de una petiqueta, sin crear un nuevo párrafo.
Y en comparación con la creación de un nuevo párrafo, no agrega espacio adicional.
Some text
A new line
Las etiquetas de encabezado
HTML nos proporciona 6 etiquetas de encabezado. De más importante al menos importante, tenemos h1, h2, h3, h4, h5, h6.
Normalmente, una página tendrá un h1elemento, que es el título de la página. Entonces es posible que tenga uno o más h2elementos según el contenido de la página.
Los encabezados, especialmente la organización del encabezado, también son esenciales para el SEO, y los motores de búsqueda los utilizan de diversas formas.
El navegador de forma predeterminada hará que la h1etiqueta sea más grande y hará que el tamaño de los elementos sea más pequeño a medida que haumenta el número cercano :
Todos los títulos son elementos de bloque. No pueden contener otros elementos, solo texto.
La strongetiqueta
Esta etiqueta se usa para marcar el texto dentro de ella como fuerte . Esto es muy importante, no es una pista visual, sino una pista semántica. Dependiendo del medio utilizado, su interpretación variará.
Por defecto, los navegadores ponen el texto en negrita en esta etiqueta .
La emetiqueta
Esta etiqueta se usa para marcar el texto dentro de ella como enfatizado . Al igual que con strong, no es una pista visual sino una pista semántica.
Los navegadores de forma predeterminada ponen el texto en cursiva .
Citas
La blockquoteetiqueta HTML es útil para insertar citas en el texto.
Los navegadores de forma predeterminada aplican un margen al blockquoteelemento. Chrome aplica un margen izquierdo y derecho de 40 px y un margen superior e inferior de 10 px.
La qetiqueta HTML se utiliza para cotizaciones en línea.
Linea horizontal
No se basa realmente en texto, pero la hretiqueta se usa a menudo dentro de una página. Significa horizontal rule, y agrega una línea horizontal en la página.
Útil para separar secciones en la página.
Bloques de código
La codeetiqueta es especialmente útil para mostrar código, porque los navegadores le dan una fuente monoespaciada.
Por lo general, eso es lo único que hacen los navegadores. Este es el CSS aplicado por Chrome:
code { font-family: monospace; } Esta etiqueta generalmente está envuelta en una preetiqueta, porque el codeelemento ignora los espacios en blanco y los saltos de línea. Como la petiqueta.
Chrome da preeste estilo predeterminado:
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } que evita el colapso de los espacios en blanco y lo convierte en un elemento de bloque.
Liza
Tenemos 3 tipos de listas:
- listas desordenadas
- listas ordenadas
- listas de definiciones
Las listas desordenadas se crean usando la uletiqueta. Cada elemento de la lista se crea con la lietiqueta:
- First
- Second
Las listas ordenadas son similares, recién hechas con la oletiqueta:
- First
- Second
La diferencia entre los dos es que las listas ordenadas tienen un número antes de cada elemento:
Las listas de definiciones son un poco diferentes. Tienes un término y su definición:
-
Flavio
-
The name
-
Copes
-
The surname
Así es como los navegadores suelen representarlos:
Debo decir que rara vez los ves en la naturaleza, seguro que no tanto como uly ol, pero a veces pueden ser útiles.
Otras etiquetas de texto
Hay una serie de etiquetas con fines de presentación:
- la
marketiqueta - la
insetiqueta - la
deletiqueta - la
supetiqueta - la
subetiqueta - la
smalletiqueta - la
ietiqueta - la
betiqueta
Este es un ejemplo de la representación visual de ellos que se aplica de forma predeterminada por los navegadores:
Quizás se pregunte, ¿en qué se bdiferencia de strong? ¿Y en qué ise diferencia de em?
La diferencia radica en el significado semántico. Mientras que by ison una pista directa para que el navegador haga un fragmento de texto en negrita o cursiva, strongy le emdé al texto un significado especial, y depende del navegador darle estilo. Que resulta ser exactamente lo mismo que by i, por defecto. Aunque puedes cambiar eso usando CSS.
Hay una serie de otras etiquetas menos utilizadas relacionadas con el texto. Solo mencioné los que veo que se usan más.
ENLACES
Los enlaces se definen mediante la aetiqueta. El destino del enlace se establece mediante su hrefatributo.
Ejemplo:
click here Entre la etiqueta de inicio y cierre tenemos el texto del enlace.
El ejemplo anterior es una URL absoluta. Los enlaces también funcionan con URL relativas:
click here En este caso, al hacer clic en el enlace, el usuario se mueve a la /testURL en el origen actual.
Cuidado con el /personaje. Si se omite, en lugar de comenzar desde el origen, el navegador simplemente agregará la testcadena a la URL actual.
Por ejemplo, estoy en la página //flaviocopes.com/axios/y tengo estos enlaces:
/testuna vez hecho clic me lleva a//flaviocopes.com/testtestuna vez hecho clic me lleva a//flaviocopes.com/axios/test
Las etiquetas de enlace pueden incluir otras cosas dentro de ellas, no solo texto. Por ejemplo, imágenes:
o cualquier otro elemento, excepto otras etiquetas.
Si desea abrir el enlace en una nueva pestaña, puede utilizar el targetatributo:
open in new tab ETIQUETAS DEL CONTENEDOR Y ESTRUCTURA DE LA PÁGINA HTML
Etiquetas de contenedor
HTML proporciona un conjunto de etiquetas de contenedor. Esas etiquetas pueden contener un conjunto no especificado de otras etiquetas.
Tenemos:
articlesectiondiv
y puede resultar confuso comprender la diferencia entre ellos.
Veamos cuándo usar cada uno de ellos.
article
La etiqueta artículo identifica una cosa que puede ser independiente de otras cosas en una página.
Por ejemplo, una lista de publicaciones de blog en la página de inicio.
O una lista de enlaces.
A blog post
Read more Another blog post
Read more No estamos limitados a listas: un artículo puede ser el elemento principal de una página.
A blog post
Here is the content...
Dentro de una articleetiqueta deberíamos tener un título ( h1- h6) y
section
Representa una sección de un documento. Cada sección tiene una etiqueta de título ( h1- h6), luego el cuerpo de la sección .
Ejemplo:
A section of the page
...
![]()
Es útil dividir un artículo extenso en diferentes secciones .
No se debe utilizar como elemento contenedor genérico. divestá hecho para esto.
div
div es el elemento contenedor genérico:
... A menudo, agrega un atributo classo ida este elemento para permitirle diseñar con CSS.
Usamos diven cualquier lugar donde necesitemos un contenedor pero las etiquetas existentes no son adecuadas.
Etiquetas relacionadas con la página
nav
Esta etiqueta se utiliza para crear el marcado que define la navegación de la página. A esto normalmente agregamos una lista ulo ol:
- Home
- Blog
aside
La asideetiqueta se utiliza para agregar un fragmento de contenido relacionado con el contenido principal.
Un cuadro donde agregar un presupuesto, por ejemplo. O una barra lateral.
Ejemplo:
some text..
A quote..
other text...
El uso asidees una señal de que las cosas que contiene no forman parte del flujo regular de la sección en la que vive.
header
La headeretiqueta representa una parte de la página que es la introducción. Por ejemplo, puede contener una o más etiquetas de encabezado ( h1- h6), el eslogan del artículo, una imagen.
Article title
... main
La mainetiqueta representa la parte principal de una página:
.... ....
footer
La footeretiqueta se utiliza para determinar el pie de página de un artículo o el pie de página de la página:
.... Footer notes..
FORMAS
Los formularios son la forma en que puede interactuar con una página o una aplicación, construida con tecnologías web.
Tiene un conjunto de controles y cuando envía el formulario, ya sea con un clic en el botón "enviar" o mediante programación, el navegador enviará los datos al servidor.
Por defecto, este envío de datos hace que la página se recargue después de que se envían los datos, pero usando JavaScript puede alterar este comportamiento (no explicaremos cómo en este libro).
Se crea un formulario usando la formetiqueta:
... Por defecto, los formularios se envían mediante el método GET HTTP. Lo cual tiene sus inconvenientes y, por lo general, desea utilizar POST.
Puede configurar el formulario para usar POST cuando se envía mediante el methodatributo:
... El formulario se envía, ya sea mediante GET o POST, a la misma URL donde reside.
Entonces, si el formulario está en la //flaviocopes.com/contactspágina, presionar el botón "enviar" hará una solicitud a esa misma URL.
Lo que puede resultar en que no ocurra nada.
Necesita algo del lado del servidor para manejar la solicitud, y normalmente "escucha" esos eventos de envío de formularios en una URL dedicada.
Puede especificar la URL a través del actionparámetro:
... Esto hará que el navegador envíe los datos del formulario mediante POST a la /new-contactURL en el mismo origen.
Si el origen (protocolo + dominio + puerto) es //flaviocopes.com(el puerto 80 es el predeterminado), esto significa que se enviarán los datos del formulario //flaviocopes.com/new-contact.
Hablé de datos. ¿Qué datos?
Los datos son proporcionados por los usuarios a través del conjunto de controles que están disponibles en la plataforma web:
- cuadros de entrada (texto de una sola línea)
- áreas de texto (texto de varias líneas)
- seleccionar cuadros (elija una opción de un menú desplegable)
- botones de radio (elija una opción de una lista siempre visible)
- casillas de verificación (elija cero, una o más opciones)
- cargas de archivos
- ¡y más!
Presentemos cada uno de ellos en la siguiente descripción general de los campos del formulario.
La inputetiqueta
El inputcampo es uno de los elementos de formulario más utilizados. También es un elemento muy versátil y puede cambiar completamente el comportamiento según el typeatributo.
El comportamiento predeterminado es ser un control de entrada de texto de una sola línea:
Equivalente a usar:
Al igual que con todos los demás campos que siguen, debe asignar un nombre al campo para que su contenido se envíe al servidor cuando se envíe el formulario:
El placeholderatributo se usa para que aparezca algún texto, en gris claro, cuando el campo está vacío. Útil para agregar una pista al usuario sobre lo que debe escribir:
El uso type="email"validará en el lado del cliente (en el navegador) un correo electrónico para verificar su corrección (corrección semántica, sin garantizar que la dirección de correo electrónico exista) antes de enviarlo.
Contraseña
El uso type="password"hará que cada clave ingresada aparezca como un asterisco (*) o un punto, útil para los campos que albergan una contraseña.
Números
Puede hacer que un elemento de entrada acepte solo números:
Puede especificar un valor mínimo y máximo aceptado:
El stepatributo ayuda a identificar los pasos entre diferentes valores. Por ejemplo, esto acepta un valor entre 10 y 50, en pasos de 5:
Campo escondido
Los campos se pueden ocultar al usuario. Todavía se enviarán al servidor al enviar el formulario:
Esto se usa comúnmente para almacenar valores como un token CSRF, usado para seguridad e identificación de usuarios, o incluso para detectar robots que envían spam, utilizando técnicas especiales.
También puede usarse para identificar una forma y su acción.
Establecer un valor predeterminado
Todos esos campos aceptan un valor predefinido. Si el usuario no lo cambia, este será el valor enviado al servidor:
Si establece un marcador de posición, ese valor aparecerá si el usuario borra el valor del campo de entrada:
Enviar formulario
El type="submit"campo es un botón que, una vez presionado por el usuario, envía el formulario:
El valueatributo establece el texto en el botón, que si falta muestra el texto "Enviar":
Validación de formularios
Los navegadores proporcionan la funcionalidad de validación del lado del cliente a los formularios.
Puede configurar los campos según sea necesario, asegurándose de que estén completos y aplicar un formato específico para la entrada de cada campo.
Veamos ambas opciones.
Establecer campos según sea necesario
El requiredatributo le ayuda con la validación. Si el campo no está configurado, la validación del lado del cliente falla y el navegador no envía el formulario:
Aplicar un formato específico
Describí el type="email"campo de arriba. Valida automáticamente la dirección de correo electrónico de acuerdo con un formato establecido en la especificación.
En el type="number"campo, mencioné el atributo miny maxpara limitar los valores ingresados a un intervalo.
Puedes hacer más.
Puede aplicar un formato específico en cualquier campo.
El patternatributo le da la capacidad de establecer una expresión regular para validar el valor.
Recomiendo leer mi Guía de expresiones regulares en flaviocopes.com/javascript-regular-expressions/.
patrón = "//.*"
Otros campos
Cargas de archivos
Puede cargar archivos desde su computadora local y enviarlos al servidor usando un type="file"elemento de entrada:
Puede adjuntar varios archivos:
Puede especificar uno o más tipos de archivos permitidos mediante el acceptatributo. Esto acepta imágenes:
Puede usar un tipo MIME específico, como application/jsono establecer una extensión de archivo como .pdf. O configure varias extensiones de archivo, como esta:
Botones
Los type="button"campos de entrada se pueden usar para agregar botones adicionales al formulario, que no son botones de envío:
Se utilizan para hacer algo mediante programación, utilizando JavaScript.
Hay un campo especial representado como un botón, cuya acción especial es borrar todo el formulario y devolver el estado de los campos al inicial:
Botones de radio
Los botones de opción se utilizan para crear un conjunto de opciones, de las cuales se presiona una y todas las demás se desactivan.
El nombre proviene de radios de automóviles antiguos que tenían este tipo de interfaz.
Define un conjunto de type="radio"entradas, todas con el mismo nameatributo y valueatributo diferente :
Una vez enviado el formulario, la colorpropiedad de datos tendrá un valor único.
Siempre hay un elemento marcado. El primer elemento es el que está marcado por defecto.
Puede establecer el valor preseleccionado mediante el checkedatributo. Puede usarlo solo una vez por grupo de entradas de radio.
Casillas de verificación
Similar a las cajas de radio, pero permiten elegir múltiples valores, o ninguno en absoluto.
Define un conjunto de type="checkbox"entradas, todas con el mismo nameatributo y valueatributo diferente :
Todas esas casillas de verificación estarán desmarcadas de forma predeterminada. Utilice el checkedatributo para habilitarlos al cargar la página.
Dado que este campo de entrada permite múltiples valores, al enviar el formulario, los valores se enviarán al servidor como una matriz.
Fecha y hora
Tenemos algunos tipos de entrada para aceptar valores de fecha.
El type="date"campo de entrada permite al usuario ingresar una fecha y muestra un selector de fecha si es necesario:
El type="time"campo de entrada permite al usuario ingresar una hora y muestra un selector de hora si es necesario:
El type="month"campo de entrada permite al usuario ingresar un mes y un año:
El type="week"campo de entrada permite al usuario ingresar una semana y un año:
Todos esos campos permiten limitar el rango y el paso entre cada valor. Recomiendo consultar MDN para conocer los pequeños detalles sobre su uso.
El type="datetime-local"campo le permite elegir una fecha y una hora.
Aquí hay una página para probarlos todos: //codepen.io/flaviocopes/pen/ZdWQPm
Selector de color
Puede permitir que los usuarios elijan un color usando el type="color"elemento:
Establece un valor predeterminado mediante el valueatributo:
El navegador se encargará de mostrarle un selector de color al usuario.
Rango
Este elemento de entrada muestra un elemento deslizante. Las personas pueden usarlo para pasar de un valor inicial a un valor final:
Puede proporcionar un paso opcional:
Teléfono
El type="tel"campo de entrada se usa para ingresar un número de teléfono:
El principal punto de venta para usar telover textes en el móvil, donde el dispositivo puede elegir mostrar un teclado numérico.
Especifique un patternatributo para validación adicional:
URL
El type="url"campo se usa para ingresar una URL.
Puedes validarlo usando el patternatributo:
La textareaetiqueta
El textareaelemento permite a los usuarios ingresar texto de varias líneas. En comparación con input, requiere una etiqueta final:
Puede establecer las dimensiones usando CSS, pero también usando los atributos rowsy cols:
Al igual que con las otras etiquetas de formulario, el nameatributo determina el nombre en los datos enviados al servidor:
La selectetiqueta
Esta etiqueta se utiliza para crear un menú desplegable.
El usuario puede elegir una de las opciones disponibles.
Cada opción se crea usando la optionetiqueta. Agrega un nombre a la selección y un valor a cada opción:
Red Yellow Puede configurar una opción deshabilitada:
Red Yellow Puede tener una opción vacía:
None Red Yellow Las opciones se pueden agrupar mediante la optgroupetiqueta. Cada grupo de opciones tiene un labelatributo:
Red Yellow Blue Green Pink MESAS
En los primeros días de la web, las tablas eran una parte muy importante de los diseños de construcción.
Más tarde fueron reemplazados por CSS y sus capacidades de diseño, y hoy contamos con herramientas poderosas como CSS Flexbox y CSS Grid para crear diseños. Las tablas ahora se usan solo para, adivinen qué, ¡construir tablas!
La tableetiqueta
Usted define una tabla usando la tableetiqueta:
Dentro de la tabla definiremos los datos. Razonamos en términos de filas, lo que significa que agregamos filas a una tabla (no columnas). Definiremos columnas dentro de una fila.
Filas
Se agrega una fila usando la tretiqueta, y eso es lo único que podemos agregar a un tableelemento:
Esta es una tabla con 3 filas.
La primera fila puede tomar el papel del encabezado.
Encabezados de columna
El encabezado de la tabla contiene el nombre de una columna, normalmente en negrita.
Piense en un documento de Excel / Google Sheets. El A-B-C-D...encabezado superior .
Definimos el encabezado usando la thetiqueta:
Column 1
Column 2
Column 3
El contenido de la tabla
El contenido de la tabla se define mediante tdetiquetas, dentro de los otros trelementos:
Column 1
Column 2
Column 3
Row 1 Column 1
Row 1 Column 2
Row 1 Column 3
Row 2 Column 1
Row 2 Column 2
Row 2 Column 3
Así es como los navegadores lo renderizan, si no agrega ningún estilo CSS:
Añadiendo este CSS:
th, td { padding: 10px; border: 1px solid #333; } hace que la mesa se parezca más a una mesa adecuada:
Abarcar columnas y filas
Una fila puede decidir abarcar 2 o más columnas, usando el colspanatributo:
Column 1
Column 2
Column 3
Row 1 Columns 1-2
Row 1 Column 3
Row 2 Columns 1-3
O puede abarcar más de 2 o más filas, utilizando el rowspanatributo:
Column 1
Column 2
Column 3
Rows 1-2 Columns 1-2
Row 1 Column 3
Row 2 Column 3
Encabezados de fila
Antes expliqué cómo se pueden tener encabezados de columna, usando la thetiqueta dentro de la primera tretiqueta de la tabla.
Puede agregar una thetiqueta como el primer elemento dentro de un trque no es el primero trde la tabla, para tener encabezados de fila:
Column 2
Column 3
Row 1
Col 2
Col 3
Row 2
Col 2
Col 3
Más etiquetas para organizar la mesa
Puede agregar 3 etiquetas más en una tabla para tenerla más organizada.
Esto es mejor cuando se utilizan tablas grandes. Y también para definir correctamente un encabezado y un pie de página.
Esas etiquetas son
theadtbodytfoot
Envuelven las tretiquetas para definir claramente las diferentes secciones de la tabla. He aquí un ejemplo:
Column 2
Column 3
Row 1
Col 2
Col 3
Row 2
Col 2
Col 3
Footer of Col 1
Footer of Col 2
Título de la tabla
Una tabla debe tener una captionetiqueta que describa su contenido. Esa etiqueta debe colocarse inmediatamente después de la tableetiqueta de apertura :
Dogs age
Dog
Age
Roger
7
ETIQUETAS MULTIMEDIA: AUDIOYVIDEO
En esta sección quiero mostrarles las etiquetas audioy video.
La audioetiqueta
Esta etiqueta le permite incrustar contenido de audio en sus páginas HTML.
Este elemento puede transmitir audio, tal vez usando un micrófono a través de getUserMedia(), o puede reproducir una fuente de audio a la que hace referencia usando el srcatributo:
De forma predeterminada, el navegador no muestra ningún control para este elemento. Lo que significa que el audio se reproducirá solo si está configurado en reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo o controlar el volumen o moverse por la pista.
Para mostrar los controles integrados, puede agregar el controlsatributo:
Los controles pueden tener una máscara personalizada.
Puede especificar el tipo MIME del archivo de audio mediante el typeatributo. Si no se configura, el navegador intentará determinarlo automáticamente:
Un archivo de audio por defecto no se reproduce automáticamente. Agregue el autoplayatributo para reproducir el audio automáticamente:
Nota: los navegadores móviles no permiten la reproducción automática
El loopatributo reinicia la reproducción de audio a las 0:00 si está configurado; de lo contrario, si no está presente, el audio se detiene al final del archivo:
También puede reproducir un archivo de audio silenciado usando el mutedatributo (no estoy realmente seguro de cuál es la utilidad de esto):
Con JavaScript, puede escuchar varios eventos que suceden en un audioelemento, los más básicos de los cuales son:
playcuando el archivo comienza a reproducirsepausecuando se pausó la reproducción de audioplayingcuando el audio se reanuda desde una pausaendedcuando se alcanzó el final del archivo de audio
La videoetiqueta
Esta etiqueta le permite incrustar contenido de video en sus páginas HTML.
Este elemento puede transmitir vídeo, usando una cámara web a través de getUserMedia()o WebRTC , o puede jugar una fuente de vídeo que se hace referencia mediante el srcatributo:
Por defecto, el navegador no muestra ningún control para este elemento, solo el video.
Lo que significa que el video se reproducirá solo si está configurado en reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, pausarlo, controlar el volumen o saltar a una posición específica en el video.
Para mostrar los controles integrados, puede agregar el controlsatributo:
Los controles pueden tener una máscara personalizada.
Puede especificar el tipo MIME del archivo de video usando el typeatributo. Si no se configura, el navegador intentará determinarlo automáticamente:
Un archivo de video por defecto no se reproduce automáticamente. Agregue el autoplayatributo para reproducir el video automáticamente:
Algunos navegadores también requieren que el mutedatributo se reproduzca automáticamente. El video se reproduce automáticamente solo si está silenciado:
El loopatributo reinicia la reproducción de video a las 0:00 si está configurado; de lo contrario, si no está presente, el video se detiene al final del archivo:
Puede configurar una imagen para que sea la imagen del póster:
Si no está presente, el navegador mostrará el primer fotograma del video tan pronto como esté disponible.
Puede configurar los atributos widthy heightpara establecer el espacio que ocupará el elemento para que el navegador pueda dar cuenta de él y no cambie el diseño cuando finalmente se cargue. Toma un valor numérico, expresado en píxeles.
Con JavaScript, puede escuchar varios eventos que suceden en un videoelemento, los más básicos de los cuales son:
playcuando el archivo comienza a reproducirsepausecuando el video estaba en pausaplayingcuando el video se reanuda desde una pausaendedcuando se alcanzó el final del archivo de video
IFRAMES
La iframeetiqueta nos permite incrustar contenido procedente de otros orígenes (otros sitios) en nuestra página web.
Técnicamente, un iframe crea un nuevo contexto de navegación anidado. Esto significa que nada en el iframe no interfiere con la página principal y viceversa. JavaScript y CSS no se "filtran" hacia / desde iframes.
Muchos sitios usan iframes para realizar varias cosas. Es posible que esté familiarizado con Codepen, Glitch u otros sitios que le permiten codificar en una parte de la página y verá el resultado en un cuadro. Eso es un iframe.
Creas uno de esta manera:
También puede cargar una URL absoluta:
Puede establecer un conjunto de parámetros de ancho y alto (o establecerlos usando CSS); de lo contrario, el iframe usará los valores predeterminados, un cuadro de 300x150 píxeles:
Srcdoc
El srcdocatributo le permite especificar algo de HTML en línea para mostrar. Es una alternativa src, pero reciente y no es compatible con Edge 18 y versiones anteriores, y en IE:
Salvadera
El sandboxatributo nos permite limitar las operaciones permitidas en los iframes.
Si lo omitimos, todo está permitido:
Si lo configuramos en "", no se permite nada:
Podemos seleccionar qué permitir agregando opciones en el sandboxatributo. Puede permitir varios agregando un espacio entre ellos. Aquí hay una lista incompleta de las opciones que puede usar:
allow-forms: permitir enviar formulariosallow-modalspermitir abrir ventanas modales, incluida la llamadaalert()en JavaScriptallow-orientation-lockpermitir bloquear la orientación de la pantallaallow-popupspermitir ventanas emergentes, usowindow.open()ytarget="_blank"enlacesallow-same-origintratar el recurso que se carga como el mismo origenallow-scriptspermite que el iframe cargado ejecute scripts (pero no cree ventanas emergentes).allow-top-navigationda acceso al iframe al contexto de navegación de nivel superior
Permitir
Actualmente experimental y solo compatible con navegadores basados en Chromium, este es el futuro del uso compartido de recursos entre la ventana principal y el iframe.
Es similar al sandboxatributo, pero nos permite permitir características específicas, que incluyen:
accelerometerda acceso a la interfaz del acelerómetro de la API de sensoresambient-light-sensorda acceso a la interfaz de Sensors API AmbientLightSensorautoplaypermite reproducir automáticamente archivos de video y audiocamerapermite acceder a la cámara desde la API getUserMediadisplay-capturepermite acceder al contenido de la pantalla utilizando la API getDisplayMediafullscreenpermite acceder al modo de pantalla completageolocationpermite acceder a la API de geolocalizacióngyroscopeda acceso a la interfaz del giroscopio de la API de sensoresmagnetometerda acceso a la interfaz del magnetómetro API Sensorsmicrophoneda acceso al micrófono del dispositivo mediante la API getUserMediamidipermite el acceso a la API Web MIDIpaymentda acceso a la API de solicitud de pagospeakerpermite el acceso a la reproducción de audio a través de los altavoces del dispositivousbda acceso a la API WebUSB.vibrateda acceso a la API de vibraciónvrda acceso a la API WebVR
Referente
Al cargar un iframe, el navegador le envía información importante sobre quién lo está cargando en el Refererencabezado (observe el sencillo r, un error tipográfico con el que debemos vivir).
El error ortográfico del referente se originó en la propuesta original del científico informático Phillip Hallam-Baker de incorporar el campo en la especificación HTTP. El error ortográfico se grabó en piedra en el momento de su incorporación en el documento de normas de solicitud de comentarios RFC 1945
El referrerpolicyatributo nos permite configurar el referente para enviarlo al iframe al cargarlo. El referente es un encabezado HTTP que le permite a la página saber quién lo está cargando. Estos son los valores permitidos:
no-referrer-when-downgradees el predeterminado y no envía la referencia cuando la página actual se carga a través de HTTPS y el iframe se carga en el protocolo HTTPno-referrerno envía el encabezado de referenciaoriginse envía la referencia, y solo contiene el origen (puerto, protocolo, dominio), no el origen + ruta que es la predeterminadaorigin-when-cross-original cargar desde el mismo origen (puerto, protocolo, dominio) en el iframe, el referente se envía en su forma completa (origen + ruta). De lo contrario, solo se envía el origensame-originla referencia se envía solo cuando se carga desde el mismo origen (puerto, protocolo, dominio) en el iframestrict-originenvía el origen como referencia si la página actual se carga a través de HTTPS y el iframe también se carga en el protocolo HTTPS. No envía nada si el iframe se carga a través de HTTPstrict-origin-when-cross-originenvía el origen + ruta como referente cuando se trabaja en el mismo origen. Envía el origen como referencia si la página actual se carga a través de HTTPS y el iframe también se carga en el protocolo HTTPS. No envía nada si el iframe se carga a través de HTTPunsafe-url: envía el origen + ruta como referencia incluso cuando se cargan recursos desde HTTP y la página actual se carga a través de HTTPS
IMAGENES
Las imágenes se pueden mostrar usando la imgetiqueta.
Esta etiqueta acepta un srcatributo, que usamos para establecer la fuente de la imagen:
Podemos utilizar un amplio conjunto de imágenes. Los más comunes son PNG, JPEG, GIF, SVG y más recientemente WebP.
El estándar HTML requiere altque esté presente un atributo para describir la imagen. Esto lo utilizan los lectores de pantalla y también los robots de los motores de búsqueda:
Puede configurar los atributos widthy heightpara establecer el espacio que ocupará el elemento, de modo que el navegador pueda tenerlo en cuenta y no cambie el diseño cuando esté completamente cargado. Toma un valor numérico, expresado en píxeles.
La figureetiqueta
La figureetiqueta se usa a menudo junto con la imgetiqueta.
figurees una etiqueta semántica que se utiliza a menudo cuando desea mostrar una imagen con un título. Lo usas así:
A nice dog La figcaptionetiqueta envuelve el texto de la leyenda.
Imágenes receptivas usando srcset
El srcsetatributo le permite configurar imágenes receptivas que el navegador puede usar según la densidad de píxeles o el ancho de la ventana, de acuerdo con sus preferencias. De esta manera, solo puede descargar los recursos que necesita para renderizar la página, sin descargar una imagen más grande si está en un dispositivo móvil, por ejemplo.
Aquí hay un ejemplo, donde damos 4 imágenes adicionales para 4 tamaños de pantalla diferentes:
En el srcset, usamos la wmedida para indicar el ancho de la ventana.
Dado que lo hacemos, también necesitamos usar el sizesatributo:
En este ejemplo, la (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxcadena del sizesatributo describe el tamaño de la imagen en relación con la ventana gráfica, con varias condiciones separadas por un punto y coma.
La condición de los medios max-width: 500pxestablece el tamaño de la imagen en correlación con el ancho de la ventana gráfica. En resumen, si el tamaño de la ventana es <500px, representa la imagen al 100% del tamaño de la ventana.
Si el tamaño de la ventana es mayor pero < 900px, representa la imagen al 50% del tamaño de la ventana.
Y si es aún más grande, renderiza la imagen a 800px.
La vwunidad de medida puede ser nueva para usted y, en resumen, podemos decir que 1 vwes el 1% del ancho de la ventana, por lo que 100vwes el 100% del ancho de la ventana.
Un sitio web útil para generar srcsetimágenes cada vez más pequeñas es //responsivebreakpoints.com/.
La pictureetiqueta
HTML también nos da la pictureetiqueta, que hace un trabajo muy similar srcsety las diferencias son muy sutiles.
Se utiliza picturecuando, en lugar de ofrecer una versión más pequeña de un archivo, desea cambiarlo por completo. O sirva un formato de imagen diferente.
El mejor caso de uso que encontré es cuando se sirve una imagen WebP, que es un formato que aún no es ampliamente compatible. En la pictureetiqueta, especifica una lista de imágenes, y se usarán en orden, por lo que en el siguiente ejemplo, los navegadores que admiten WebP usarán la primera imagen y, en caso contrario, utilizarán JPG:
La sourceetiqueta define uno (o más) formatos para las imágenes. La imgetiqueta es la alternativa en caso de que el navegador sea muy antiguo y no admita la pictureetiqueta.
En la sourceetiqueta interior picturepuede agregar un mediaatributo para establecer consultas de medios.
El ejemplo que sigue funciona como el ejemplo anterior con srcset:
Pero ese no es su caso de uso, porque como puede ver es mucho más detallado.
La pictureetiqueta es reciente, pero ahora es compatible con todos los navegadores principales, excepto Opera Mini e IE (todas las versiones).
ACCESIBILIDAD
Es importante que diseñemos nuestro HTML teniendo en cuenta la accesibilidad.
Tener HTML accesible significa que las personas con discapacidades pueden usar la Web. Hay usuarios totalmente ciegos o con discapacidad visual, personas con problemas de pérdida auditiva y una multitud de otras discapacidades diferentes.
Desafortunadamente, este tema no toma la importancia que necesita y no parece tan interesante como otros.
¿Qué pasa si una persona no puede ver su página, pero aún quiere consumir su contenido? Primero, ¿cómo lo hacen? No pueden usar el mouse, usan algo llamado lector de pantalla . No tienes que imaginarte eso. Puede probar uno ahora: Google ofrece la extensión gratuita ChromeVox Chrome. La accesibilidad también debe cuidar de permitir que las herramientas seleccionen elementos fácilmente o naveguen por las páginas.
Las páginas web y las aplicaciones web no siempre se construyen con la accesibilidad como uno de sus primeros objetivos, y tal vez la versión 1 no sea accesible, pero es posible hacer que una página web sea accesible después del hecho. Cuanto antes, mejor, pero nunca es demasiado tarde.
Es importante y en mi país, los sitios web creados por el gobierno u otras organizaciones públicas deben ser accesibles.
¿Qué significa esto para hacer accesible un HTML? Permítanme ilustrar las principales cosas en las que debe pensar.
Nota: hay varias otras cosas de las que debe ocuparse, que pueden incluirse en el tema CSS, como colores, contraste y fuentes. O cómo hacer que las imágenes SVG sean accesibles. No hablo de ellos aquí.
Utilice HTML semántico
El HTML semántico es muy importante y es una de las principales cosas de las que debe ocuparse. Permítanme ilustrar algunos escenarios comunes.
Es importante utilizar la estructura correcta para las etiquetas de encabezado. Lo más importante es h1, y usa números más altos para los menos importantes, pero todos los encabezados del mismo nivel deben tener el mismo significado (piénselo como una estructura de árbol)
h1 h2 h3 h2 h2 h3 h4 Utilice strongy en emlugar de by i. Visualmente se ven iguales, pero los dos primeros tienen más significado asociado a ellos. by ison elementos más visuales.
Las listas son importantes. Un lector de pantalla puede detectar una lista y proporcionar una descripción general, y luego dejar que el usuario elija entrar en la lista o no.
Una tabla debe tener una captionetiqueta que describa su contenido:
Dogs age
Dog
Age
Roger
7
Usar altatributos para imágenes
Todas las imágenes deben tener una altetiqueta que describa el contenido de la imagen. No es solo una buena práctica, es requerido por el estándar HTML y su HTML sin él no está validado.
También es bueno para los motores de búsqueda, si es un incentivo para que lo agregue.
Usa el roleatributo
El roleatributo le permite asignar roles específicos a los diversos elementos de su página.
Puede asignar muchos roles diferentes: complementario, lista, elemento de lista, principal, navegación, región, pestaña, alerta, aplicación, artículo, banner, botón, celda, casilla de verificación, información de contenido, diálogo, documento, fuente, figura, formulario, cuadrícula, cuadrícula, encabezado, img, cuadro de lista, fila, grupo de filas, búsqueda, cambiar, tabla, panel de pestañas, cuadro de texto, temporizador.
Es mucho y para la referencia completa de cada uno de ellos les doy este enlace MDN. Pero no es necesario asignar un rol a cada elemento de la página. Los lectores de pantalla pueden inferir de la etiqueta HTML en la mayoría de los casos. Por ejemplo, usted no necesita agregar una etiqueta de papel para etiquetas semánticas como nav, button, form.
Tomemos el navejemplo de la etiqueta. Puede usarlo para definir la navegación de la página de esta manera:
- Home
- Blog
Si se viera obligado a usar una divetiqueta en lugar de nav, usaría el navigationrol:
- Home
- Blog
Así que aquí tienes un ejemplo práctico: rolese usa para asignar un valor significativo cuando la etiqueta no transmite el significado ya.
Usa el tabindexatributo
El tabindexatributo le permite cambiar el orden en que al presionar la tecla Tab se seleccionan los elementos "seleccionables". De forma predeterminada, solo los enlaces y los elementos de formulario son "seleccionables" mediante la navegación con la tecla Tab (y no es necesario configurarlos tabindex).
Agregar tabindex="0"hace que un elemento sea seleccionable:
... En su tabindex="-1"lugar, usar elimina un elemento de esta navegación basada en pestañas, y puede ser bastante útil.
Usa los ariaatributos
ARIA es un acrónimo que significa Accessible Rich Internet Applications y define la semántica que se puede aplicar a los elementos.
aria-label
Este atributo se usa para agregar una cadena para describir un elemento.
Ejemplo:
...
Utilizo este atributo en la barra lateral de mi blog, donde tengo un cuadro de entrada para la búsqueda sin una etiqueta explícita, ya que tiene un atributo de marcador de posición.
aria-labelledby
Este atributo establece una correlación entre el elemento actual y el que lo etiqueta.
Si sabe cómo inputse puede asociar un labelelemento a un elemento, eso es similar.
Pasamos la identificación del elemento que describe el elemento actual.
Ejemplo:
The description of the product
...
aria-describedby
Este atributo nos permite asociar un elemento con otro elemento que sirve como descripción.
Ejemplo:
Pay now Clicking the button will send you to our Stripe form! Usa aria-hidden para ocultar contenido
Me gusta un diseño minimalista en mis sitios. Mi blog, por ejemplo, es principalmente contenido, con algunos enlaces en la barra lateral. Pero algunas cosas en la barra lateral son solo elementos visuales que no se suman a la experiencia de una persona que no puede ver la página. Como la imagen de mi logotipo o el selector de tema oscuro / brillante.
Agregar el "atributo les dirá a los lectores de pantalla que ignoren ese elemento.
Donde aprender mas
Esta es solo una introducción al tema. Para obtener más información, recomiendo estos recursos:
- //www.w3.org/TR/WCAG20/
- //webaim.org
- //developers.google.com/web/fundamentals/accessibility/
Ha llegado al final del manual HTML.
Haga clic aquí para obtener una versión PDF / ePub / Mobi de este libro para leer sin conexión .