Introducción a las etiquetas HTML5

Todos conocemos la abreviatura estándar de HTML; que es el lenguaje de marcado de hipertexto. Entonces, HTML5 es la última y la nueva versión de HTML. Una vez que se desarrolla un producto, obviamente, habrá muchas versiones de HTML con muchos desarrollos nuevos en el camino. Entonces, HTML5 tiene nuevos atributos y comportamientos. Esta etiqueta HTML5 ya no es un lenguaje de programación, pero es un lenguaje de marcado. Ahora, ¿qué es un lenguaje de marcado? La definición de atributos de elementos utilizando etiquetas en un documento es un lenguaje de marcado. Así que ahora vamos a entrar en detalles sobre cómo podemos definir etiquetas y crear una página web.

Etiquetas de HTML5

Una etiqueta es una especificación para mostrar contenido. En general, habría una etiqueta de inicio y fin. Y también hay algunas etiquetas que no requieren una etiqueta final; me gusta
lo que significa romper la línea, que muestra los datos junto a esa etiqueta de la siguiente línea. Aquí, veamos algunos de los nuevos elementos en HTML5.

En HTML5 generalmente podemos dividir las etiquetas en dos categorías.

  • Elementos semánticos: pocos ejemplos de estos elementos son;, etc.
  • Elementos no semánticos: ejemplos aquí son; etc.

Las etiquetas que se analizan a continuación son las que se introdujeron recientemente exclusivamente en versiones HTML5. Son diferentes tipos de etiquetas que todas se pueden clasificar.

1. Etiquetas estructurales

A continuación se muestran los tipos de etiquetas estructurales con ejemplos:

a. Artículo: Esta es una etiqueta que se usa principalmente de manera similar a una etiqueta de cabeza. Principalmente utilizado en formularios, blogs, noticias y todo como ejemplos.

Código:


El primero


Dar una buena acogida

Salida:

si. Aparte: algo similar a nuestras etiquetas normales, que relacionaría el contenido con los contenidos circundantes, como una barra lateral en el artículo. Y esta etiqueta solo tendría sentido cuando se usa una versión IE superior a 8.

C. Detalles: esta etiqueta se utiliza para proporcionar algunos datos adicionales al usuario. Esta puede ser una plataforma interactiva que puede ocultar o mostrar los detalles. Podemos ver el uso de esta pestaña debajo de la etiqueta de resumen.

re. Encabezado: esta etiqueta está relacionada con la parte del encabezado y contiene información del título. Tiene que tener las etiquetas de inicio y fin.

Código:


Horas felices


Mañana | Tarde | Noche

salida:

mi. hgroup: esta etiqueta se usa para describir un grupo de encabezados. Veamos el ejemplo.

Código:



Vamos a ver el tamaño de este h1


Vamos a ver el tamaño de este h2


Vamos a ver el tamaño de este h3


Vamos a ver el tamaño de este h4


Vamos a ver el tamaño de este h5

Salida:

F. Pie de página: esta etiqueta es la que se debe colocar al final de la página. Se trata de algo como derechos de autor, información o datos relacionados con el historial. Veamos un pequeño ejemplo a continuación.

Código:



Derechos de copia | Vuelve pronto


Subscríbete para más contenido de aprendizaje

Salida:

sol. nav: esta etiqueta es para proporcionar una sección de todos los enlaces para la navegación.

Código:



  • EDUCBA Inicio
  • Sobre EDUCBA
  • Cursos en EDUCBA

Salida:

Verifique haciendo clic en los enlaces una vez que escriba su código mientras practica.

h. Sección: como el nombre ya indica, esta etiqueta define la parte del código como el cuerpo, el encabezado, el pie de página, etc. Aquí, las etiquetas de inicio y final son necesarias. Veamos un pequeño ejemplo a continuación:

Código:


Bienvenido


Te veo pronto


Gracias.

Salida:

yo. Resumen: esta etiqueta se utiliza en paralelo con la pestaña de detalles. Debajo de la etiqueta de detalles, tenemos esta etiqueta de resumen para resumir los conceptos. Ejemplo a continuación:

Código:



How is this Summary tag defined?

