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.

20 outils SEO gratuits que tous les blogueurs devraient connaître

Mis à part un site Web attrayant avec un contenu intéressant et régulièrement mis à jour, le référencement est essentiel pour les blogueurs. Bien qu'il soit tout à fait possible de faire du référencement par vous-même, en raison de la complexité des règles SEO à respecter, il est probablement beaucoup plus efficace de se rabattre sur des outils prêts à améliorer votre site .Qu'il s'

(Conseils techniques et de conception)

Snapchat et Instagram affectent mentalement les jeunes, selon une étude

La question de savoir si Internet est mauvais pour votre santé a pris un nouveau virage vers les sites de médias sociaux. Même si les médias sociaux sont utiles, il se peut que tout ne soit pas très bon, car une étude récemment publiée montre que les médias sociaux peuvent avoir des effets négatifs sur les jeunes .Réalisée

(Conseils techniques et de conception)