HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML. Esta nueva versión , 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).
Algunas de las nuevas características de HTML5 serían:
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.
Los nuevos elementos multimedia como <audio> y <video>.
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.
El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite> o <menu>.
MathML para fórmulas matemáticas.
Almacenamiento local en el lado del cliente.
Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capítulos
Etiqueta <base>
Esta etiqueta se usa para especificar una URL por defecto y un destino por defecto para todos los enlaces relativos del documento HTML5.Se añade dentro del grupo de etiquetas de metadatos (en la cabecera), sólo puede aparecer una vez en el documento y es una etiqueta sin cierre. Su formato es el siguiente:
<base href=»valor» target=»valor» />
Atributos:
· href: Establece la URL base para todas las URL relativas.
· target: Permite especificar el destino por defecto para todos los enlaces y formularios. Ya te he mostrado anteriormente el tipo de valores que puede recibir este tipo de atributos, pero hagamos un repaso:
· _blank: Especifica que el destino sea una nueva ventana de navegador, o una nueva pestaña.
· _self: Es el valor por defecto. Abre el destino en el mismo lugar donde se haya realizar el clic (misma ventana o pestaña).
· _parent: Abre el destino en un marco asociado.
· _top: Abre el destino ocupando todo el cuerpo de la ventana.
· Framename: Abre el destino en el marco del cual se especifica el nombre.
Etiqueta <noscript> … </noscript>
Esta etiqueta es complementaria a la etiqueta <script>.Se utiliza para definir un contenido alternativo en el documento HTML5 cuando un navegador no soporta la ejecución de scripts o cuando están desactivados.
Si se utiliza dentro de la cabecera del documento es necesario ponerla dentro de las etiquetas <head> y </head>, y afecta de esta forma a las etiquetas <link>, <style> y <meta>, permitiendo cargar de forma alternativa estos elementos.
Etiqueta <code> … </code>
Con esta etiqueta definimos que un texto ha de mostrarse de forma especial dado que el texto encerrado es interpretado como un código fuente de programación, o código de ordenador.
Etiqueta <samp> … </samp>
Indica al navegador que el texto ha de ser interpretado igualmente como código fuente de programación o código de ordenador. La diferencia es que esta etiqueta debe mostrar el texto como texto de salida.
Etiqueta <kbd> … </kbd>
En este caso el texto encerrado tendrá un formato de texto para distinguir lo que el usuario tendría que teclear en la solicitud del programa. Y, de nuevo, lo habitual es que el navegador muestre este texto de la misma forma que las anteriores dos etiquetas.
Etiqueta <var> … </var>
En este caso, resaltaremos el texto encerrado indicando que es una definición de variables en un programa de ordenador o código de programación. Los navegadores suelen diferenciarla de las anteriores mostrando el texto encerrado en cursiva o itálica.
Etiqueta <mark> … </mark>
Esta etiqueta indica al navegador que tiene que mostrar el texto encerrado en ella como si hubieramos pasado un bolígrafo resaltador de texto por encima (el típico subrayador amarillo que hemos usado todos alguna vez).
Etiqueta <cite> … </cite>
Utilizada para resaltar el texto de una cita o cualquier trabajo
similar, como una obra, autor, película, etc. Como en las etiquetas anteriores, tiene más un significado semántico que visual, ya que el navegador mostrará el texto en cursiva o itálica.
Etiqueta <sub> … </sub>
Esta etiqueta permite definir un texto en subíndice, que aparece por debajo de la línea base del texto standar. El ejemplo más habitual es su uso en formulas químicas, como la del agua: H2O
Etiqueta <sup> … </sup>
Es la opuesta a la anterior, permite definir un texto en superíndice, y se utiliza de forma habitual para añadir notas a pié de página o añadir cualquier referencia: referencia1
Etiqueta <ins> … </ins>
Permite definir que un texto ha sido actualizado o insertado en el documento web, y los navegadores suelen representarlo subrayado. Esta etiqueta dispone de los siguientes atributos:
· cite: Establece la URL en la que se encuentra el documento donde se explican los detalles o motivos de la inserción de este texto.
· datetime: Define la fecha y hora en la que se ha añadido este texto al documento HTML.
Ejemplo :
<ins cite=»https://alexisruizg.blogspot.com» datetime=»2017-10-16T10:43:00Z»>Añadido por Nicolau Roca</ins>
Etiqueta <del> … </del>
Definimos el texto encerrado como borrado en una fecha determinado. Sería el significado contrario a la etiqueta anterior <ins>. Tiene los mismos atributos y su sintaxis es la misma. Los navegadores suelen mostrar este texto tachado.
Etiqueta <abbr> … </abbr>
Utilizada para indicar un texto como abreviatura o acrónico, como WWW o NASA. Los navegadores muestran este texto sin un formato especial, pero al pasar el ratón por encima mostrarán el atributo title que esté definida en el código, a modo de explicación. Te muestro un ejemplo práctico:
<p> ¿Sabes qué es la <abbr title=»Administración Nacional de la Aeronáutica y del Espacio»>NASA</abbr>?
Etiqueta <address> … </address>
Dentro de esta etiqueta definimos información de contacto del autor o propietario del documento o artículo, y si se encuentra dentro del cuerpo (<body>) representa la información de contacto del documento completo. Los navegadores suelen mostrar esta información en cursiva.
Etiqueta <bdo> … </bdo>
Permite definir la dirección de visualización del texto contenido en la misma. Es decir, si estamos escribiendo el texto de izquiera a derecha, o de derecha a izquierda.
Etiqueta <dfn> … </dfn>
Se utiliza para la definición de un término. Los navegadores suelen mostrar la palabra en cursiva, pero lógicamente el significado semántico es diferente.
Etiqueta <pre> … </pre>
Sirve para definir lo que se denomina texto con formato o preformateado. Como sabes, el texto HTML no respeta saltos de línea ni espaciados, y se limita a interpretar el texto libre de etiquetas sin saltos de línea y con un único espacio entre palabras. Sin embargo, si encierras texto dentro de la etiqueta <pre> … </pre> le navegador entenderá que ya has dado el formato al texto, por lo que mostrará el texto tal y como tu lo escribas, incluyendo saltos de línea, espaciados dobles, triples, etc.
Etiqueta <q> … </q>
Se utiliza para insertar un texto acotado entre comillas dobles.
Etiqueta <blockquote> … </blockquote>
Permite insertar texto para que el navegador aplique una sangría a la izquierda, y semánticamente se utiliza para realizar una distinción sobre un texto al que se quiere hacer referencia.
Por cada etiqueta <blockquote> anidada dentro de otra, se realiza un nuevo sangrado sobre el texto encerrado. Su sintaxis es la siguiente:
<blockquote cite=»valor«> texto encerrado </blockquote>
Etiqueta <bdi> … </bdi>
Permite definir lo que se denomina aislamiento bidireccional. Es decir, el texto encerrado es un texto contenido en otra etiqueta del que desconocemos la dirección en la que está escrito.
Etiquetas <ruby> … </ruby>, <rt> … </rt> y <rp> … </rp>
El objetivo de la etiqueta <ruby> es la de crear anotaciones en formato ruby, que se utilizan para la tipografía de Asia Oriental, permitiendo mostrar la pronunciación de los caracteres del este asiático.
Se utiliza en conjunto con las otras dos etiquetas <rt> y <rp>; la primera permite realizar la explicación del trexto, y la segunda permite visualizar un texto en los navegadores que no soportan la etiqueta anterior.
Etiqueta <dialog> … </dialog>
Semánticamente representa un diálogo, a modo de representación de una conversación de chat o dialogo entre programa y usuario.
También se utiliza para abrir un cuadro de dialogo en la ventana del navegador para que muestre información al realizar un clic sobre un elemento del documento
Comentarios
Publicar un comentario