Міркування про семантику коду HTML з прикладами. Кодування джедайського алфавіт з "Зоряних воєн"

Міркування про семантику коду HTML з прикладами. Кодування джедайського алфавіт з "Зоряних воєн"

Веб-дизайнери і розробники люблять кидатися жаргонами і незрозумілими фразами, які нам іноді складно зрозуміти. У цій статті мова піде про семантичному коді. Давайте розберемося, що ж це таке!

Що таке семантичний код?

Навіть якщо ви не веб-дизайнер, ви напевно знаєте, що ваш сайт був написаний в HTML. HTML був спочатку призначений як засіб описують зміст документа, а не як засіб, щоб зробити вигляд візуально приємним. Семантичний код повертається до цієї оригінальної концепції і закликає веб-дизайнерів писати код, який визначає зміст, а не те як воно має виглядати. Наприклад, заголовок сторінки може бути запрограмований таким чином:

Це заголовок сторінки

Це зробило б назва великим і жирним, надаючи йому вигляд заголовка сторінки, але в ньому немає нічого, що описує його як "заголовок" в коді. Це означає, що комп'ютер не може визначити це як заголовок сторінки.

При написання назви семантично для того, щоб комп'ютер розпізнавав його як "заголовок", ми повинні використовувати наступний код:

це заголовок

Зовнішній вигляд заголовка може бути визначений в окремому файлі, який називається "каскадні таблиці стилів" (CSS), при цьому не втручаючись в ваш описовий (семантичний) код HTML.

Чим важливий семантичний код?

Можливість комп'ютера правильно розпізнавати контент важливо з кількох причин:

  • Багато слабозорі люди покладаються на мовні браузери для читання сторінок. Такі програми не зможуть точно інтерпретувати сторінки, якщо вони не були чітко роз'яснено. Іншими словами, семантичний код служить засобом доступності.
  • Пошукові системи повинні розуміти про що ваш контент, для того щоб правильно ранжувати вас в пошукових системах. У семантичного коду є репутація щодо поліпшення ваших розміщень в пошукових системах, так як його легко розуміють "пошукові роботи".

Також у семантичного коду є й інші переваги:

  • Як ви бачите з наведеного вище прикладу, семантичний код коротше, а завантаження швидше.
  • Семантичний код полегшує поновлення на сайті, так як ви можете застосовувати стилі до заголовків по всьому сайті, а не посторінково.
  • Семантичний код простий для розуміння, тому, якщо новий веб-дизайнер підхоплює цей код, то йому буде легко його розібрати.
  • Оскільки семантичний код не містить елементи дизайну, то тоді змінити зовнішній вигляд веб-сайту можна без перекодування всього HTML.
  • Ще раз, тому що дизайн проводиться окремо від змісту, семантичний код дозволяє будь-якому охочому додати або редагувати сторінки без необхідності хорошого очі на дизайн. Ви просто описуєте зміст, а CSS визначає як це зміст буде виглядати.

Як переконатися в тому, що веб-сайт використовує семантичний код?

На даний момент не існує інструмента, який може перевірити наявність семантичного коду. Все зводиться до перевірки наявності в коді квітів, шрифтів або макетів, замість опису контенту. Якщо аналіз коду звучить страшнувато, то прекрасної відправною точкою буде питання до вашого веб-дизайнеру - кодує він дотримуючись семантику? Якщо він тупо на вас дивиться або починає безглузду балаканину, то тоді ви можете бути впевнені, що він не кодує даними способом. У цей момент ви повинні вирішити, надасте йому новий напрям в роботі, або знайдете собі нового дизайнера ?!

семантика (Фр. Sémantique від грец. Σημαντικός - позначає) - наука про розуміння певних знаків, послідовностей символів і інших умовних позначень. Ця наука використовується в багатьох галузях: лінгвістика, проксеміка, прагматика, етимологія і т.д. Ніяк не збагну, що ці слова означають і чим всі ці науки займаються. Та й не важливо, мене цікавить питання застосування семантики при верстці сайтів.

замітка

Тут не буду торкатися термін Семантичний веб. На перший погляд, може здатися, що теми Семантичний веб і семантичний HTML код - це майже одне і теж. Але насправді Семантичний веб поняття, досить філософське і з нинішньою реальністю має не так багато спільного.

Семантична верстка - що це?

