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.

50 sites d'emplois indépendants pour les concepteurs et programmeurs - Best Of

Être un pigiste peut être extrêmement avantageux et est probablement un rêve pour de nombreux concepteurs et développeurs qui sont fatigués du style de vie de la cabine. Non seulement vous choisissez uniquement les emplois qui vous intéressent vraiment, mais vous avez également une flexibilité totale en termes de temps, avec qui vous voulez travailler et où vous voulez travailler .Le problè

(Conseils techniques et de conception)

20 ebooks gratuits pour les développeurs de logiciels [débutants]

Développer et programmer des logiciels et des applications n'est jamais une tâche facile, et parfois vous avez besoin d'un peu d'aide, que ce soit pour gérer votre flux de travail, rafraîchir vos connaissances ou apprendre un nouveau langage de programmation . Heureusement, il y a beaucoup de ressources sur Internet qui peuvent aider, y compris des livres gratuits.Ici

(Conseils techniques et de conception)