Dominando la Etiqueta HTML Noscript

Introducción

La etiqueta <noscript> en HTML5 se utiliza para definir una sección de texto que se mostrará a los usuarios cuando su navegador no soporta JavaScript o cuando JavaScript está deshabilitado. Es una etiqueta HTML importante porque JavaScript se utiliza ampliamente en el desarrollo web actual, y no todos los usuarios pueden tener JavaScript habilitado en sus navegadores.

En este tutorial, aprenderá a usar la etiqueta <noscript> en su código HTML para asegurarse de que sus páginas web sean accesibles a todos los usuarios, independientemente de su configuración de navegador.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70802{{"Contenido HTML con JavaScript Deshabilitado"}} html/head_elems -.-> lab-70802{{"Contenido HTML con JavaScript Deshabilitado"}} html/doc_flow -.-> lab-70802{{"Contenido HTML con JavaScript Deshabilitado"}} html/inter_elems -.-> lab-70802{{"Contenido HTML con JavaScript Deshabilitado"}} html/custom_attr -.-> lab-70802{{"Contenido HTML con JavaScript Deshabilitado"}} end

Agregar la estructura básica de HTML

Primero, cree un nuevo archivo llamado index.html. Este archivo contendrá el código HTML de su página web.

Para comenzar, agregue la estructura básica de HTML a su archivo:

<!doctype html>
<html>
  <head>
    <title>Using the Noscript Tag</title>
  </head>
  <body></body>
</html>

Agregar contenido para cuando JavaScript está habilitado

Ahora, agregue algo de contenido a su página web que solo debe mostrarse cuando JavaScript está habilitado:

<!doctype html>
<html>
  <head>
    <title>Using the Noscript Tag</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>

    <noscript>
      <p>Please enable JavaScript to view this webpage.</p>
    </noscript>
  </body>
</html>

En este ejemplo, la etiqueta <h1> se utiliza para mostrar un encabezado de página. La etiqueta <noscript> contiene el texto que se debe mostrar cuando JavaScript no está habilitado. Cuando JavaScript está habilitado, este texto no se mostrará.

Agregar contenido para cuando JavaScript está deshabilitado

A continuación, agregue algo de contenido a su página web que solo debe mostrarse cuando JavaScript está deshabilitado:

<!doctype html>
<html>
  <head>
    <title>Using the Noscript Tag</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>

    <noscript>
      <p>Please enable JavaScript to view this webpage.</p>
    </noscript>

    <div id="myContent">
      <p>This content is only displayed when JavaScript is disabled.</p>
    </div>

    <script>
      document.getElementById("myContent").style.display = "none";
    </script>
  </body>
</html>

En este ejemplo, la etiqueta <div> con un atributo id de myContent contiene el texto que se debe mostrar cuando JavaScript está deshabilitado. Cuando JavaScript está habilitado, este texto no se mostrará porque la etiqueta <script> en el código HTML oculta este contenido estableciendo la propiedad display del elemento HTML en none.

Guarde su código HTML en index.html y abrálo en un navegador web. Intente habilitar y deshabilitar JavaScript en su navegador para ver cómo funciona la etiqueta <noscript>.

Personalizar la etiqueta `<noscript>`

Puede personalizar la etiqueta <noscript> para adaptarla a sus necesidades. Por ejemplo, puede agregar estilos CSS para que el texto sea más atractivo visualmente:

<noscript style="background-color: #ffcccc; padding: 20px;">
  <p>Please enable JavaScript to view this webpage.</p>
</noscript>

Resumen

En este tutorial, aprendiste sobre la etiqueta <noscript> en HTML5 y cómo se puede utilizar para garantizar que tus páginas web sean accesibles para todos los usuarios, independientemente de su configuración del navegador. Aprendiste cómo agregar contenido que solo se muestra cuando JavaScript está deshabilitado y cómo personalizar la apariencia de la etiqueta <noscript>. Al utilizar la etiqueta <noscript>, puedes crear páginas web más inclusivas y accesibles.

Contenido HTML con JavaScript Deshabilitado