Як ви вже дізналися, в HTML5 деякі правила були ослаблені. Це було зроблено тому, що творці HTML5 хотіли, щоб ця мова реальніше відображав дійсну роботу веб-браузерів. Іншими словами, вони хотіли скоротити розрив між "працюють веб-сторінками" та "веб-сторінками, правильними з точки зору стандарту". У наступному розділі ми розглянемо зміни в правилах більш детально.
Звичайно ж, все ще існують застарілі методи, підтримувані браузерами, вживання яких абсолютно не схвалюється стандартом HTML5. Ці методи можна виявити за допомогою валідатора HTML5.
ослаблені правила
При нашому першому знайомстві з розміткою HTML5 ми дізналися, що використання елементів ,
і не є обов'язковим для цієї розмітки. Але ослаблення правил в HTML5 на цьому не закінчується.
У ньому також дозволяється використовувати в тегах як прописні, так і малі літери, як в наступному прикладі:
Також можна не використовувати закриває зворотну косу риску в порожніх елементах, тобто елементах без вмісту, таких як ![]()
(Зображення),
(Розрив рядка) або
(Горизонтальна лінія). Далі наведені три рівнозначних способу вставити розрив рядка:
У HTML5 також зазнали змін правила для атрибутів. Значення атрибутів більше не потрібно брати в лапки, але тільки за умови, що вони не містять заборонених символів (зазвичай це символи>, = або пробіл). Ось приклад використання елемента ![]()
таким чином:
Також дозволені атрибути без значень. Таким чином, якщо для установки прапорця в XHTML потрібно кілька повторюється синтаксис:
то в HTML5 це можна робити в традиціях HTML 4.01, вказуючи тільки одна назва атрибута:
Але деяких особливо турбує не те, що все це дозволено в HTML5, а те, що не особливо послідовні розробники можуть недбало використовувати як строгі, так і ослаблені правила, іноді навіть в одному і тому ж документі. Але в дійсності подібна недбала розмітка можлива і в XHTML. В обох стандартах обов'язок за хороший стиль розмітки лежить на веб-розробника, тому що браузер з'їсть все, що йому буде подано.
Далі дається короткий виклад основних принципів доброго стилю створення розмітки HTML5:
Використання елементів ,
і . В елементі зручно розміщувати визначення природної мови сторінки, а елементи і дозволяють відокремити інформацію про сторінку від власне вмісту сторінки.
Малі літери в тегах. Використання малих літер в тегах не є обов'язковим, але такі теги набагато більше поширені, їх легше вводити (т. К. Не потрібно задіяти клавішу ), А також не так ріжуть око, як теги з великими літерами.
Взяття в лапки значень атрибутів. Значення атрибутів беруться в лапки тому, що на це є причина - допомогти уникнути помилок, які в іншому випадку дуже легко допустити. Без лапок один неправильний символ значення атрибута може зіпсувати всю сторінку.
Перевірка коду HTML5
Новий розслабляючий підхід до правил в HTML5 може бути цілком до душі одним веб-розробникам. Інших же сама думка про те, що за фасадом працюючого без сучка, без задирки браузера може ховатися непослідовна, повна помилок розмітка, здатна позбавити сну.
Деякі з можливих проблем, які валідатор в змозі вловити, включають наступні:
відсутність обов'язкових елементів (наприклад, елементу
);</p>
<p>відсутність закриває тега;</p>
<p>неправильно впроваджені теги;</p>
<p>відсутність атрибутів у тегів, для яких вони є обов'язковими (наприклад, атрибуту src тега <img>);</p>
<p>неправильне розташування елементів або вмісту (наприклад, тексту в блоці <head>).</p><p>Інструменти для розробки веб-сторінок, такі як Dreamweaver і Expression Web, оснащені власними валідаторами, але тільки самі останні версії підтримують HTML5. У такому випадку можна скористатися одним з онлайнових валідаторів. Далі даються інструкції по використанню популярного валідатора від організації W3C:</p>
<p>Відкрийте в своєму браузері сторінку W3C Markup Validation Service. Валідатор запропонує три способи перевірки розмітки, кожна на своїй вкладці: Validate by URI (для сторінки, яка вже розміщена в інтернеті), Validate by File Upload (для сторінки, збереженої у файлі на вашому комп'ютері) і Validate by Direct Input (для коду, вводиться або вставляється у вікно валідатора):</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/images/61/html5sintaksis-6f19f2cc.jpg" title="Html5, синтаксис (html5)" alt="Html5, синтаксис" width="434" height="303" /></div></p>
<p>Виберіть потрібну вкладку і надайте свою HTML-розмітку. Перш ніж приступити до перевірки коду, можна клацнути по посиланню More Options, щоб змінити деякі параметри, але це небажано. Зокрема, буде краще надати можливість валідатора визначити тип документа автоматично. Таким чином валідатор використовує опис типу документа, вказане в перевіреній веб-сторінці. Також краще надати валідатора самому визначити кодування сторінки, за винятком сторінок з кодуванням, яку валідатор важко визначити.</p>
<p>Натисніть кнопку Check.</p>
<p>Ваш код буде відправлений на перевірку, і після короткого очікування в браузері буде виведений звіт з результатами валідації. Якщо код не пройшов перевірку, то в звіті будуть вказані виявлені валідатором помилки:</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/images/61/html5sintaksis-69839261.jpg" title="Html5, синтаксис (синтаксис)" alt="Html5, синтаксис" width="434" height="337" /></div></p>
<p>Навіть для повністю правильного HTML-документа в звіті може бути зазначено кілька попереджень (хоча повністю нешкідливих), включаючи такі, що кодування була визначена автоматично і послуга валідації коду HTML5 є експериментальною і не зовсім доведеної до логічного кінця.</p>
<p>Як можна бачити на малюнку, валідатор виявив в документі чотири порушення правил HTML5, які є результатом двох помилок в коді. Перша помилка - відсутній обов'язковий елемент <title>. Друга - елемент <р> закривається до закриття вкладеного в нього елемента <em>. Проте, не дивлячись на ці помилки, ця розмітка правильна, і всі браузери будуть відображати цю сторінку належним чином.</p>
<h2>повернення XHTML</h2>
<p>Як ми вже дізналися, сходження специфікації HTML5 знаменує, по ідеї, захід попереднього короля Всесвітньої павутини - стандарту XHTML. Але дійсність не така проста, і шанувальникам XHTML не потрібно відмовлятися ні від чого, що їм мило в мовах розмітки попереднього покоління.</p>
<p>Перш за все, згадаємо, що синтаксис XHTML продовжує існувати. Накладаються XHTML правила або продовжують використовуватися в якості керівних принципів (наприклад, правила правильного вкладення елементів), або підтримуються у вигляді необов'язкових угод (наприклад, угода про використання закриває косою риси з порожніми елементами).</p>
<p>Але що, якщо ви хочете зробити дотримання правил XHTML-синтаксису обов'язковим? Можливо, ви турбуєтеся, що ви (або ваші колеги по роботі) неусвідомлено потихеньку впадете в використання ослаблених угод звичайного HTML. Щоб не допустити цього, вам потрібно використовувати XHTML5. це менш поширений стандарт, який, по суті, є HTML5, одягненим в обмеження, засновані на XML.</p>
<p>Щоб зробити документ HTML5 документом XHTML, потрібно явно вказувати простір імен XHTML в елементі <html>, закривати кожен елемент, обов'язково використовувати малі літери в тегах і т. д. У наступному лістингу наводиться приклад коду, в якому виконані всі ці вимоги:</p>
<p>Слідуючи цим крокам, ви зможете створити документ XHTML і виконати його перевірку. Проте браузери все одно будуть обробляти цей документ, як звичайну сторінку HTML5, яка просто пнеться походити на XML-документ. Ніяких додаткових правил при обробці такої сторінки застосовувати вони не будуть.</p>
<p>Якщо ж ви хочете, щоб і браузери обробляли сторінку згідно з правилами XHTML, то вам потрібно налаштувати свій веб-сервер для подачі сторінок з MIME-типом application / xhtml + xml або application / xml, замість стандартного типу text / html. До речі, браузери, які підтримують XHTML5, обробляють таку розмітку по-іншому, ніж звичайний код HTML5. Вони намагаються обробляти сторінку як документ XML, і якщо це їм не вдається (через помилки в коді), браузер припиняє обробку решти документа.</p>
<p>Який з цього висновок? Для переважної більшості веб-розробників, від любителів до серйозних професіоналів, гра за суворими правилами XHTML не варто необхідних для цього свічок. Єдиним винятком є розробка спеціальних рішень, наприклад сторінок з вмістом, яким потрібно маніпулювати за допомогою XML-інструментів, таких як, наприклад, XQuery і XPath.</p>
<p>Якщо вам цікаво, можна обдурити браузер і змусити його переключитися в режим XHTML. Для цього потрібно лише перейменувати файл з розширенням xhtml або xht, а потім відкрити його з жорсткого диска вашого комп'ютера. Більшість браузерів (включаючи Firefox, Chrome і IE 9) будуть обробляти таку сторінку, як ніби-то вона була завантажена з веб-сервера з настройками MIME XML. Якщо сторінка містить будь-яку незначну помилку, в браузері відобразиться частково оброблена сторінка (IE 9), повідомлення про помилку XML (Firefox) або те й інше разом (Chrome).</p>
<h4>Схожі статті</h4>
<ul>
<li>
<p><a href="/articles/html-sintaksis-html.html">Html синтаксис html</a></p>
</li>
<li>
<p><a href="/articles/sintaksis-html.html">синтаксис html</a></p>
</li>
<li>
<p><a href="/articles/sintaksis-html-uroki-webreference.html">Синтаксис html, уроки, webreference</a></p>
</li>
</ul>
</div>
<div class="extra">
<div class="info"><a href="/articles/banja-abo-sauna-shho-krashhe-vibrati.html">Попередня</a> ◈ <a href="/articles/jak-pracjuvati-na-idiota-avtor-dzhon-guver.html">Наступна</a></div>
<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">
</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">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>© Copyright 2016 - 2024 | Всі права захищені</p>
<script>
new Image().src = "https://counter.yadro.ru/hit?r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";h"+escape(document.title.substring(0,150))+
";"+Math.random();</script>
</div>
</footer></div>
</body>
</html>