Compétences HTML : sémantisez votre code _HTML/Xhtml_Production de pages Web

La sémantique HTML semble être un problème courant. Si vous effectuez une recherche sur Google, il existe de nombreux articles sur la sémantique. Pourquoi les balises sémantiques, je pense de cette façon : chaque balise HTML a sa signification spécifique, et les balises sémantiques, c'est-à-dire. nous utilisons des balises appropriées aux endroits appropriés pour mieux comprendre à la fois les personnes et les machines (la machine peut le comprendre comme un navigateur et peut le comprendre comme un moteur de recherche). Si mon explication n'est pas assez claire, veuillez Google

.

Comment utiliser les bonnes balises au bon endroit ?
Il s'agit d'une logique simple à comprendre. Par exemple, les balises h1~h6 sont pour les classes de titre ; ul est pour les listes non ordonnées ; utilisé pour les listes remplies ; dl est utilisé pour définir les listes ; em, les balises fortes sont utilisées pour l'accentuation... Pour parler franchement, chaque interprétation anglaise de la balise HTML détermine sa sémantique (plus loin dans cet article, je mettrai un tableau de comparaison des définitions anglaises des balises HTML couramment utilisées pour référence).
Qu'est-ce qui est clair à la fois pour les humains et les machines
La meilleure façon de vérifier si une page HTML est sémantique est de supprimer le Css sur la page et voyez si la structure de la page Web est en ordre et si la page est toujours très lisible. Pourquoi pouvez-vous dire cela Tout le monde sait que les navigateurs ont des styles par défaut (il est recommandé d'utiliser Chrome ? Web Developer Tools for Chrome plug-in, ou le plug-in Web Developer de Firefox), tel que h1~h6, sera en gras/ Le la taille de la police diminue de manière séquentielle, et les styles par défaut pour les marges supérieure et inférieure, ul, ol et dl ont tous des puces par défaut, et strong a un style gras par défaut... Par conséquent, sur la même page, du HTML avec une bonne sémantique peut être supprimé de la page Css Il fonctionne toujours bien. Un autre point est qu'un bon codage sémantique est plus convivial pour les moteurs de recherche. Les robots de recherche ne connaissent pas votre CSS, mais ils peuvent reconnaître les balises HTML

Ce qui suit. est un exemple simple :

Copiez le codeLe code est le suivant :

Le blog de M. Think<. ;/div>

Un homme ordinaire qui se concentre sur la technologie Web frontale, aime Php et prône une vie simple.

;

Le blog de Mr.Think

Les gens ordinaires qui se concentrent sur la technologie Web frontale, aiment Php et prônent une vie simple.

Grâce à l'exemple simple ci-dessus et au rendu sans aucune définition CSS, il est temps de comprendre la différence entre les deux. Si vous apprenez le HTML5, son en-tête, son pied de page, sa barre latérale, son article et d'autres éléments sont tous de nouvelles balises sémantiques ajoutées.
La sémantique du codage HTML est une étape vers un développement front-end de haute qualité. Cela signifie un meilleur respect des normes Web, et cela peut également maintenir vos pages en ordre après la suppression des styles. Pour une introduction plus détaillée, vous pouvez Google. ou lisez le "La voie du développement Web Front-End" d'Adang Chapitre 3.
Pièce jointe : Tableau de comparaison de la sémantique des balises en chinois et Anglais

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量