Валідація сайту або правильний html

валідація сайту

Сьогоднішню статтю я хочу присвятити валідації сайту (тобто HTML). Спершу визначимо що означає цей термін! Валідація сайту - це перевірка синтаксичних помилок, перевірка вкладеності тегів і інші критерії. Як правило, валідатори (сервіси для перевірки сайтів на наявність помилок в структурі документа) перевіряють HTML-код на відповідність певному стандарту, який вказаний на самому початку будь-якої HTML-сторінки першим рядком. Якщо ви не знали для чого вона, тепер будете знати! # 128578; Але для чого, власне, потрібна ця сама валідація і на що вона впливає?

«Що таке валідація сайту?»

Як я вже говорив вище, валідація - це відповідність HTML-коду певним правилам і стандартам. На зміну XHTML прийшла технологія HTML5, яка значно полегшила життя розробникам. Справа в тому, що у версії XHTML синтаксис був дуже суворим. Якщо в HTML5 ви можете писати тег перенесення як без похилої риси, так в такому вигляді, то в XHTML буде вірним лише останній варіант. HTML5 не так суворий, та й до того ж з`явилося безліч корисних тегів, але не про це зараз # 128578; .

«На що впливає валідація сайту?»

А зараз відповімо на друге питання.

Валідація сайту дозволяє стежити за правильним відображенням сайту в різних браузерах. Наприклад, якщо не закрити тег або десь зробити помилку в коді, в подальшому одна і та ж сторінка може відображатися в різних браузерах по-різному. Також стилі для сайту (CSS) можуть відображатися не так як ви цього очікували. Тому необхідно уважно стежити за цим.

Також я не міг не сказати що валідація впливає на пошукові системи: пошукові системи віддають перевагу сайтам з дійсним HTML-кодом. Майте це на увазі!

Ну що, я вас переконав в тому, що валідація сайту дійсно необхідна? Тоді з теорією закінчили і переходимо до практики!

Способи перевірки валідації

Про кожного із способів я написав докладні інструкції у вигляді тексту, а також, якщо комусь ліньки читати і вникати, зняв відео # 128521; .

1 спосіб. сервіс validator.w3.org

Суть першого методу полягає у використанні сервісу для перевірки валідності сайту. Як перевірити валідність сайту за допомогою сервісу validator.w3.org:

1. Переходимо за адресою: validator.w3.org. Перед нами відкриється сторінка, на якій є 3 вкладки. На першій вкладці «Validate by URI» ви можете перевірити валідність сайту розміщеного в інтернет, на другий «Validate by File Upload» - завантажити файл з комп`ютера, і на третій «Validate by Direct Input» - вставити вміст файлу безпосередньо в форму для введення. Я буду розповідати про перший варіант, тобто коли сайт розміщений в інтернет (думаю і з іншими способами у вас проблем не виникне). Тому вибираємо першу вкладку як на зображенні нижче:

вкладка

2. Далі натискаємо на кнопку «More options» і тут необхідно виставити наступні значення:

кнопка
  • Character Encoding - кодування вашого сайту. АЛЕ! Якщо вона вже є між тегами (У себе на сайті в браузері натискаєте на поєднання клавіш CTRL + U, і шукаєте на початку документа приблизно такий рядок
    1


    ="cp1251" /gt;

    ), То тут залишаємо обраним (Detect automatically).

  • Document Type - тип поточного документа. Він вказується першим рядком в HTML (коли перебуваєте на своєму сайті, в браузері натискаєте поєднання клавіш CTRL + U, і дивіться найпершу сходинку
    1

    ). Якщо ж в першому рядку є щось схоже, тоді і тут залишайте значення (Detect automatically).

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

3. Потім в полі «Address» вводимо адресу вашого сайту як зробив я:

Вводимо адресу сайту для валідації

Після чого натискаємо на кнопку «Check», яка розташована по середині сірого блоку:

Натискаємо кнопку Check

4. Далі йде валідація вашого сайту і через деякий час з`явиться результат валідації. Буде схожа сторінка з повідомленням «This document was successfully checked as HTML5!» (Що означає що ваш сайт успішно пройшов перевірку на валідність певного типу документа, тобто в моєму випадку HTML5):

результат валідації

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

Для тих, хто не зрозумів або полінувався почитати - дивіться відео нижче # 128578;

2 спосіб. Плагіни для браузерів

1. Плагін для браузера Mozilla Firefox - Перейти

Переходьте за посиланням вище, вибираєте версію браузера Firefox і натискаєте на кнопку «Download». Потім вибираєте необхідну операційну систему і встановлюєте як звичайне доповнення. (Ті, хто не зрозумів, дивіться відео # 128578; )

2. Плагін для браузера Google Chrome - Перейти

Тут вам необхідно натиснути на кнопку «Безкоштовно» і потім у віконці натиснути «Додати».

3. Плагін для браузера Opera - Перейти

Тут також відбувається звичайна установка доповнення.

4. Плагін для браузера Safari - Перейти

установка:

  1. Розпакуйте архів з плагіном.
  2. Скопіюйте файл «Safari Validator.webplugin» в папку, де встановлений браузер, потім / Library / Internet Plug-Ins (створіть папку, якщо вона відсутня)
  3. Зробіть подвійний клік на файлі Safari Validator.safariextz.
  4. Перезапустити браузер Safari.

Як встановити плагін в Firefox і як користуватися ним я розповідаю в другому відео:

висновок

Ось і вся стаття. Сподіваюся відеоматеріали, а також текстова інформація, яку я тут представив допоможе вам поліпшити ваш сайт і зробити його ще більш «привабливим» для пошукових систем # 128578; , Адже ми всі так до цього прагнемо. Якщо виникають питання і складнощі на будь-якому етапі - пишіть в коментарях, будемо разом розбиратися! Той, хто дочитав до кінця статтю і виконав все, про що я писав - вже поліпшив свій сайт і результат не змусить себе чекати. # 128578;

Успіхів!

З повагою, Юрій Німець

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!