Al hacer clic en la flecha al lado de la pregunta de resumen que se muestra

Los datos después de la etiqueta de visualización se muestran así.

Salida:

Ahora expandiendo los datos resumidos de la etiqueta, obtenemos lo siguiente.

2. Etiquetas de formulario

Estos son los diferentes tipos de etiqueta de formulario que se explican a continuación con ejemplos:

a. Datalist: esta etiqueta se usa como un menú desplegable que tiene valores predefinidos para que un usuario los elija. Echemos un vistazo al pequeño ejemplo a continuación:

Código:


Ingrese su nombre de navegador favorito:

Salida:

El menú desplegable aparece cuando se pasa el mouse sobre él.

si. Keygen: esto es para el cifrado. Es para generar una clave cifrada para pasar los datos en un formato cifrado. Para este elemento, solo la etiqueta de inicio es suficiente / requerida y la etiqueta de finalización no es obligatoria.

C. Medidor: esta etiqueta nos daría la medida de los datos que están presentes en un rango dado.

Código:


25 out of 100

Esto es 25 de 100

70%

Este es el rango del 70%

Salida:

3. Formato de etiquetas

A continuación se muestran los tipos de etiqueta de formato con ejemplos:

a. BDI: Esto es aislamiento bidireccional. Como el nombre ya sugiere, esta etiqueta se puede usar para aislar una parte del texto y darle diferentes estilos con el de otro texto.

si. Marca: esta etiqueta puede ayudarnos a resaltar un texto específico.

Código:


Así es como puede marcar o resaltar un texto.

Salida:

C. Salida: como el nombre ya nos muestra, da el resultado de cualquier cálculo.

Código:



+
=

Salida:

Asegúrese de notar el atributo de formulario de oninput. Una vez que ingrese el valor del atributo 'x', se mostrará la salida.

re. Progreso: esta etiqueta nos da el progreso de una tarea en particular.

Código:


Esta barra de progreso está completa al 80%

Salida:

mi. Rp: Esto se usa cuando las etiquetas ruby ​​no son compatibles.

F. Rt: Se usa con la etiqueta ruby. Principalmente, esto se usa en la pronunciación en los idiomas japonés y chino.

sol. Ruby: esta etiqueta se usa con las etiquetas rt y rp donde se pronuncian las anotaciones con respecto a los dos idiomas chino y japonés.

h. Wbr: Esta etiqueta es para el salto de palabra. Se utiliza principalmente para verificar cómo se rompe una palabra cuando se cambia el tamaño de la ventana.

4. Etiquetas de contenido incrustadas

Estos son los tipos de etiquetas de contenido incrustado que se explican a continuación con ejemplos:

a. Audio: como su nombre ya sugiere, esta etiqueta nos ayudaría a incorporar archivos de audio en el documento HTML.

si. Lienzo: define un lugar en la página web donde los gráficos, formas o gráficos están presentes o pueden definirse. Aquí hay un ejemplo.

Código:



window.onload = function()(
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
);

Salida:

C. Diálogo: esta etiqueta nos da un cuadro predeterminado, especialmente si queríamos tener datos en un cuadro.

Código:


Intentando el diálogo aquí ¿Cómo aparece el cuadro de diálogo?

Salida:

re. Incrustar: esta etiqueta se puede usar para ingresar cualquier archivo externo al archivo HTML. Solo podemos tener la etiqueta de inicio y la etiqueta de finalización no es obligatoria aquí. Hay diferentes atributos que se pueden usar con esta etiqueta, a saber; ancho, alto, src y tipo.

mi. Figura y Figcaption: Esto, como ya está en su nombre, puede incorporar las imágenes y puede dar un título a esa imagen.

F. Fuente: esta etiqueta puede implementar múltiples archivos de audio y video al proporcionar la ubicación de los archivos usando esta etiqueta fuente.

sol. Hora: esta etiqueta como el nombre ya lo notifica es una etiqueta para mostrar la hora. Y tenga en cuenta que esta etiqueta no funciona en los casos de Internet Explorer versión 8 y posteriores.

