12 принципів чистого HTML-коду

Розгромна розсилка

Щотижня ми надсилаємо корисні інтерфейсні та UX-методи. Підпишіться та отримайте Контрольні списки розумного дизайну інтерфейсу PDF доставляється у вашу поштову скриньку.

Красивий та чистий HTML - основа красивого веб-сайту. Коли я навчаю людей CSS, я завжди починаю з того, що кажу, що хороший CSS може існувати лише з однаково хорошою розміткою HTML. Будинок настільки міцний, наскільки його фундамент, чи не так? Переваг чистого семантичного HTML багато, проте стільки веб-сайтів страждають від погано написаної розмітки.

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

Подальше читання на SmashingMag:

1. Суворий ДОКТИП

Якщо ми збираємось це робити, давайте просто зробимо це правильно. Не потрібно обговорювати, чи використовувати HTML 4.01 або XHTML 1.0: обидва вони пропонують сувору версію, яка буде тримати нас приємними та чесними під час написання коду.

У нашому коді в будь-якому випадку не використовуються таблиці для розміщення (приємно!), Тому насправді немає необхідності в перехідному DOCTYPE.

Ресурси:

2. Набір символів та кодування символів

У нашому розділі першим ділом має бути оголошення нашого набору символів. Тут ми використовуємо UTF-8, який набухає, але він вказаний після нашого. Давайте рухатимемось вгору, щоб браузер знав, з яким набором символів має справу, перш ніж почати читати будь-який вміст взагалі.

Поки ми говоримо про персонажів, давайте продовжимо і переконаймося, що будь-які кумедні символи, які ми використовуємо, правильно закодовані. У нашому заголовку є амперсанд. Щоб уникнути можливого неправильного тлумачення цього, ми перетворимо його на & замість цього.

Ресурси:

3. Правильне відступ

Гаразд, ми знаходимося приблизно в трьох рядках, і мене вже дратує відсутність відступу. Відступ не впливає на те, як відображається сторінка, але це дуже впливає на читабельність коду. Стандартна процедура полягає у відступі однієї вкладки (або декількох пробілів), коли ви запускаєте новий елемент, який є дочірнім елементом тегу над ним. Потім поверніться назад на вкладці, коли ви закриваєте цей елемент.

Правила відступу далеко не закріплені в камені; не соромтеся винаходити власну систему. Але я рекомендую дотримуватися будь-якого вибору. Приємна відступна розмітка значно покращує ваш код і полегшує його читання та втручання.

Ресурси:

4. Тримайте свій CSS та JavaScript зовнішніми

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

Можливо, це сталося як «швидке виправлення» в якийсь момент, що зрозуміло і трапляється з усіма нами, але давайте перемістимо це у більш відповідне місце у зовнішньому файлі. У нашому головному розділі немає JavaScript, але те саме стосується і цього.

5. Правильно вкладіть свої теги

Заголовок нашого сайту, “My Cat Site”, знаходиться всередині

6. Усуньте непотрібні div

Я не знаю, хто вперше його придумав, але мені подобається термін "divitis", який стосується надмірного використання div у розмітці HTML. Десь на етапах навчання веб-дизайну люди вчаться обертати елементи у div, щоб вони могли націлити їх на CSS та застосувати стиль. Це призводить до розповсюдження елемента div і до того, що вони занадто широко використовуються в непотрібних місцях.

У нашому прикладі ми маємо div (“topNav”), який обгортає невпорядкований список (“bigBarNavigation”). І div, і невпорядковані списки є елементами на рівні блоку. Там насправді немає потреби в

Ресурси:

7. Використовуйте кращі правила іменування

Це гарний час, щоб підняти правила імен, оскільки ми щойно говорили про цей невпорядкований список з ідентифікатором “bigBarNavigation”. Частина "Навігація" має сенс, оскільки вона описує вміст, що міститься в списку, але "великий" та "Бар" описують дизайн, а не вміст. Це може мати сенс прямо зараз, оскільки меню - це велика панель, але якщо ви зміните дизайн веб-сайту (і, скажімо, зміните навігацію веб-сайтом на вертикальний стиль), це ім’я буде заплутаним та неактуальним.