У мові кожне слово має певний сенс, призначення. Коли ти говориш "ковбаса", ти маєш на увазі харчовий продукт, який представляє собою фарш (як правило, м'ясної) в довгастої оболонці. Коротше кажучи маєш на увазі ковбасу, а не молоко або зелений горошок.

HTML - це теж мова, його "слова", іменовані тегами, теж мають певний логічний зміст і призначення. З цього в першу чергу семантичний HTML код - це верстка з правильним використанням HTML тегів, Використанням їх за призначенням, так як їх задумували розробники мови HTML і веб стандартів.

microformats.org - спільнота, яка працює над втіленням ідеалістичних ідей Семантичного вебу в життя через зближення розмітки сторінок до тих самих семантичним ідеалам.

Навіщо і кому взагалі потрібна семантична верстка?

Якщо у мене на сайті інформація відображається так само як на дизайні, навіщо собі ще ламати мозок і думати про якусь семантиці ?! Це ж додаткова робота! Кому це потрібно ?! Хто це оцінить крім іншого верстальника?

Мені такі питання доводилося частенько чути. Давай розберемося.

Семантичний HTML для веб розробників

Семантичний код для користувачів

Підвищує доступність інформації на сайті. В першу чергу це має значення для альтернативних агентів таких як:

  • семантичний код безпосередньо впливає на обсяг HTML коду. Менше коду -\u003e легше сторінки -\u003e швидше вантажаться, менше потрібно оперативної пам'яті на стороні користувача, менше трафіку, менший обсяг баз даних. Сайт ставати швидше і менш витратним.
  • голосові браузери для яких важливі теги і їх атрибути, щоб вимовити правильно і з потрібною інтонацією вміст, або навпаки не вимовити зайвого.
  • мобільні пристрої що не на повну потужність підтримують CSS і тому орієнтуються в основному на HTML код, відображаючи його на екрані згідно використовуваним тегами.
  • принтери навіть без додаткового CSS надрукують інформацію якісніше (ближче до дизайну), а створення ідеальної версії для друку перетвориться в кілька легких маніпуляцій з CSS.
  • до того ж існують пристрої та плагіни, які дозволяють швидко переміщатися по документу - наприклад, по заголовкам у Opera.

Семантичний HTML для машин

Пошукові системи постійно вдосконалюють методи пошуку, щоб в результатах була та інформація, яку дійсно шукає користувач. Семантичний HTML сприяє цьому, тому що піддається набагато краще аналізу - код чистіше, код логічний (чітко видно де заголовки, де навігація, де вміст).

Хороший контент плюс якісна семантична верстка - це вже серйозна заявка на хороші позиції в ведучих пошукових систем.

Семантика коду HTML завжди є гарячим питанням. Деякі розробники намагаються завжди писати семантичний код. Інші критикують догматичних прихильників. А деякі навіть поняття не мають про те, що це таке і навіщо воно потрібне. Семантика визначається в HTML в тегах, класах, ID, і атрибутах, які описують призначення, але не задають точно зміст, яке в них укладено. Тобто мова йде про поділ змісту і його формату.

Почнемо з очевидного прикладу.

Погана семантика коду

заголовок статті
А автор
Інко гнити.

Хороша семантика коду

заголовок статті

Текст статті, який кимось написаний. Інко гнити - її автор.

Незалежно від того, чи вважаєте ви, що HTML5 готовий до використання чи ні, напевно використання тега

в даному випадком буде більш привабливим, ніж звичайний
із зазначенням класу. Назва статті стає заголовком, зміст стає параграфом, а виділений жирним шрифтом текст стає тегом .

Але не все так чітко представляється тегами HTML5. Давайте розглянемо набір імен класів і розберемося з тим, чи відповідають вони вимогам семантики.

Чи не семантичний код. Це класичний приклад. Кожна робоча середу CSS для модульної сітки використовує такого типу імена класів для визначення елементів сітки. Чи буде це "yui-b", "grid-4", або "spanHalf" - такі імена ближче до завдання розмітки, ніж до опису змісту. Однак їх використання в більшості випадків неминуче при роботі з шаблонами модульних сіток.

Семантичний код. Нижній колонтитул (footer) придбав стійке значення в веб дизайні. Це нижня частина сторінки, яка містить такі елементи як повторювана навігація, права використання, інформацію про автора і так далі. Даний клас визначає групу для всіх цих елементів без їх опису.

Якщо ви перейшли до використання HTML5, то краще застосовувати елемент

в таких випадках. Зауваження стосується і всіх інших частин веб сторінки (верхній колонтитул повинен бути
, бічна панель -
Це цікаво: