Важливим принципом у веб-дизайні є ідея використовувати елементи HTML, щоб вказати, що вони насправді, а не те, як вони можуть відображатися в браузері за замовчуванням. Це відомо як використання семантичного HTML.
Що таке семантичний HTML?
Семантичний HTML або семантична розмітка - це HTML, який приносить сенс у веб-сторінку, а не просто в уявлення. Наприклад, тег < p > вказує, що вкладений текст є абзацем. Це і семантика, і презентація, тому що люди знають, що таке абзаци, а браузери знають, як їх відображати.
З іншого боку, такі теги, як < b > та < i >, не є семантичними. Вони визначають тільки те, як повинен виглядати текст (напівжирний або курсив), і не дають ніякого додаткового значення для розмітки.
Приклади семантичних тегів HTML включають в себе:
- Мітки заголовка від < h1 > до < h6 >
- <BLOCKQUOTE>
- < Код >
- <EM>
При створенні веб-сайту, що відповідає стандартам, можна використовувати набагато більше семантичних тегів HTML.
Чому ви повинні піклуватися про семантику
Перевага написання семантичного HTML пов'язана з тим, що має бути головною метою будь-якої веб-сторінки: бажання спілкуватися. Додаючи семантичні теги до документа, ви надаєте додаткову інформацію про цей документ, яка допомагає спілкуватися. Зокрема, семантичні теги дають зрозуміти браузеру, яке значення сторінки та її вмісту. Ця ясність також повідомляється з пошуковими системами, гарантуючи, що правильні сторінки доставляються для правильних запитів.
Семантичні теги HTML надають інформацію про вміст цих тегів, яка виходить за рамки того, як вони виглядають на сторінці. Текст, укладений у тег < code >, негайно розпізнається переглядачем як певний тип мови кодування. Замість того, щоб намагатися відобразити цей код, браузер розуміє, що ви використовуєте цей текст як приклад коду для цілей статті або онлайн-підручника.
Використання семантичних тегів дає вам набагато більше можливостей для стилізації вашого контенту. Можливо, сьогодні ви вважаєте за краще, щоб приклади коду відображалися в стилі браузера за замовчуванням, але завтра ви можете викликати їх з сірим фоном; пізніше, можливо, ви захочете визначити точне сімейство моно-просторових шрифтів або стек шрифтів, які будуть використовуватися для ваших зразків. Ви можете легко робити все це, використовуючи семантичну розмітку і грамотно застосований CSS.
Правильне використання семантичних тегів
Якщо ви використовуєте семантичні теги для передачі значення, а не цілі відображення, будьте обережні, щоб не використовувати їх неправильно просто для загальних властивостей відображення. Деякі з найбільш часто неправильно використовуваних семантичних тегів включають в себе:
- blockquote - деякі люди використовують тег < blockquote > для відступу тексту, який не є цитатою. Це тому, що типові цитати мають порожні. Якщо ви просто хочете зробити порожній для тексту, який не є лапкою, скористайтеся замість цього поля CSS.
- p - Деякі веб-редактори використовують < p > & nbsp; </p > (нерозривний пробіл, що міститься в абзаці), щоб додати додатковий простір між елементами сторінки, а не визначати фактичні абзаци для тексту цієї сторінки. Як і в попередньому прикладі, ви повинні використовувати замість цього властивість margin або padding style, щоб додати пробіл.
- ul - Як і у випадку < blockquote >, текст, укладений у тег < ul >, відступає від тексту у більшості переглядачів. Це і семантично неправильний, і некоректний HTML, оскільки у теґі < ul > є допустимими лише теги < li >. Знову ж таки, скористайтеся відступом або стилем для відступу тексту.
- h1, h2, h3, h4, h5 і h6 - ви можете використовувати теги заголовків, щоб зробити шрифти більш великими і жирними, але якщо текст не є заголовком, використовуйте замість цього CSS-властивості font-weight і font-size.
Використовуючи HTML-теги, які мають значення, ви створюєте сторінки, які передають більше інформації, ніж ті, які просто оточують всі тегами < div >.
Які HTML-теги є семантичними?
Хоча майже кожен тег HTML4 і всі теги HTML5 мають семантичне значення, деякі теги є переважно семантичними.
Наприклад, HTML5 перевизначив значення тегів < b > та < i > як семантичне. Тег < b > не має особливої важливості; текст з тегами зазвичай відображається жирним шрифтом. Аналогічно, тег < i > не має особливої важливості або акценту; швидше він визначає текст, який зазвичай відображається курсивом.