h. Video: con el nombre de la etiqueta, obviamente podemos saber dónde se usa esta etiqueta. Para especificar los archivos de video tenemos esta etiqueta. Dentro de estas etiquetas de audio / video, definimos las etiquetas de origen al especificar los archivos y sus ubicaciones.

Elementos de entrada de etiquetas HTML5

Aquí hay algunos elementos de entrada que estamos usando en las etiquetas HTML5:

1. Correo electrónico: este es uno de los elementos de entrada en HTML5. Este elemento solo toma direcciones de correo electrónico como entrada.

2. Número: este elemento de entrada solo acepta el número.

3. Rango: como el nombre ya explica, esta etiqueta contiene un rango de números.

4. URL: esta etiqueta de entrada acepta el campo de entrada para la dirección URL. En este tipo de entrada, solo podemos ingresar la URL.

5. Marcador de posición: este es uno de los atributos para el tipo de entrada como texto o área de texto o cualquier número. Este valor de marcador de posición muestra el valor que se debe dar como entrada.

Código:


Enter Date of birth : placeholder = "dd/mm/yyyy"/>

Salida:

6. Enfoque automático: este atributo se enfoca automáticamente en un campo particular donde este elemento ha sido declarado dentro de la etiqueta de entrada. Este atributo solo es compatible con las últimas versiones de Chrome, Safari y Mozilla únicamente. La sintaxis es como:


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner

Salida:

7.: Esta es una de las etiquetas básicas que ayudarían al navegador a comprender la versión del HTML en el que se está escribiendo el programa. La declaración de esta etiqueta debe escribirse antes de la etiqueta HTML.

8.: Esta metaetiqueta describe la descripción del documento HTML. Contiene el nombre del autor, la fecha y las modificaciones, etc.

En este HTML5 incluso tenemos la oportunidad de obtener la GeoLocation de un dispositivo. Existen diferentes métodos que pueden ser útiles para facilitar el etiquetado de esta ubicación. También hay diferentes fuentes y colores disponibles en HTML5. A continuación se muestran las pocas etiquetas que se eliminan del uso de HTML de esta versión HTML5.

Acrónimo, Applet, grande, dir, fuente, conjunto de marcos, centro, tt (texto TeleType), basefont, center, strike, frame, u (texto subrayado), isindex, noframes, etc. Pocos atributos que se eliminan están a continuación:

Alinear, bgcolor, cellpadding, cellpacing, border, link, shape, charset, archive, codebase, scope, alink, vlink, link, background, border, clear, scrolling, size, width, etc.

9.: Esta etiqueta se usa para mostrar el contenido donde el uso de JavaScript está deshabilitado. Cualquier contenido escrito dentro de esta etiqueta se puede usar en lugar del contenido donde sea que se use JavaScript. Como ejercicio, puede intentar ejecutar las diferentes etiquetas para las que no se proporcionan ejemplos.

Conclusión

Entonces, sí, hay etiquetas básicas y referencias para HTML5. La versión inicial de HTML5 se lanzó el 28 de octubre de 2014. Hemos visto diferentes etiquetas nuevas que se introdujeron y que pasaron por algunos atributos en HTML5. Al final, incluso cubrimos que no solo se realizó la introducción de nuevos elementos, sino que algunos elementos y atributos que estaban presentes se restringieron de uso a través de esta nueva versión de HTML5.

Hubo muchos atributos que se dieron con ejemplos y algunos con solo los datos y el propósito del atributo o elementos. Intenta practicar todos esos elementos y atributos diferentes y sigue aprendiendo.

Artículos recomendados

Esta es una guía de etiquetas HTML5. Aquí discutimos en detalle las 4 etiquetas HTML5 principales y sus elementos de entrada junto con ejemplos e implementación de código. También puede consultar los siguientes artículos para obtener más información.

  1. Eventos HTML
  2. Diseño HTML
  3. Marcos HTML
  4. Etiquetas de tabla HTML
  5. Eventos JavaScript | Implementación de diferentes eventos de JavaScript
  6. Diferentes tipos de metaetiquetas en HTML
  7. ¿Cómo funciona el formato de texto en HTML?
  8. Varios elementos semánticos en HTML5