5 éléments HTML que vous ne connaissez probablement pas

Par le passé, nous avons beaucoup parlé des éléments HTML5 et démontré leurs fonctions. De nouveaux éléments tels que l'en- header, le footer, la nav, le nav et le main rendent notre structure de document plus sémantique ou "significative". En particulier, ces éléments aident les machines à comprendre facilement les sections du document .

Mais, les spécifications HTML sont énormes. Si vous visitez W3.org où réside la documentation, vous trouverez des centaines de pages documentant chaque élément de manière approfondie. Dans cette mesure, il y a peut-être quelques éléments HTML que vous avez ignorés, et ceux-ci incluent:

1. Échantillon

Sample Element ou samp définit la sortie d'un système informatique, d'un programme ou d'un script . Il a été introduit loin en HTML3! . Cet élément sera utile pour les tutoriels techniques ou les manuels informatiques. Cet exemple ci-dessous montre comment nous enroulons une erreur survenue dans Terminal.

 Si vous tapez dir dans Terminal, il affichera la commande not found: dir . 

Tous les navigateurs, y compris IE5, supportent cet élément, et ils l'afficheront avec une police de caractères Monospace comme le code et pre éléments pre .

Keyboard Input Element ou kbd est un élément qui définit une entrée utilisateur . Semblable à l'élément samp, kbd serait couramment utilisé dans les articles techniques ou informatiques.

Supposons que vous souhaitiez demander aux lecteurs d'entrer des caractères particuliers dans un champ de saisie d'une application. Vous pouvez envelopper les caractères de texte avec kbd, comme suit:

 Pour confirmer la suppression de votre compte, tapez DELETE . 

kbd peut également être utilisé pour représenter les touches du clavier.

 Appuyez sur Entrée pour créer une nouvelle ligne. 

Mais lorsqu'il est utilisé avec l'élément samp, il peut représenter une entrée qui est effectuée à travers l'écran de l'application, comme les boutons ou les menus. Voici un exemple:

 Cliquez sur Accepter pour continuer. 

Même si l'élément kbd est explicitement décrit comme "Keyboard Input", nous pouvons également l'utiliser pour un autre type d'entrée, tel qu'une entrée vocale. Si vous écrivez des tutoriels ou des manuels sur Siri, Google Voice ou Cortana qui nous permettent de communiquer avec l'appareil à l'aide de commandes vocales, enveloppez l'entrée vocale de cette façon.

 ... le mot clé Ok Google n'est pas désactivé en fonction de la région et peut être facilement activé en deux étapes seulement. 

Semblable à samp, kbd sort également avec la police de caractères Monospace par défaut.

Suggestion de style

Ces éléments aident les machines à mieux comprendre le contenu. Mais comme ils sont tous rendus avec la police de caractères Monospace, les lecteurs verront à peine la différence. Dans ce cas, nous pouvons ajouter un style pour les rendre plus distincts.

Nous pouvons ajouter une classe, par exemple une button-input si elle représente une touche de clavier ou un bouton d'application.

Ensuite, en CSS, nous mettons les règles de style suivantes.

 .button-input {border: 1px solide # 333; arrière-plan: linéaire-gradient (#aaa 0%, # 555 100%); / * W3C * / couleur: #fff; rembourrage: 3px 8px; border-radius: 3px; box-shadow: 0px 2px 0px 0px # 111; } 

Cela fera ressembler à un bouton réel.

3. Élément variable

Variable Element ou var, comme son nom l'indique, représente un caractère variable . Cet élément peut être utile pour écrire des tutoriels ou des articles qui comprennent des équations mathématiques, tels que:

 var y = Math.sqrt(16); 

Dans l'exemple ci-dessus, nous enveloppons l'équation avec un élément de code, car l'équation est un code JavaScript. Nous enveloppons seulement le caractère qui est une variable avec l'élément var.

4. Elément définissant

L'élément de définition ou dfn est utilisé pour mettre en évidence un jargon ou un terme spécifique qui est particulièrement utilisé dans une communauté ou une industrie. L'industrie du développement Web, par exemple, est pleine de jargon qui peut ne pas être bien connu en dehors de l'industrie.

Et ci-dessous est un exemple où nous utilisons l'élément dfn pour envelopper le mot Breadcrumb ; nous avons pris la phrase suivante de Wikipedia.

 Breadcrumbs ou breadcrumb trail est une aide à la navigation utilisée dans les interfaces utilisateur. Il permet aux utilisateurs de garder une trace de leurs emplacements dans les programmes ou les documents. Le terme vient de la traînée de chapelure laissée par Hansel et Gretel dans le conte de fées populaire. 

Les navigateurs l'affichent en italique, correspondant à la convention typographique pour désigner une nouvelle instance, ou un terme étranger.

5. Marquer l'élément

Mark est un nouvel élément introduit dans le cadre de HTML5. En bref, la mark est utilisée pour mettre en évidence le texte que vous voulez que les lecteurs prêtent attention. Ainsi, par défaut, les navigateurs rendent cet élément avec une couleur fluorescente brillante comme vous pouvez le voir ci-dessous.

Pour en savoir plus, vous pouvez vous diriger vers sa documentation, Semantic Level - Mark Element, où vous pouvez voir quelques exemples détaillés sur l'utilisation.

Pensée finale

Au lieu d'utiliser un élément générique comme div ou span, il est préférable d'envelopper votre contenu dans un élément plus sémantique comme indiqué ci-dessus, afin que la machine - qu'il s'agisse d'une application, d'un bot ou d'un lecteur - comprenne mieux le contenu . J'espère que cet article peut être une bonne référence pour commencer.

Comment envoyer et archiver le courrier électronique Gmail en un clic

L'une des meilleures choses à propos de Gmail est la fonction de conversation par threads. Il aide à réduire l'encombrement, en particulier pour les personnes occupées qui utilisent beaucoup le courrier électronique dans leurs transactions commerciales. Atteindre Zero Inbox est un combat quotidien pour beaucoup, et l'un des meilleurs moyens de garder vos e-mails dans votre boîte de réception sans ajouter de confusion au mélange est l' art de l'archivage .Bien qu

(Conseils techniques et de conception)

30 photographies de drones aériens

Avec les progrès technologiques dans les appareils photo légers et quadcopters ou drones peu coûteux, nous pouvons maintenant avoir un aperçu du monde d'un point de vue différent. Et de haut en haut, surtout avec une vue d'oiseau, le monde est un endroit incroyablement beau .Régalez-vous de vues, d'angles et de coups de feu à couper le souffle. Voici

(Conseils techniques et de conception)