10 ознак хорошого HTML-коду
Щоб код HTML, який ви пишете на своєму сайті, був хороший, недостатньо однієї тільки його валідності (validation - відповідність стандартам W3C - всесвітнього інтернет-консорціума). Щоб сайт виглядав професійно, код теж має бути гарно написаний і структурований, а не “зліплений, із того що було”. Розглянемо головні ознаки, котрі відрізняють хороший HTML код.
1. Правильно прописаний <!DOCTYPE html PUBLIC…..>. Хоч ця громіздка конструкція в самому верху сторінки і здається вам дивною, вона дає браузеру завдання - як правильно рендерувати (відображати) вашу сторінку, а також робить код валідним. Тому простим <html> не обмежитись.
2. Цілісна head секція. Тут також не обійтись одним <title>. CSS-стилі та Javascript мають бути в окремих папках, і викликатись у head як звичайне посилання.
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
І стилі не просто викликаються, а й задається тип їх відображення - або звичайний стиль, або ж стиль для роздрукування сторінки (media=”print”). Favicon необов’язковий, але все ж потрібний елемент сайту, як я нещодавно писав. В блоці head також варто розмістити meta-теги, якщо ви вирішили їх використовувати. І одна з найважливіших деталей - якщо ви ведете статистику RSS за допомогою сервісу Feedburner, то в head обовязково треба прописати адресу вашого RSS, котра вже розміщена на Feedburner’i. Інакше картина ваших читачів буде дуже неповна.
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/feed/" />
3. Унікальні стилі для окремих елементів. Наприклад, якщо ви хочете, щоб теги <h2> мали різні властивості, то можна зробити так: #home h2 {}. Тобто для кожної сторінки буде створено окремий стиль.
Те ж саме стосується лінків - не обов’язково, щоб вони всюди були лише жорстко синіми з підкресленням. Для меню створіть один стиль, для тексту - інший, і так далі, для кожного виду посилань: .menu a {}; .footer a {};
4. Семантичність. Семантичність -це коли код зрозумілий людині насамперед, а не машині. Саме тому слід створювати семантичний код, розмітка якого буде зрозуміла в першу чергу вам. Адже вам, як адміністратору, цим кодом потім управляти. Погодьтесь, що набагато легше керувати меню, коли воно має наступний вид:
<div id=”menu”>
<ul>
<li><a href=”index.php”>Home</a></li>
<li><a href=”about.php”>About</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
</div>
5. Загальний DIV для всього контенту. Вам буде набагато легше організовувати контент на сторінці, якщо всі блоки поміщені всередину одного загального DIV-тега, його зазвичай називають <div id=”wrap”>, <div id=”container”>. Особливо, якщо ширина сайту фіксована.
6. Найважливіший контент - в першу чергу. Якщо ваш сайдбар є лише навігацією або ж ще менш важливим контентом, то краще в коді помістити його нижче. А найважливішу інформацію - таку як новини, статті, події - наверх. Це стане ще одним, хоча й невеликим плюсом до SEO-оптимізації вашого коду.
7. Контент по частинам. Виокреміть контент, що часто повторюється на сторінках (header, footer, різні блоки) в окремі файли, і потім просто включайте їх у вигляді файлів. <?php include_once("menu.html") ?>
Саме за таким принципом працює відома CMS Wordpress - сама сторінка index.php складається з набора функцій, що викликають певні розділи, такі як header.php, sidebar.php, footer.php, bottom.php, та інші в один кінцевий файл, котрий ви бачите.
8. Код з відступами. Набагато приємніше читати і редагувати код, котрий розділений ієрархічно - з відступами, так як у пункті № 4. Код. вирівняний align left жахливо читати ч швидко знайти потрібний вам рядок.
9. Ніяких стилів. Ваш HTML-код має створюватись для контенту, для інформації, а не для стилю. о можливості виключайте теги, котрі редагують стиль, з HTML-документу. Всі ваші стилі повинні знаходитись в окремому CSS-файлі та імпортовані в блоці <head>. Забудьте про <font>.
10. Правильний код - шлях до валідності. Насамкінець закривайте всі <img /> <br/> на кінці. Використовуйте © для значка ©, та аналогічні коди для інших символів. Не забувайте позакрвиати всі теги на сторінці, що ви відкрили.
І тоді все буде ОК 
Оригінал (англ.): CSS Tricks - What beautiful HTML code looks like
Переклад з доповненнями: hellveen, спеціально для Блогорідера.
Popularity: 100%
Павло Друз'як
am Січень 8 2008 @ 14:14
hellveen, кудись тебе понесло. Це матеріал для web-nation.org
або webmascon.com
hellveen
am Січень 8 2008 @ 15:13
А шо хіба погано?
Я спочатку хотів відкрити окремий блог, але для чого відкривати десятки сайтів, якщо про все можна і на одному писати.
Павло Друз'як
am Січень 8 2008 @ 16:04
“Blogoreader - перший в своєму роді проект, котрий висвітлює українську блогосферу - головні події та новини минулого тижня, знайомить з цікавими блогами і персонами, котрі є досить відомі в мережі інтернет.” - оце супер заради цього я підписався на рсс.
А веб-будівництво це окрема тематика. Якщо не хочеш заводити окремого сайту, можеш стати автором на web-nation, це було б більш логічно.
hellveen
am Січень 8 2008 @ 16:10
Гарна пропозиція, однак мене і так вже запросили у один майбутній ІТ-проект.
Скоріш за все, Блогорідер з часом розділиться на кілька тематичних підрозділів, бо бачу що рамок тих, що ти описав мені уже замало. Тим більше, ще з осені тут почали з’являтись подібні статті. Якщо стаття несе позитив, то чому би їй тут не бути.
enej
am Січень 8 2008 @ 19:05
Ці рамки описав ти на сторінці “Про проект”
І особисто мені подобалась така концепція блогорідера, і не до вподоби ті зміни, що почалися з осені. Можливо варто провести опитування чи очікують читачі статей про веб-будівництво на блогорідері?
hellveen
am Січень 8 2008 @ 19:16
Згоден, що я вийшов за межі тої тематики. Але якби не було розділу статті, то на місяць виходило би 3-4 пости. Хіба це добре? Українська блогосфера не така ще велика, щоб писати про неї щотижня. Тим більше що статті будуть корисні і для блогерів в тому числі.
Таке опитування вже проводилось нещодавно. І ось які були результати.
http://www.polldaddy.com/p/124078/
Більшість висловилась за те, щоб писалися цікаві статті. І зовсім мало за те, щоб писати більше в Блоготиждень.
Схоже, що треба провести додаткове опитування, які теми є найбільш важливими для читачів.
g_i
am Січень 8 2008 @ 20:56
пост дійсно дивує.
АЛЕ!
АВТОР є на сайті і хай собі пише шо вважає за потрібне:)
hellveen
am Січень 8 2008 @ 21:00
Отож-бо
Дивні ви якісь. Наче це перша стаття такої тематики, вони й раніше були, але ніхто не був проти
enej
am Січень 9 2008 @ 0:30
Я висловив свою думку, ти можете прислухатися до неї або залишити все так як є, але казати, що я дивний трохи не коректно з твого боку.
hellveen
am Січень 9 2008 @ 0:32
Не треба сприймати все так близько до серця)
не бачу в цьому некоректності. ми ж не на засіданні РНБО
enej
am Січень 9 2008 @ 0:43
мені не приємно коли я даю пораду обґрунтовуючи її, а мене називають дивним, так краще?
hellveen
am Січень 9 2008 @ 12:20
Добре, більше не буду
podarok
am Січень 11 2008 @ 1:57
а для зменшення навантаження на сервер все має бути максимально нечитабельне в коді 8)))
Всі ці рекомендації - працюють 50 на 50… Тобто або працюють, або ні…
Тобто, якщо у Вас на сайті буде гарно читабельний код, то для робота це пофіг, а людині буде краще його прочитати… Але є в цьому і мінус… Важче ламати(знаю, спірно!), бо знайти щось там важче..
Крім того на сьогоднішній день сам вебконсорціум радить робити імпорт css а не вказувати лінком…
my.ukrweb.info
am Січень 12 2008 @ 0:25
Мова ZZ…
Написати цей аналіз мене надихнула стаття на Блогорідері. Причина? Явна схожість із "перекладом" "забугорної статті", що до укр…
NFC
am Січень 15 2008 @ 17:51
Я поставив на своєму сайті, перед тим відредагував. ІМХО в оригінальному перекладі багато неточностей фактичного характеру.
http://www.ua-admin.com/web/primary.php?addon=textcatalog&id=12467&cat=107&t=1
hellveen
am Січень 15 2008 @ 18:46
Передрук матеріалів можливий, однак вам ніхто не дозволяв модифікувати статтю на ваш розсуд.
Якщо захочете додати своє - то пишіть новий матеріал. Про неточності можна було написати тут, і вони були б виправлені.
NFC
am Січень 15 2008 @ 19:44
так що треба прибрати?
hellveen
am Січень 15 2008 @ 19:46
Та вже нехай буде.
На сайті ніде про це не писалось. Тому тепер я поклав невелике застереження.
my.ukrweb.info УКРВЕБ ІТ веблог
am Січень 27 2008 @ 21:18
Локалізація для української мови…
Чи задавали ви собі запитання - чому на мій сайт заходять по ключових словах, але в мене взагалі немає подібного контенту, так, просто в тек…
iMan
am Березень 3 2008 @ 1:49
Деякі пункти дуже спірні, інші насправді маловажливі.
Але є і цікаві моменти.
Найкраще за зиму - Blogoreader 2.6 – українська блоґосфера - блоґи, новини, статті, персони
am Березень 28 2008 @ 7:01
[...] 10 ознак хорошого HTML-коду [...]
Руссотуристо
am Травень 12 2008 @ 6:12
Воть смотрю я на этот текст, и понимаю - что нефига не понимаю. Вы копию на русском сделали бы. Мне тоже оптимизировать надо уметь.