Las 10 nuevas características principales de HTML5

Posted on by Rudeus Greyrat

HTML significa Lenguaje de marcado de hipertexto, y es el lenguaje de marcado estándar para crear páginas web y aplicaciones web. HTML5 es la quinta versión de HTML. Con la invención de funciones en HTML5, no solo es posible crear mejores sitios web, sino que también podemos crear sitios web dinámicos.

Ahora echemos un vistazo a todas las nuevas funciones que se agregaron en HTML5 que lo hacen mejor que HTML:

  1. Introducción de audio y video : 

         Las etiquetas de audio y video son las dos principales adiciones a HTML5. Permite a los desarrolladores insertar un video o audio en su sitio web. El video HTML5 puede usar CSS y CSS3 para diseñar la etiqueta de video. Puede cambiar el borde, la opacidad, los reflejos, los degradados, las transiciones, las transformaciones e incluso las animaciones. HTML5 hace que agregar video sea súper rápido y sin tener que crear un reproductor de video. Esto ahorra tiempo al desarrollador y ofrece al cliente una solución superior y más asequible.

    Ejemplo:

    HTML

    <!DOCTYPE html>
    <html>
    <body>
    <h2>Example of video and audio tag</h2>
        
      <video  width = "300" height = "200" controls autoplay>
           <source src = "/html5/foo.ogg" type ="video/ogg" />
           <source src = "/html5/foo.mp4" type = "video/mp4" />
            Your browser does not support the video element.
       </video>
        
       <audio controls autoplay>
           <source src = "/html5/audio.ogg" type = "audio/ogg" />
           <source src = "/html5/audio.wav" type = "audio/wav" />
            Your browser does not support the audio element.
       </audio>
    </body>
    </html>

    Salida: la interfaz de usuario resultante se parece a esto:

    salida de vídeo

  2. Gráficos vectoriales :

         Esta es una nueva adición a la versión revisada que ha tenido un gran impacto en el uso de Adobe Flash en los sitios web. Se puede usar para dibujar gráficos con varias formas y colores a través de secuencias de comandos, generalmente JS. Los gráficos vectoriales son escalables, fáciles de crear y editar. También es compatible con la interactividad y la animación. Tener un tamaño de archivo más pequeño hace que la transferencia y carga de gráficos sea mucho más rápida en la web. Esa es la razón por la que muchas personas prefieren usar gráficos vectoriales.

    Ejemplo:

    HTML

    <svg id = "svgelem" height = "200" xmlns = "http://www.abc.org/2000/svg">
          <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
     </svg>

    Producción:

    salida vectorial

  3. Encabezado y pie de página:

         Con estas nuevas etiquetas, ya no es necesario identificar los dos elementos con una etiqueta <div>. El pie de página se coloca al final de la página web, mientras que el encabezado se coloca al comienzo de la página web. Mediante el uso de elementos HTML5 <header> y <footer>, el navegador sabrá qué cargar primero y qué cargar después. 

    El encabezado puede contener-

    • Uno o más elementos de encabezado (<h1> – <h6>)
    • logotipo o icono
    • Información de autoría

    El pie de página puede contener-

    • Información de autoría
    • Informacion registrada
    • Información del contacto
    • Volver a los enlaces principales

    Ambos tienen la misma propiedad CSS predeterminada que un bloque de visualización.

    Diseño de HTML vs HTML5

    Ejemplo:

    HTML

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Header Tag</title> 
        </head> 
        <body> 
            <article> 
                <header> 
                    <h1>This is the heading.</h1> 
                    <h4>This is the sub-heading.</h4> 
                      
    <p>This is the metadata.</p>
       
                </header> 
            </article> 
        </body> 
    </html>                     

    Producción:

    Ejemplo:

    HTML

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>HTML footer Tag</title> 
            <style> 
                a { 
                    font-size:25px; 
                    text-decoration:none; 
                } 
                p { 
                    font-size:25px; 
                } 
            </style> 
        </head> 
        <body> 
            <footer> 
                <nav> 
                      
    <p> 
                        <a href= 
    "https://www.geeksforgeeks.org/about/">About Us</a>| 
                        <a href= 
    "https://www.geeksforgeeks.org/privacy-policy/">Privacy Policy</a>| 
                        <a href= 
    "https://www.geeksforgeeks.org/careers/">Careers</a> 
                    </p>
       
                </nav> 
                  
    <p>@geeksforgeeks, Some rights reserved</p>
       
            </footer> 
        </body> 
    </html>                     

    Producción:

  4. Figura y pie de foto :

         HTML5 permite usar un elemento <figure> para marcar una foto en un documento y un elemento <figcaption> para definir un título para la foto. La etiqueta <figcaption> define un título para un elemento <figure>. Esta etiqueta proporciona un contenedor de contenido equivalente a una figura. Se puede usar para agrupar una leyenda con una o más imágenes, un bloque de código u otro contenido.

    Ejemplo:

    HTML

    <figure>
      <img 
           src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/
                download3.png" alt="GFG" style="width:50%">
      <figcaption>Fig.1 - Geeksforgeeks.</figcaption>
    </figure>

    Producción:

    salida de figura y figcaption

  5. Etiqueta de navegación:

         La etiqueta <nav> define un conjunto de enlaces de navegación. Se utiliza para la parte de un sitio de Internet que enlaza con diferentes páginas del sitio web. Los hipervínculos se pueden organizar a través de una serie de enfoques. Ejemplos comunes de elementos de navegación son menús, tablas, contenidos e índices. Este elemento facilita mucho la creación de un menú de navegación, crea un menú horizontal limpio de enlaces de texto y ayuda al software de lectura de pantalla a identificar correctamente las áreas de navegación principales en el documento.

    Ejemplo:

    HTML

    <h1> HTML Nav tag</h1>
    <nav>
      <a href="/html/">HTML</a>
      <a href="/css/">CSS</a>
      <a href="/js/">JavaScript</a>
      <a href="/jquery/">jQuery</a>
    </nav>

    Producción:

    Salida de navegación

  6. Etiqueta de progreso:

         La etiqueta de progreso se utiliza para comprobar el progreso de una tarea durante la ejecución. La etiqueta de progreso se puede usar con la conjunción de JavaScript.

    Ejemplo:

    HTML

    <h1>The progress element</h1>
      
    <label for="file">Downloading progress:</label>
    <progress id="file" value="32" max="100"> 32% </progress>

    Producción:

  7. Atributo de marcador de posición:
    el atributo de marcador de posición especifica una sugerencia breve que describe el valor esperado de un campo de entrada/área de texto. La sugerencia breve se muestra en el campo antes de que el usuario ingrese un valor.

    HTML

    <!DOCTYPE html> 
    <html> 
      
    <body> 
        <center> 
            <h1 style="font-size:25px;font-style:italic;"> 
                GeeksforGeeks 
            </h1> 
            <h2 style="font-size:25px;font-style:italic;"> 
            Placeholder Attribute in Input Element 
            </h2> 
            <form action=" "> 
                <input type="text" name="fname"
                                placeholder="First name"> 
                <br> 
                <input type="text" name="lname"
                                placeholder="Last name"> 
                <br> 
                <input type="submit" value="Submit"> 
            </form> 
    </center> 
    </body> 
      
    </html> 

    Producción:

  8. Atributo de correo electrónico:
    cuando el tipo de entrada en el formulario se establece como correo electrónico, el navegador recibe la instrucción del código para escribir un correo electrónico de formato válido. La identificación del correo electrónico de entrada se valida automáticamente para verificar que el formato de la identificación del correo electrónico sea correcto o no.
    Ejemplo:

    HTML

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                HTML input type email 
            </title> 
        </head> 
          
        <body style="text-align:center;"> 
              
            <h1 style="color:green;"> 
                GeeksForGeeks 
            </h1> 
              
            <h2>HTML <input type ="email"></h2> 
              
            <form> 
                Email: <input type ="email"
                    value="manaschhabra499@gmailo.com"> 
            </form> 
        </body> 
    </html>

    Producción:

  9. Almacenamiento:

        En el caso de HTML, podemos usar el navegador como almacenamiento temporal mientras que, en el caso de HTML5, se usa el caché de la aplicación, la base de datos web SQL y el almacenamiento web.

  10. Facilidad de uso:

         Si bien HTML5 tiene riesgos como actualizaciones constantes, generalmente es fácil mantenerse al día con los cambios y actualizaciones debido a una sintaxis más simple en comparación con otras versiones de HTML.

Hay muchas más etiquetas y funcionalidades añadidas en HTML5. Algunas etiquetas comunes son navegación, aparte, sección, resumen, artículo, medidor y muchas más.

Publicación traducida automáticamente

Artículo escrito por shonalikushwaha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *