12 принципів чистого HTML-коду - Smashing Magazine
Розгромна розсилка
Щотижня ми надсилаємо корисні інтерфейсні та 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”, знаходиться всередині