На що схожий чистий html-код студія Палича
За написання цієї статті хочу сказати «спасибі» одному замечательночу людині зі світу Joomla. Звати його Beliyadmin. Якось в розмові обговорювали мій черговий сайт (верстку), коротше, шукали баги. У якийсь момент згадали про валідності HTML-коду.
Адже дійсно, якщо глянути на багато вихідні коди сторінок - стає дуже страшно. Код HTML буває такий страшний!
Не дарма розумні люди придумали CSS для зручності і взагалі для спрощення безлічі процедур, особливо при створенні сайтів, та хоча б простих статей при наповненні тих же сайтів.
Давайте спробуємо разоберемся, що й до чого, щоб було дуже красиво, валідність і зрозуміло. Поїхали!
заголовок сторінки
Тут обов'язково треба вказувати тег
із зазначенням назви сторінки. також в <head> вказується вихідна кодування, що підключаються стилі CSS. також підключаються скрипти. Скрипти і CSS знаходяться в відповідних папках.</p>
<h2>ідентифікуємо <body></h2>
<p>Використання ID для тіла сайту дозволяє використовувати унікальні шаблони і стилі для кожної сторінки, якщо, звичайно, використовуєте посторінкову верстку. Наприклад, ви можете задати для кожного id своє оформлення заголовків h2 з використанням дочірніх селекторів: #one h2 або #two h2.</p><h2>Семантично чисте меню</h2>
<p>Ви його бачили раніше і не раз, і не тільки у мене на сайті, і доведеться ще раз побачити. Використання списку для меню дає необмежені можливості по контролю над ними, і звичайно, стильовому контролю.</p>
<h2>Головний блок DIV для содердімого сторінки</h2>
<p>Використання блоку DIV для вмісту дасть вам необмежені можливості по управлінню сторінкою, особливо це стосується «еластичних» сторінок. Також можна для блоку задати мінімальну ширину і висоту, про це вже писав.</p>
<h2>Важливий контент повинен бути першим</h2>
<h2>Підключення активного вмісту</h2>
<p>A це було першим, що я зробив, коли створив перший сайт за допомогою PHP. Я розбив сайт на 4 логічні частини, і кожна довантажувати за допомогою команди include. Найкраще буде, якщо ви довантажувати окремо верхнє меню, бічні і футер. В такому випадку вам буде простіше керувати вмістом.</p>
<h2>закриті теги</h2>
<p>Відкрили strong. закрили strong. Не будьте ледачими, закривайте теги, інакше у вас можуть виникнути проблеми з валідність, та й просто помилки при відображенні в браузерах.</p>
<h2>ієрархія заголовків</h2>
<p>Не забуваємо, що на сторінці може бути тільки один заголовок H1. А під ним H2 і H3.</p>
<h2>Вміст, вміст, вміст</h2>
<p>Це розуміють всі, сподіваюся. Без вмісту сайт - просто пустишка, який соромно показувати. Текст не забуваємо оформляти параграфами <p>. Використання перенесення <br> призводить до хляпанню форматування. Не завжди красиво. Також на забуваємо про відступ зліва першого рядка і відступ знизу у параграфа.</p>
<h2>Немає стилям в HTML</h2>
<p>У коді сторінки не повинно бути ніякого форматування, особливо такого як <font>. Тримайте ваші стилі в CSS файлах, і буде вам щастя.</p>
<h3>Що ще почитати на цю тему</h3></div>
<div class="extra">
<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/dieta-pri-enterovirusnoi-infekcii-menju-i-recepti.html">Дієта при ентеровірусної інфекції, меню і рецепти дієти при ентеровірусної інфекції, компетентно про</a></li>
<li><a href="/articles/lapshevnik-z-jajcem-pokrokovij-recept.html">Лапшевник з яйцем покроковий рецепт приготування з фото і поясненнями</a></li>
<li><a href="/articles/iljustrovanij-samovchitel-po-microsoft-excel-2018.html">Ілюстрований самовчитель по microsoft excel 2018 виявлення помилок і отримання довідок як</a></li>
<li><a href="/articles/biljashi-jak-na-rinku-nasha-kuhnja-recepti-na-bud.html">Біляші як на ринку, наша кухня - рецепти на будь-який смак!</a></li>
<li><a href="/articles/nalashtuvannja-televizora-za-dopomogoju-menju.html">Налаштування телевізора за допомогою меню, 5меню настройка, 4меню установка, інструкція з експлуатації</a></li>
<li><a href="/articles/jak-peresaditi-kauchukonosnij-fikus-magija-roslin.html">Як пересадити каучуконосний фікус магія рослин</a></li>
<li><a href="/articles/chuvak-chogo-ti-chekaesh-jak-zrozumiti-shho-ti-ij.html">Чувак, чого ти чекаєш як зрозуміти, що ти їй цікавий</a></li>
<li><a href="/articles/jak-rozmistiti-dani-na-karti-jandeks.html">Як розмістити дані на карті Яндекс</a></li>
<li><a href="/articles/velika-taemnicja-ufologii.html">Велика таємниця уфології</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/poradi-dosvidchenogo-vitchima.html">Поради досвідченого вітчима</a></li>
<li><a href="/articles/z-jakih-derev-robljat-papir-stadii-virobnictva.html">З яких дерев роблять папір - стадії виробництва</a></li>
<li><a href="/articles/jak-vidkriti-torgove-predstavnictvo-na-kubi.html">Як відкрити торгове представництво на кубі</a></li>
<li><a href="/articles/chim-pofarbuvati-gips-foto-video-poradi-opisi.html">Чим пофарбувати гіпс, фото, відео, поради, описи, рекомендації</a></li>
<li><a href="/articles/dispepsichnij-sindrom.html">диспепсичний синдром</a></li>
<li><a href="/articles/zamina-zovnishnogo-i-vnutrishnogo-shrusa-na-kalini.html">Заміна зовнішнього і внутрішнього шруса на калині</a></li>
<li><a href="/articles/pozakoreneve-pidzhivlennja.html">позакореневе підживлення</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © 2026</p>
<ul>
<li><a href="/articles/jak-oformiti-socialnu-ipoteku.html">Як оформити соціальну іпотеку</a></li>
<li><a href="/articles/istorija-brendu-apple.html">Історія бренду apple</a></li>
<li><a href="/articles/rekomendacii-v-instagram-jak-ih-podivitisja-i-jak.html">Рекомендації в інстаграм як їх подивитися і як в них потрапити</a></li>
<li><a href="/articles/jak-organizuvati-masovij-zahid.html">Як організувати масовий захід</a></li>
<li><a href="/articles/jak-prodovzhiti-ecp-na-torgovih-majdanchikah.html">Як продовжити ЕЦП на торгових майданчиках</a></li>
</ul>
</div>
</footer></div>
</body>
</html>