Хороші імена класів та ідентифікаторів - це речі, такі як «mainNav», «subNav», «бічна панель», «нижній колонтитул», «metaData», речі, що описують вміст, який вони містять. Неправильні імена класів та ідентифікаторів - це речі, які описують дизайн, наприклад, «bigBoldHeader», «leftSidebar» та «roundedBox».

8. Залиште типографіку на CSS

Дизайн нашого меню вимагає тексту з великими літери. Ми просто копаємо, як це виглядає, і отримуємо більше сили для нас. Ми досягли цього, поставивши текст великими літерами, що, звичайно, працює; але для кращої майбутньої розширюваності ми повинні абстрагувати типографські рішення, подібні до цього, до CSS. Ми можемо легко націлити цей текст і перетворити його на великі літери за допомогою. Це означає, що в майбутньому, якщо вигляд усіх великих букв втратить свою чарівність, ми можемо внести одну незначну зміну в CSS, щоб змінити його на звичайний малий текст.

9. Клас/ідентифікатор

Під «класом тіла» я буквально маю на увазі застосувати клас до тіла, наприклад. Чому? Я бачу дві речі, що відбуваються в цьому коді, що змушує мене думати, що ця сторінка має макет, який відрізняється від інших сторінок на веб-сайті. По-перше, основний div вмісту має ідентифікатор “mainContent-500”. Здається, у когось в один момент був div “mainContent”, а потім потрібно було змінити його розмір і, щоб зробити це, створив абсолютно новий ідентифікатор. Я здогадуюсь, що це мало бути більшим, оскільки далі в коді, який ми бачимо, застосовується до бічної панелі, і ми можемо зробити висновок, що це було додано, щоб зменшити бічну панель від її нормального розміру.

Це не дуже хороше довгострокове рішення для альтернативних макетів. Натомість ми повинні застосувати до класу назву класу, як було запропоновано вище. Це дозволить нам однозначно націлювати divs на «mainContent» та «sidebar» без необхідності вигадливих нових імен або доповнень класів.

Наявність унікальних імен класів та ідентифікаторів для тіла є дуже потужним і має набагато більше застосувань, ніж просто для альтернативних макетів. Оскільки кожен біт вмісту сторінки лежить у тезі “body”, ви можете однозначно націлювати будь-що на будь-якій сторінці за допомогою цього гачка; особливо корисний для таких речей, як навігація та індикація поточна навігація, оскільки ви точно будете знати, на якій сторінці ви знаходитесь із цим унікальним класом тіла.

Ресурси:

10. Перевірити

Зрозуміло само собою, але вам слід пропустити свій код через машину валідатора ol, щоб виявити невеликі помилки. Іноді помилки не матимуть ніякого відношення до того, як відображається сторінка, але деякі помилки, безумовно, будуть. Перевірений код, безсумнівно, переживе неперевірений код.

Якщо ні з якої іншої причини, побачивши цей зелений текст на інструменті валідатора W3C, ви просто відчуваєте себе добре всередині.

Ресурси:

11. Логічне впорядкування

Якщо це взагалі можливо, найкраще підтримувати розділи вашого веб-сайту в логічному порядку. Зверніть увагу, як розділ нижнього колонтитула лежить над бічною панеллю нашого коду. Це може бути тому, що найкраще підходить для дизайну веб-сайту, щоб зберігати цю інформацію відразу після основного вмісту та поза бічною панеллю. Зрозуміло, але якщо є який-небудь спосіб зменшити розмітку нижнього колонтитула до останнього пункту на сторінці, а потім використати якийсь прийом макета чи позиціонування, щоб візуально поставити його туди, де це потрібно, то краще.

12. Просто роби те, що можеш

Ми вже багато про що розповіли, і це чудовий початок написання чистого HTML, але є набагато більше. Починаючи з нуля, все це здається набагато простішим. При спробі виправити існуючий код стає набагато складніше. Ви можете заглибитися в систему управління вмістом, яка нав'язує вам погану розмітку. Або на вашому веб-сайті може бути стільки сторінок, що важко придумати, навіть з чого почати. Гаразд! Найголовніше те, що ти вчитися як написати хороший HTML і що ти дотримуйся цього.

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