![\"\"](\"https:\/\/apaddedcell.com\/wp-content\/uploads\/2022\/04\/image-8.png\")
<\/figure><\/div>\n\n\n\nThe developers of tutu.ru have made a table with the tag table instead of div, and their snippet ended up in the Google search for an important commercial query.<\/p>\n\n\n\n
Semantics is prescribed in the standards.\u00a0<\/strong>Many developers in the old fashioned way use constructs like <div id=”nav”> to denote navigation or other structural elements of the page. Meanwhile, there are several semantic tags in the HTML standard that are recommended for page markup instead of\u00a0 Imagine how much easier it is to read\u00a0 Some of the “old” tags from earlier versions of HTML are also semantic, like the But the current version of the HTML Living Standard has semantic tags for almost all major parts of the site, and it is better to use them. Here are some examples of semantic tags.<\/p>\n\n\n\n The marking process can be divided into several steps with varying degrees of detail.<\/p>\n\n\n\n <\/p>\n\n\n\n There are simple rules for choosing the right tags.<\/p>\n\n\n\n Found the most appropriate meaningful tag – use it.<\/p>\n\n\n\n Don’t use semantic tags for embellishments. That’s what CSS is for.<\/p>\n\n\n\n It may seem that some tags are appropriate to make the page prettier, to move the text around, or to add spacing to it. But just because the browser defaults to displaying tags the way you want them doesn’t mean you have to use them. Let’s look at an example.<\/p>\n\n\n\n There are several mistakes here at once:<\/strong><\/p>\n\n\n\n And any selection, shift or other transformation of text can be done with CSS.<\/p>\n\n\n\n So use semantic tags for their intended purpose.<\/p>\n\n\n\n<div><\/code>\u00a0\u0438\u00a0span<\/code>.\u00a0The specification describes the role of each semantic element.<\/p>\n\n\n\n<nav><\/nav><\/code>\u00a0Instead of\u00a0<div class=\"nav\"><\/div><\/code>. Or this code. See it and you’ll immediately understand what’s here and why.<\/p>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"ru\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <title>Page Title<\/title>\r\n <\/head>\r\n <body>\r\n <header class=\"main-header\">\r\n <!\u2014 Site cap \u2014>\r\n <\/header>\r\n <main>\r\n <!\u2014 Main content of the page \u2014>\r\n <\/main>\r\n <footer class=\"main-footer\">\r\n <!\u2014 Site basement \u2014>\r\n <\/footer>\r\n <\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nBasic HTML semantic tags<\/h2>\n\n\n\n
tag, which stands for paragraph. The tags\u00a0<i><\/code>\u00a0or\u00a0<b><\/code>\u00a0not semantic, because they do not add meaning to the highlighted text, but simply define its appearance.<\/p>\n\n\n\n<article><\/h3>\n\n\n\n
<section><\/code>\u00a0\u0438\u00a0<div><\/code>.<\/li><\/ul>\n\n\n\n<section><\/h3>\n\n\n\n
<article><\/code>\u00a0\u0438\u00a0<div><\/code>.<\/li><\/ul>\n\n\n\n<aside><\/h3>\n\n\n\n
<aside><\/code>\u00a0tag for the “sidebar” and mark with that tag the main content that is associated with the elements around it.<\/span><\/li><\/ul>\n\n\n\n<nav><\/h3>\n\n\n\n
<nav><\/code>. In the basement usually appears a short list of links (e.g., link to the main, copyright and terms and conditions) – this is not the main navigation, semantically for such information is intended.<\/span> In the basement usually appears a short list of links (e.g., link to the main, copyright and terms and conditions) – this is not the main navigation, semantically for such information is intended<footer><\/code> himself.<\/li><nav><\/code>\u00a0can only be a list of navigation links, but according to the specification there can be navigation in any form.<\/li><\/ul>\n\n\n\n<header><\/h3>\n\n\n\n
<main><\/h3>\n\n\n\n
<footer><\/h3>\n\n\n\n
How to mark up a page in terms of semantics<\/h2>\n\n\n\n
<header>, <main>, <footer><\/code>.<\/li><nav>, <section>, <article>, <aside><\/code>.<\/li><h1>-<h6><\/code>.<\/li>I’m not sure what tags to use<\/h2>\n\n\n\n
<div><\/code>.<\/li><span><\/code>.<\/li><article>, <section><\/code>\u00a0\u0438\u00a0<div><\/code>:<\/li><\/ul>\n\n\n\n<article><\/code><\/li><section><\/code><\/li><div><\/code><\/li><\/ol>\n\n\n\nExactly what not to do<\/h2>\n\n\n\n
![\"\u041a\u0430\u043a](\"https:\/\/assets.htmlacademy.ru\/img\/blog\/1063\/example1.png\")
<\/figure>\n\n\n\n<blockquote><\/code>\u00a0should be used to highlight citations in text, not just random text selection. It just so happens that browsers have this block highlighted by default, but that doesn’t mean you have to use it that way.<\/li><ul><\/code>\u00a0is also used to visually “shift” the text. This is incorrect, because this tag should only be used to denote lists, and second, the tag\u00a0<ul><\/code>\u00a0only tags can be inserted\u00a0<li><\/code>\u00a0and nothing else.<\/li><p><\/code>\u00a0is used to visually expand the text. This tag is actually used to highlight paragraphs.<\/li><\/ol>\n\n\n\n