Maîtriser la Balise HTML Noscript

Introduction

La balise <noscript> en HTML5 est utilisée pour définir une section de texte qui sera affichée aux utilisateurs lorsque leur navigateur ne prend pas en charge JavaScript ou lorsque JavaScript est désactivé. C'est une balise HTML importante car JavaScript est largement utilisé dans le développement web aujourd'hui, et pas tous les utilisateurs peuvent avoir JavaScript activé sur leur navigateur.

Dans ce tutoriel, vous allez apprendre à utiliser la balise <noscript> dans votre code HTML pour vous assurer que vos pages web sont accessibles à tous les utilisateurs, quelle que soit leur configuration de navigateur.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page 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{{"Contenu HTML avec JavaScript Désactivé"}} html/head_elems -.-> lab-70802{{"Contenu HTML avec JavaScript Désactivé"}} html/doc_flow -.-> lab-70802{{"Contenu HTML avec JavaScript Désactivé"}} html/inter_elems -.-> lab-70802{{"Contenu HTML avec JavaScript Désactivé"}} html/custom_attr -.-> lab-70802{{"Contenu HTML avec JavaScript Désactivé"}} end

Ajoutez la structure HTML de base

Tout d'abord, créez un nouveau fichier appelé index.html. Ce fichier contiendra le code HTML de votre page web.

Pour commencer, ajoutez la structure HTML de base à votre fichier :

<!doctype html>
<html>
  <head>
    <title>Utilisation de la balise Noscript</title>
  </head>
  <body></body>
</html>

Ajoutez du contenu pour le cas où JavaScript est activé

Maintenant, ajoutez du contenu à votre page web qui ne devrait être affiché que lorsque JavaScript est activé :

<!doctype html>
<html>
  <head>
    <title>Utilisation de la balise Noscript</title>
  </head>
  <body>
    <h1>Bienvenue sur mon site web!</h1>

    <noscript>
      <p>Veillez activer JavaScript pour afficher cette page web.</p>
    </noscript>
  </body>
</html>

Dans cet exemple, la balise <h1> est utilisée pour afficher un en-tête de page. La balise <noscript> contient le texte qui devrait être affiché lorsque JavaScript n'est pas activé. Lorsque JavaScript est activé, ce texte ne sera pas affiché.

Ajoutez du contenu pour le cas où JavaScript est désactivé

Ensuite, ajoutez du contenu à votre page web qui ne devrait être affiché que lorsque JavaScript est désactivé :

<!doctype html>
<html>
  <head>
    <title>Utilisation de la balise Noscript</title>
  </head>
  <body>
    <h1>Bienvenue sur mon site web!</h1>

    <noscript>
      <p>Veillez activer JavaScript pour afficher cette page web.</p>
    </noscript>

    <div id="myContent">
      <p>Ce contenu n'est affiché que lorsque JavaScript est désactivé.</p>
    </div>

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

Dans cet exemple, la balise <div> avec un attribut id de myContent contient le texte qui devrait être affiché lorsque JavaScript est désactivé. Lorsque JavaScript est activé, ce texte ne sera pas affiché car la balise <script> dans le code HTML masque ce contenu en définissant la propriété display de l'élément HTML sur none.

Enregistrez votre code HTML dans index.html et ouvrez-le dans un navigateur web. Essayez d'activer et de désactiver JavaScript dans votre navigateur pour voir comment fonctionne la balise <noscript>.

Personnalisez la balise `<noscript>`

Vous pouvez personnaliser la balise <noscript> pour répondre à vos besoins. Par exemple, vous pouvez ajouter des styles CSS pour rendre le texte plus visuellement attrayant :

<noscript style="background-color: #ffcccc; padding: 20px;">
  <p>Veillez activer JavaScript pour afficher cette page web.</p>
</noscript>

Récapitulatif

Dans ce tutoriel, vous avez appris à propos de la balise <noscript> en HTML5 et à quoi elle peut servir pour vous assurer que vos pages web sont accessibles à tous les utilisateurs, quelle que soit leur configuration de navigateur. Vous avez appris à ajouter du contenu qui n'est affiché que lorsque JavaScript est désactivé et à personnaliser l'apparence de la balise <noscript>. En utilisant la balise <noscript>, vous pouvez créer des pages web plus inclusives et accessibles.

Contenu HTML avec JavaScript Désactivé