À l'aide de balises de formatage, vous pouvez mettre en évidence du texte sémantiquement important sur les pages, créer des textes manuscrits, les insérer dans Documents HTML caractères avec exposant et indice, ainsi qu'augmenter et diminuer la taille de la police.
Qu’est-ce que la sémantique ?
La sémantique en HTML est la pratique consistant à donner un sens et une structure au contenu d'un document à l'aide d'une balise appropriée. Le code sémantique décrit la signification du contenu d'un document, quel que soit son style ou son apparence. L’utilisation d’éléments sémantiques présente plusieurs avantages :
- le code sémantique affecte directement la quantité de code HTML. Moins il y a de code, plus le document est « léger », ce qui signifie que les pages Web se chargent plus rapidement et nécessitent moins de code. mémoire vive du côté de l'utilisateur. Le site devient plus rapide et moins cher.
- ordinateurs, lecteurs d'écran pour qui les balises et leurs attributs sont importants, lire et comprendre correctement le contenu d'une page Web.
- code sémantique toutes choses égales par ailleurs, apparaîtra plus haut dans les résultats des moteurs de recherche qu’une page avec un code non sémantique.
Vignette
Pour mettre le texte en gras et attirer l'attention sur lui, nous utiliserons un élément en ligne . Il existe deux balises qui peuvent être utilisées pour mettre du texte en gras : les balises Et . Il est important de comprendre la différence sémantique entre eux.
Étiqueter sémantiquement utilisé pour donner plus d'importance au texte et constitue donc l'option la plus populaire pour le texte en gras. Étiqueter , en revanche, signifie sémantiquement la mise en évidence stylistique du texte, ce qui n'est pas toujours meilleur choix pour un texte digne d'attention. Vous devez évaluer la signification du texte pour lequel vous souhaitez définir la gras et sélectionner la balise appropriée. Même si les navigateurs les affichent exactement de la même manière, moteurs de recherche peut leur donner des significations différentes lors de l'analyse de la page.
Code HTML avec balises Et :
Attention: descente raide.
Ce sont les recettes Olivier Et vinaigrette.
Exemple : texte important et en gras
- Essayez-le vous-même "
Attention: descente raide. Ce sont les recettes Olivier Et vinaigrette.
Attention: descente raide.
Ce sont les recettes Olivier Et vinaigrette.
Texte en italique
Pour le texte en italique, qui met ainsi l'accent, nous utiliserons un élément en ligne . Comme pour les balises de texte en gras, il existe deux balises différentes qui définissent le texte en italique, chacune ayant sa propre signification sémantique.
Étiqueter utilisé pour souligner un morceau de texte - c'est l'option la plus populaire pour l'italique. Une autre option consiste à utiliser la balise , qui est utilisé simplement pour créer du texte en italique.
Code HTML avec balises Et :
je J'aime Mère patrie!
Nom Victoria signifie la victoire.
Mots clés Et
Étiqueter Diminue la taille de la police de un par rapport au texte normal. En HTML, la taille de la police est mesurée en unités arbitraires de 1 à 7, la taille moyenne du texte par défaut est de 3. Ainsi, l'ajout d'une balise réduit le texte d’une unité conventionnelle. Étiqueter au contraire, cela augmente la taille de la police de un par rapport au texte normal.
Code HTML avec balises Et :
C'est un texte normal.
Il s'agit d'un texte avec des lettres plus petites.
Il s'agit d'un texte avec des majuscules.
Exemple : police réduite et agrandie
- Essayez-le vous-même "
C'est un texte normal.
Il s'agit d'un texte avec des lettres plus petites.
Il s'agit d'un texte avec des majuscules.
Balise HTML
Étiqueter utilisé pour mettre en évidence ou mettre en évidence du texte en raison de sa pertinence dans son contexte. Un bon exemple est de mettre en évidence le mot que l'utilisateur recherchait dans le document. Généralement, dans les navigateurs, la couleur d'arrière-plan du texte à l'intérieur du conteneur est surligné en jaune comme un marqueur à encre.
Balise HTML
Étiqueter utilisé pour mettre en évidence le texte qui a été supprimé dans une nouvelle version du document. Ce formatage vous permet de suivre les modifications qui ont été apportées au texte révisé du document. Les navigateurs marquent généralement le texte dans un conteneur comme barré
.
Balise HTML
Étiqueter conçu pour mettre en évidence le texte qui a été ajouté à nouvelle version document. Ce formatage vous permet de suivre quel élément de contenu a été ajouté pendant dernière mise à jour document. Les navigateurs marquent généralement le texte dans un conteneur .
Balise HTML
Étiqueter affiche le texte en indice. Le texte est situé sous la ligne de base des caractères restants de la ligne et est de taille réduite. Un tel texte peut être utilisé en pratique, par exemple, pour écrire diverses formules. en indice .
Balise HTML
Étiqueter affiche le texte en exposant. Le texte apparaît plus petit et plus haut que la ligne de base du reste des caractères de la ligne. Un tel texte peut être utilisé dans la pratique, par exemple pour écrire diverses formules ou notes de bas de page. en exposant .
Sauts de ligne et lignes horizontales
Étiqueter
(traduction de ligne)
Comme vous l'avez vu précédemment, la balise
Vous permet de séparer logiquement et physiquement un paragraphe de texte d'un autre, mais que faire si vous devez déplacer du texte dans un paragraphe vers nouvelle ligne? Une seule balise est conçue spécifiquement à ces fins.
. L'une des différences visibles entre cette balise et
L'absence d'indentation après et avant l'étiquette
. Cela permet de rapprocher les lignes de texte adjacentes. La possibilité de déterminer indépendamment l'emplacement du transfert peut être utile lors de l'enregistrement de poésie ou pour séparer divers éléments d'un document. Ajouter un élément
sur n'importe quelle ligne où vous souhaitez interrompre le flux de texte et insérer un saut de ligne.
Étiqueter
(ligne horizontale)
Les lignes horizontales vous permettent de diviser un texte long et formellement ouvert en sous-sections distinctes. Les lignes horizontales dans un document Web jouent le même rôle que les rayures ornementales dans les publications imprimées. Une seule balise permet d'insérer une ligne horizontale
. Cette balise bloc unique permet d'insérer une barre horizontale dont la largeur est soit toute la largeur du conteneur dans lequel la balise est imbriquée, soit la largeur de la fenêtre du navigateur.
Exemple : sauts de ligne et lignes horizontales
- Essayez-le vous-même "
Ces lignes sont séparées les unes des autres par un paragraphe (p) :
Ceci est le premier paragraphe.
C'est le deuxième paragraphe.
Voici la ligne :
Ces lignes sont séparées les unes des autres par la balise br :
Notre Tanya pleure fort
J'ai laissé tomber une balle dans la rivière
Code HTML avec balises
,
,
,
,
:
Le texte contient le mot : chance.
Mot inquiéter a été supprimé du texte.
Mot la victoire a été ajouté au texte.
Formule de l'eau : N 2 O.
Vitesse du vent : 20m 3/seconde.
Exemple : formatage du texte
- Essayez-le vous-même "
Il y a un mot dans le texte : chance. Le mot problème a été supprimé du texte. Le mot a été ajouté au texte. Formule de l'eau : H 2 O. Vitesse du vent : 20m 3 /sec.
Le texte contient le mot : chance.
Mot inquiéter a été supprimé du texte.
Mot la victoire a été ajouté au texte.
Formule de l'eau : N 2 O.
Vitesse du vent : 20m 3/seconde.
Tâches
Tache finale
Dans cette leçon, vous avez découvert les éléments conçus pour marquer de petites phrases et des mots individuels. Une attention particulière a été portée à la disposition logique du texte à l'aide de balises pour indiquer l'importance d'un mot ou d'une phrase, et pas seulement au formatage visuel.
Il est temps de revoir ce que vous avez appris et d'effectuer cinq tâches simples :
Mot sémantiquement fort
- Décider vous-même"
Mettez en surbrillance le mot « professionnel » en gras, indiquant ainsi l'importance sémantique particulière de ce mot.
Vous devez devenir un professionnel dans votre domaine
Tu dois devenir professionnel votre entreprise
Accent mis sur le mot
- Décider vous-même"
Insistez sur le mot « complet ». Dans ce cas, visuellement ce mot doit être affiché en italique.
L'alignement du texte le détermine apparence et l'orientation des bords du paragraphe et peut être à gauche, à droite, centré ou justifié. Dans le tableau La figure 1 montre les options d'alignement d'un bloc de texte.
| Alignement à gauche | Alignement à droite | Alignement central | Justification |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
L'option la plus courante est l'alignement à gauche, où le texte de gauche est poussé vers le bord tandis que le texte de droite reste irrégulier. L’alignement à droite et au centre est principalement utilisé dans les titres et sous-titres. Gardez à l’esprit que lors de l’utilisation de la justification, de grands espaces peuvent apparaître entre les mots du texte, ce qui n’est pas très attractif.
La balise de paragraphe est généralement utilisée pour définir l'alignement du texte
Avec l'attribut align, qui spécifie la méthode d'alignement. Il est également possible d'aligner un bloc de texte à l'aide d'une balise
| Code HTML | Description |
|---|---|
| Ajoute un nouveau paragraphe de texte, aligné à gauche par défaut. De petits retraits verticaux sont automatiquement ajoutés avant et après les paragraphes. | |
Texte |
Alignement central. |
Texte |
Alignement à gauche. |
Texte |
|
Texte |
Alignement en largeur. |
| Désactive le retour à la ligne automatique, même si le texte est plus large que la fenêtre du navigateur. | |
| Texte |
Permet au navigateur de couper une ligne à l'emplacement spécifié, même si une balise est utilisée |
Texte
|
Alignement central. |
Texte
|
Alignement à gauche. |
Texte
|
Bon alignement. |
Texte
|
Alignement en largeur. |
L'alignement à gauche des éléments est défini par défaut, il n'est donc pas nécessaire de le spécifier à nouveau. Donc align="left" peut être omis.
Différence entre paragraphe (balise
) et étiquette
L'attribut align est assez universel et peut être appliqué non seulement au texte principal, mais également à des titres comme
. L'exemple 1 montre comment définir l'alignement dans un tel cas.
Exemple 1 : alignement du texte
Comment attraper un lion ?
Méthode de force brute
Nous divisons le désert en un certain nombre de zones élémentaires dont la taille coïncide avec les dimensions hors tout du lion, mais est plus petite que la taille de la cage. Ensuite, par simple recherche, nous déterminons la zone dans laquelle se trouve le lion, ce qui entraîne automatiquement sa capture.
Méthode de dichotomie
Nous divisons le désert en deux moitiés. Dans une partie il y a un lion, dans l’autre il n’y en a pas. Nous prenons la moitié dans laquelle se trouve le lion et la divisons à nouveau en deux. Nous répétons cela jusqu'à ce que le lion soit attrapé.
Le résultat de l'exemple est présenté sur la Fig. 1.
Riz. 1. Alignez le texte à droite et à gauche
DANS dans cet exemple Le titre est aligné au centre de la fenêtre du navigateur, le paragraphe en surbrillance est aligné à droite et le corps du texte est aligné à gauche.
Aimez-vous votre code CSS autant que moi ? Si c'est le cas, alors, bien sûr, efforcez-vous de faire en sorte qu'il se comporte non seulement et se sente bien, mais qu'il soit également beau.
J'espère que les outils décrits ci-dessous aideront votre code à se rapprocher de l'idéal.
1.Style soigné
Probablement le service le plus simple présenté dans la revue.L'outil n'a pas beaucoup d'options :
- Trier les propriétés par ordre alphabétique
- Tri des sélecteurs par ordre alphabétique (si « Organiser en toute sécurité » est coché, cette option n'est pas disponible)
- Possibilité de choisir le style de formatage : multiligne ou ligne unique
- Peut extraire les fichiers CSS connectés via l'importation dans le fichier principal et les traiter sans pitié
- Vous pouvez soumettre du code pour traitement en utilisant : un champ de texte, en téléchargeant un fichier ou en fournissant un lien CSS.
- Le résultat peut être obtenu sous forme de code CSS ou télécharger un fichier
2.FormatCSS
Malgré son apparence menaçante, l'instrument remplit bien ses fonctions, dont il dispose en grande quantité.
Vous pouvez configurer beaucoup de choses :
- placement des espaces/tabulations/nouvelles lignes,
- trier les propriétés et les noms des sélecteurs,
- conversion des noms de propriétés et des sélecteurs en minuscules, etc.
3. CleanCSS
Assez outil puissant, ce qui nous offre de nombreuses possibilités :
- Vous pouvez alimenter le CSS en copiant-collant dans le champ « CSS-Code » ou en lien vers le fichier de style
- Vous pouvez obtenir le résultat sous forme de texte ou de fichier
- L'utilisateur peut choisir parmi 4 types de formatage des sources : le code peut être optimisé pour la plus petite taille ou, à l'inverse, pour une meilleure lisibilité. Il est possible de définir un modèle de mise en forme dans le champ « Modèle personnalisé »
- Capable de combiner des règles et de réduire les enregistrements de propriété à une forme courte
- Si nécessaire, supprimez les commentaires et les définitions invalides
- Comme les services décrits ci-dessus, il triera volontiers tout ce que votre cœur désire par ordre alphabétique et le convertira en minuscules/majuscules.
UPD> Dans les commentaires, ils ont suggéré un lien vers le jumeau de ce service : CodeBeautifier. L'ensemble des fonctions est presque identique à CleanCSS (le service fonctionne également sur CSSTidy).
4.ProCSSor
À mon avis, c'est le plus pratique de tous ceux présentés dans cette revue.
Le service accueille l'utilisateur avec une interface agréable et des astuces pop-up très claires qui permettent de comprendre rapidement les paramètres.
Comme tout embellisseur qui se respecte, ProCSSor acceptera le code de notre part dans le champ de saisie, sous forme de fichier ou de lien. Il enverra le résultat au navigateur et affichera un lien pour télécharger le fichier.
L'outil dispose de suffisamment de paramètres pour plaire à presque tous les utilisateurs ; il n'est pas nécessaire de les lister ; sens spécial- Il vaut mieux essayer tout de suite.
Une fonctionnalité intéressante du service est possibilité de sauvegarder vos paramètres, afin que la prochaine fois, vous puissiez ignorer l'étape de configuration et passer directement au processus de raffinage.
Une autre attraction - ProCSSor fournit une API, la documentation peut être trouvée ici :
La tâche principale du formatage est de rendre le texte lisible et compréhensible dans sa structure. Il existe même des guides complets sur la façon de formater les codes, où sont décrits des détails tels que le nombre d'espaces ou l'indentation des accolades. En fait, tout est beaucoup plus simple - il suffit amplement que le code soit visuellement lisible, et les espaces ou tabulations sont une affaire mineure.
Cependant, ce que je veux souligner, c'est que si vous souhaitez publier du code pour d'autres personnes, vous devrez adhérer à une sorte de « norme de base ».
Blocage du rembourrage
Chaque bloc imbriqué doit avoir plus de marge gauche que son parent.
Autrement dit, nous construisons une hiérarchie visuelle de balises facile à parcourir. Comparez avec le « style plat » :
Moderne éditeurs de texte, par exemple, Notepad++ crée automatiquement une telle indentation par Entrée, ce qui élimine complètement le problème de leur organisation manuelle. Habituellement, les codeurs créent d'abord une balise d'ouverture et de fermeture, puis la décomposent en lignes avec Entrée. Cela garantit que la balise d'ouverture a toujours une balise de fermeture.
Blocs "Fermeture"
Il peut y avoir une situation dans votre code où les blocs se succèdent toujours immédiatement. Dans ce cas, vous n’avez pas besoin de les séparer ni de faire un retrait supplémentaire.
Dans cet exemple, div.layout-center-wrap contient toujours un enfant immédiat de div.layout-wrap sans interruption. De tels blocs peuvent être visuellement visualisés comme un seul. Voici un autre exemple où des blocs peuvent être placés au même niveau.
L’essentiel ici est de ne pas en faire trop : vous ne devez pas placer plus de 2-3 blocs sur une ligne/niveau. Si du texte ou du code est placé entre des blocs, ils doivent absolument être placés sur des lignes différentes.
Ce formatage n'est pas adapté. La bonne manière serait :
Espace ou tabulation
Cela n'a pas d'importance. Utilisez ce que vous préférez. Autant que je sache, presque tous les codeurs utilisent la tabulatrice, tout simplement parce qu'elle ne nécessite qu'une seule pression sur la touche Tab.
Si vous le faites avec des espaces, alors pour chaque retrait, vous devez appuyer sur 4 espaces. Problème commun Le problème est que par erreur, vous pouvez appuyer non pas sur 4, mais sur 3, 5 ou sur un autre chiffre, et dans ce cas, vous devez soit compter les frappes, soit contrôler visuellement le résultat.
À cet égard, la tabulatrice est beaucoup plus « fiable ». D'un point de vue technique, peu importe qu'il s'agisse d'une tabulation ou d'espaces (le code HTML sera quand même compressé).
Utiliser plusieurs espaces revient à simuler une tabulatrice. Cette question relève donc du domaine de la convivialité. Mais si vous décidez d'utiliser des espaces, alors il doit y avoir 4 caractères pour chaque indentation, sinon le texte perd en lisibilité. Il existe des guides où il est recommandé de mettre 2 espaces, mais pour moi, un tel code est visuellement « négligent ».
Majuscule et minuscule
Si nous parlons de HTML, alors toutes les balises doivent être en minuscules. Techniquement, encore une fois, cela n’a pas d’importance, mais les majuscules sont difficiles à lire. Par conséquent, toutes les balises et leurs attributs sont écrits strictement en minuscules.
Si nous parlons de langages de programmation, ils sont généralement sensibles à la casse, les majuscules ne sont donc utilisées que lorsque cela est nécessaire.
Guillemets simples et doubles
Les guillemets doubles sont presque toujours utilisés. Lors de l'intégration de code JS dans une page HTML, une situation peut survenir dans laquelle deux types de guillemets sont requis :
Dans cet exemple, l'attribut html est entouré de guillemets doubles et des guillemets simples sont déjà utilisés dans le code js. Il est impossible d'utiliser un seul type.
Par conséquent, la règle sur les guillemets en HTML et CSS simple: les guillemets principaux sont doubles, et s'ils manquent, alors nous utilisons des guillemets simples.
Balises de fermeture facultatives
C'est simple ici - nous le définissons toujours. Ceci s'applique aux balises P, LI et autres.
Barre oblique à la fin des balises simples
Nous ne le faisons jamais. Il s'agit d'une relique de l'ancien standard XHTML. Tellement faux:
Tellement vrai:
Ordre des attributs dans les balises
La classe est toujours répertoriée en premier. En fait, lors de l'analyse de la mise en page, la balise et ses classes sont toujours examinées, puis le reste des attributs.
Il est préférable de spécifier les attributs qui peuvent être uniques (comme requis) en dernier :
Les classes/attributs vides doivent être supprimés.
Formatage du code CSS
La classe est placée sur une ligne séparée et ouvre un bloc de propriétés (()). Il y a un espace après la propriété deux-points. Chaque propriété est placée sur une ligne et est toujours suivie d'un point-virgule (;).
Étiquette T (couleur : blanc ; arrière-plan : bleu ; taille de police : .75rem ; remplissage : 1px 10px ; rayon de bordure : 3px ; )
Si plusieurs classes sont spécifiées à la fois, elles sont placées sur des lignes distinctes :
Article, aparté, pied de page, en-tête, navigation, section ( display: block; )
Si la classe est courte et consiste en une propriété, alors elle peut être placée sur une seule ligne :
W100-max (largeur maximale : 100 % ; ) .w-hide ( affichage : aucun ; ) .w-auto ( largeur : auto ; )
Les unités de mesure ne sont pas écrites pour les zéros (là où cela n'a pas d'importance), au lieu de 0px vous devez simplement indiquer 0 .
U nombres fractionnaires avec zéro, au lieu de 0,8em il vaut mieux préciser .8em . Cependant, cette condition n'est pas obligatoire et vous pouvez utiliser n'importe quelle option, l'essentiel est qu'il y ait une uniformité au moins au niveau d'un fichier CSS.
Si la propriété prend en charge la notation abrégée, elle peut être utilisée, par exemple, à la place de margin : 0 20px 0 20px; vous pouvez spécifier la marge : 0 20px ;
Si la valeur de couleur peut être raccourcie, cela peut être fait, par exemple, au lieu de #FFAA88, spécifiez #FA8 . Ici point important Le problème est que souvent cette couleur n'est pas définie manuellement, mais copiée à partir de programmes de pipettes. Ils utilisent habituellement dossier complet de 6 chiffres. De plus, certains programmes donnent des lettres minuscules et d'autres des majuscules : #FFAA88 ou #ffaa88 . Par conséquent, toute option convient pour définir la couleur. Changer manuellement la casse des lettres à chaque fois est stupide.
Les noms de couleurs des lettres doivent être utilisés avec prudence et il est préférable de les utiliser uniquement pendant la phase de prototypage. Dans le code résultant, il est préférable de les remplacer par valeurs hexadécimales, par exemple, au lieu de color: red; vous devez spécifier la couleur : #F00 ; . Cette approche vous permettra de changer la couleur directement dans un éditeur de code comme Notepad++ (il réagit au symbole #).
L'ordre des propriétés CSS peut être quelconque. Vous pouvez les classer par ordre d'addition, vous pouvez les regrouper par fonctionnalité. Techniquement, l'ordre peut être quelconque, il n'y a donc pas de règles ici.
Il faut comprendre que le formatage du code CSS est purement une convention. En réalité, ce code sera compressé et minifié par le compilateur Sass. Si vous avez besoin de le formater pour le visualiser, personne sensé ne le fera manuellement : il existe des dizaines de services en ligne permettant de formater magnifiquement le code avec n'importe quel paramètre. Par conséquent, le formatage CSS n’est requis qu’au stade du développement.
Parfois, notre code n'est pas toujours parfait. Et je veux vraiment qu'il soit non seulement fonctionnel, mais aussi magnifiquement conçu et formaté. Le temps est notre principal ennemi ; il nous permet rarement de suivre les règles de conception du code. Nous essayons de terminer rapidement la mise en page, ou de décrire une douzaine de styles CSS, et nous le faisons au détriment de la lisibilité. Dans cet article, je vais vous proposer une liste de services qui vous aideront à formater votre code pour qu'il soit agréable à regarder.
Faut-il faire confiance au programme ou tout faire manuellement ?
Vous avez sûrement une question : comment rendre le code lisible ? Un programme peut-il organiser correctement tous les retraits et sauts de ligne de manière à ce que l'œil humain ne reçoive qu'un plaisir esthétique en visualisant le code ? Bien sûr que c’est possible ! Ne vous y trompez pas : puisqu’un robot fait essentiellement le travail à votre place, il le fera « sale ». Les services qui seront présentés dans l'article ci-dessous m'ont sauvé plus d'une fois. Par exemple, dans les situations où il était nécessaire de copier le même Code HTML depuis un autre site, et une fois insérées, les balises se sont avérées simplement disposées dans un ordre chaotique le long des lignes : beaucoup d'onglets, des sauts de ligne non logiques, absolument aucune imbrication n'est visible ! Cela est probablement familier à beaucoup. Et je veux vraiment que votre site Web soit différent : soigné et facile à lire. Après tout, tout d'abord, nous le faisons pour nous-mêmes, pour faciliter une prise en charge ultérieure de tel ou tel code.
Formatons votre code
Parlez moins, travaillez plus. Comme le montre la pratique, le formatage du code en ligne est assez simple. Tout ce que vous avez à faire est de copier votre code sale et de le coller dans les champs de texte spéciaux de l'un des sites spécifiés. Appuyez ensuite sur le bouton, attendez un peu et voilà ! Vous obtenez un code beau, formaté et facile à lire.
Voici une liste de tous les codes "purificateurs" que je connais pour différentes langues.
