телевизори. Конзоли. Проектори и аксесоари. Технологии. Цифрова телевизия

Кодиране. Заместващи шифри - образователна и научна дейност на Владимир Викторович Анисимов Извънземна азбука от "Футурама"

Семантика(фр. semantique от старогръцки σημαντικός - обозначаващ) - наука за разбиране на определени знаци, последователности от символи и други символи. Тази наука се използва в много области: лингвистика, проксемика, прагматика, етимология и др. Не мога да си представя какво означават тези думи и какво правят всички тези науки. И няма значение, интересувам се от въпроса за използването на семантика в оформлението на уебсайта.

Бележката

Тук няма да засягам термина семантичен уеб. На пръв поглед може да изглежда, че темите Semantic Web и семантичният HTML код са почти едно и също нещо. Но всъщност семантичният уеб е по-скоро философска концепция и няма много общо с настоящата реалност.

Семантично оформление - какво е това?

В даден език всяка дума има специфично значение и цел. Когато казвате „наденица“, имате предвид хранителен продукт, който представлява мляно месо (обикновено месо) в продълговата обвивка. Накратко, имате предвид наденица, а не мляко или зелен грах.

HTML също е език, неговите „думи“, наречени тагове, също имат определено логическо значение и цел. Поради тази причина преди всичко семантичният HTML код е оформление с правилния използвайки HTMLетикети, използвайки ги по предназначение, както са ги предвидили разработчиците HTML езики уеб стандарти.

microformats.org е общност, която работи, за да вдъхне живот на идеалистичните идеи на семантичния уеб, като доближи оформлението на страницата до същите тези семантични идеали.

Защо и кой изобщо се нуждае от семантично оформление?

Ако информацията на моя уебсайт се показва по същия начин, както в дизайна, защо си правите труда да си мъчите мозъка и да мислите за някаква семантика?! Един и същ допълнителна работа! Кому е нужно това?! Кой ще оцени това освен друг дизайнер на оформление?

Често съм чувал такива въпроси. Нека да го разберем.

Семантичен HTML за уеб разработчици

Семантичен код за потребителите

Увеличава достъпността на информацията в сайта. На първо място, това е важно за алтернативни агенти като:

  • семантичният код пряко влияе върху количеството HTML код. По-малко код -> по-леки страници -> зареждане по-бързо, по-малко изискване оперативна паметот страна на потребителя, по-малко трафик, по-малък размер на базата данни. Сайтът става по-бърз и по-евтин.
  • гласови браузъриза които таговете и техните атрибути са важни, за да произнасят съдържанието правилно и с правилната интонация или, обратно, да не казват твърде много.
  • мобилни устройствакоито не поддържат напълно CSS и следователно разчитат основно на HTML код, показвайки го на екрана според използваните тагове.
  • печатащи устройствадори и без допълнителен CSS, информацията ще бъде отпечатана с по-добро качество (по-близо до дизайна), а създаването на идеалната версия за печат ще се превърне в няколко лесни манипулации с CSS.
  • Освен това има устройства и добавки, които ви позволяват бързо да навигирате в документ - например по заглавия в Opera.

Семантичен HTML за машини

Търсачките непрекъснато подобряват своите методи за търсене, за да гарантират, че резултатите съдържат информацията, която искате. наистина изглеждащпотребител. Семантичният HTML улеснява това, защото... поддава се на много по-добър анализ - кодът е по-чист, кодът е логичен (можете ясно да видите къде са заглавията, къде е навигацията, къде е съдържанието).

Доброто съдържание плюс висококачественото семантично оформление вече е сериозно приложение добри позиции в резултатите на търсачката.

Семантиката на HTML кода винаги е гореща тема. Някои разработчици се опитват винаги да пишат семантичен код. Други критикуват догматичните привърженици. А някои дори нямат представа какво е и защо е необходимо. Семантиката е дефинирана в HTML в тагове, класове, идентификатори и атрибути, които описват целта, но не уточняват точното съдържание, което съдържат. Тоест, говорим за разделяне на съдържанието и неговия формат.

Да започнем с един очевиден пример.

Лоша семантика на кода

Заглавие на статията
И авторът
Инко Гнито.

Добра семантика на кода

Заглавие на статията

Текстът на статия, която е написана от някого. Инко Гнито- неговият автор.

Независимо дали смятате, че HTML5 е готов за употреба или не, използването на

в този случай ще бъде по-привлекателен от обикновено
указващ класа. Заглавието на статията става заглавие, съдържанието става параграф, а удебеленият текст става етикет. .

Но не всичко е представено толкова ясно от HTML5 тагове. Нека да разгледаме набор от имена на класове и да видим дали отговарят на семантичните изисквания.

Не семантичен код.Това е класически пример. Всеки CSS grid workbench използва тези типове имена на класове, за да дефинира мрежови елементи. Независимо дали е "yui-b", "grid-4" или "spanHalf" - такива имена са по-близо до уточняване на маркиране, отколкото до описание на съдържание. Използването им обаче е неизбежно в повечето случаи при работа с модулни мрежови шаблони.

Семантичен код.Долният колонтитул придоби силно значение в уеб дизайна. Това е долната част на страницата, която съдържа елементи като повтаряща се навигация, права за използване, информация за автора и т.н. Този клас дефинира група за всички тези елементи, без да ги описва.

Ако сте преминали към използване на HTML5, тогава е по-добре да използвате елемента

в такива случаи. Забележката важи и за всички други части на уеб страницата (заглавката трябва да бъде
, страничен панел -
Свързани публикации