Почнемо з очевидного прикладу.
Погана семантика коду
Хороша семантика коду
Але не все так чітко представляється тегами HTML5. Давайте розглянемо набір імен класів і розберемося з тим, чи відповідають вони вимогам семантики.
Чи не семантичний код. Це класичний приклад. Кожна робоча середу CSS для модульної сітки використовує такого типу імена класів для визначення елементів сітки. Чи буде це "yui-b", "grid-4", або "spanHalf" - такі імена ближче до завдання розмітки, ніж до опису змісту. Однак їх використання в більшості випадків неминуче при роботі з шаблонами модульних сіток.
Якщо ви перейшли до використання HTML5, то краще застосовувати елемент
Семантичний код. В даному випадку мова йде про визначення рівня важливості елементу в інтерфейсі програми (наприклад, параграфа або кнопки). Елемент з більш високим рівнем може мати яскраві кольори і більший розмір, а елементи з низьким рівнем можуть містити більше змісту. Але точного визначення стилів в даному випадку немає, тому код є семантичним. Дана ситуація дуже схожа на використання тегів
. . . і так далі, але до інших елементів інтерфейсу.
. і так далі, але до інших елементів інтерфейсу.
Чи не семантичний код. В даному випадку мова йде про завдання стилю для першого параграфа на сторінці. Такий прийом використовується для залучення уваги читачів до матеріалу. Краще використовувати ім'я "intro", в якому відсутня згадка елемента. Але ще краще використовувати селектор для таких параграфів, наприклад article p: first-of-type або h1 + p.
Семантичний код. Клас дуже добре описує статус змісту. Наприклад, повідомлення про успішне завершення операції може мати зовсім інший стиль від повідомлення про помилку.
Чи не семантичний код. В даному прикладі є спроба поставити визначення формату змісту, а не його призначення. "Plain-jane" дуже схоже на "normal" або "regular". Ідеальний код CSS повинен бути написаний так, щоб не виникало необхідності в іменах класу на зразок "regular", які описують формат змісту.
Чи не семантичний код. Такого типу класи зазвичай використовуються для визначення елементів сайту, які не повинні включатися в ланцюжок посилань. В даному випадку краще використовувати щось на зразок rel = nofollow для посилань, але не клас для всього змісту.
Чи не семантичний код. Тут є спроба описати формат вмісту, а не його призначення.
Чи не семантичний код. Тег посилання сам по собі визначає її. Якщо в даному випадку була спроба виділити посилання серед інших, то краще використовувати опис типу "чому", наприклад, "book-link" або "button".
Припустимо, що у вас на сайті є дві статті. І ви бажаєте задати їм різні стилі. "Огляди фільмів" матимуть блакитний фон, а "Гарячі новини" - червоний фон і шрифт більшого розміру.
Один із способів вирішити задачу такий:
Інший спосіб такий:
Напевно, якщо опитати кількох розробників про те, який код більш відповідає вимогам семантики, більшість вкаже на перший варіант. Він відмінно відповідає матеріалу даного уроку: опис призначення без посилань на форматування. А другий варіант вказує на формат ( "blueBg" - ім'я класу, який сформований з двох англійських слів, що означають "блакитний фон"). Якщо раптом буде ухвалено рішення поміняти дизайн оглядів фільмів - наприклад, зробити зелений фон, то ім'я класу "blueBg" перетвориться на кошмар розробника. А ім'я "movie-review" дозволить абсолютно спокійно змінювати стилі оформлення із збереженням відмінної рівня підтримки коду.
Але ніхто не стверджує, що перший приклад краще в усіх без винятку випадках. Припустимо, що певний відтінок синього використовується в багатьох місцях на сайті. Наприклад, він є фоном для деякої частини нижнього колонтитула і областей в бічній панелі. Ви можете скористатися наступними селектором:
Ефективне рішення, так як колір визначається тільки в одному місці. Але такий код стає складним для підтримки, так як має довгий селектор, складний для візуального сприйняття. Також будуть потрібні інші селектори для визначення унікальних стилів, що призведе до повторення коду. Або ви можете використовувати інший підхід і залишити їх розділеними:
Такий стиль допомагає зберігати CSS файл більш організованим (різні області визначаються в різних розділах). Але платою є повторення визначень. Для великих сайтів визначення одного і того ж кольору може доходити до декількох тисяч разів. Жахливо! Варіантом вирішення може бути використання класу за типом "blueBg" для визначення кольору один раз і вставки його в HTML коді, коли потрібно використовувати даний дизайн. Звичайно, його краще назвати "mainBrandColor" або "secondaryFont", щоб відв'язатися від опису форматування. Можна пожертвувати семантикою коду на користь збереження ресурсів.
5 останніх уроків рубрики "HTML і DHTML"
При написанні або налагодження PHP скриптів ми частенько користуємося функціями var_dump () і print_r () для виведення попередніх даних масив і об'єктів. У цьому пості я б хотів розповісти вам про функції var_export (), яка може перетворити масив в формат, придатний для PHP коду.
Парочка безкоштовних шаблонів панелей адміністрування.
Створення шаблону для листа не така вже й проста справа. Пропонуємо вам підбірку з 30 сайтів, де можна безкоштовно скачати подібні шаблони на будь-який смак.
Наприклад у вас є поле пошуку, яке обробляється при кожному натисканні клавіші клавіатури. Якщо хтось захоче написати слово Windows, AJAX запит буде відправлений за наступними фрагментами: W, Wi, Win, Wind, Windo, Window, Windows. Проблема ?.
Підбірка з 15 нових сайтів, де можна скачати безкоштовні фотографії для заповнення своїх сайтів.
Рамазан Умаров
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!