2 tags HTML que no conocias <base> y <abbr>

- Andrés Cruz

In english
2 tags HTML que no conocias <base> y <abbr>

En la API de HTML existen muchas tags o elementos muy poco usados por tener funciones muy específicas y por lo tanto no son tan famosos pero que son iguales útiles; hoy veremos un par de tags HTML que puede que no conozcas:

El elemento <base>

Este elemento define una URL y/o target global al documento que permite sobrescribir los atributos target y/o href que no se encuentren especificados en un elemento <a>.

¡IMPORTANTE! solo puede haber un elemento <base> en el head del documento:

Si tenemos el siguiente código HTML:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Elemento base 1</title>
            <base href="https://www.bing.com/" target="_blank">
        </head>

        <body>
            <a href="">Google.com</a>
        </body>
    </html>

Veremos que al precionar sobre el enlace "Google.com" esta nos redirigirá al buscador de Microsoft en la siguiente dirección: https://www.bing.com/.

Ver ejemplo

Si por el contrario, si especificamos la URL en el atributo href del enlace:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Elemento base 2</title>
            <base href="https://www.bing.com/" target="_blank">
        </head>

        <body>
            <a href="http://www.google.com/">Google.com</a>
        </body>
    </html>

El enlace nos redirigirá a Google.com aunque al no especificar el target se abrirá el enlace en una pestaña nueva.

Ver ejemplo

El elemento <abbr>

Este elemento simplemente permite definir una abreviación como podemos ver en el siguiente ejemplo:

 <p>El lenguaje de programación <abbr title="PHP Hypertext Pre-processor">PHP</abbr>...</p>

El lenguaje de programación PHP...

El lenguaje de programación PHP...

Consulta la documentación oficial en los siguientes enlaces:

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.