Чому ми повинні використовувати теги типу p, span, hx, коли ми можемо використовувати CSS замість цього?

Чому ми повинні використовувати теги типу p, span, hx, коли ми можемо використовувати CSS замість цього? Це важливо з точки зору SEO?

Коротка версія полягає в тому, що різні теги та CSS мають різні цілі.

<h1>Whatever</h1>наприклад, містить певний зміст разом із його вживанням: "Це заголовок, важливий - перший рівень" тощо. Деякі аналізатори також використовують hx-теги (та інші), щоб створити контур структури документа, який може бути використаний для будь-якого, від обробки даних до доступності (наприклад, екранізатори, переходячи до наступного питання на домашній сторінці веб-майстрів, переходячи до наступного h3) .

Ви не можете відхиляти семантичні теги на основі того, що ви можете зробити з CSS, і навпаки.
Ви можете застосувати CSS до іншого тегу, щоб він виглядав таким же, як h1, наприклад: <span style="font-weight:bold;font-size:2em">Whatever</span>але це все ще не робить цей тег span фактичним заголовком з точки зору функції та семантики. У цьому випадку цей контур, який я пов’язував вище, був би майже неможливим, оскільки ці прольоти - це не заголовки, а лише текст, який ви довільно зробили великим та жирним.

Розмітка та презентація різні

Це трохи схоже на запитання "чому ми повинні мати стіни, коли у нас фарба?" :)

Теги HTML позначають, який ваш вміст - це заголовок, це список тощо.

CSS позначає, як повинен виглядати ваш контент - заголовки повинні бути синіми, списки повинні бути відступними на стільки, меню має бути зліва тощо.

Javsascript розповідає, як повинна поводитися ваша сторінка - анімації тощо.

Отже, без вмісту HTML CSS та Javascript справді не мають над чим працювати.

Ці категорії не є на 100% чорно-білими - наприклад, CSS може зараз вказати "переходи", які є анімацією, - але вони є основною ідеєю.

Перегляньте попередні обговорення на цю тему на StackOverflow тут і тут .

Хороша розмітка економить тонну зусиль і працює краще

Якщо ви хочете, щоб щось поводилось як посилання, ви можете використовувати <span class="mylink">і використовувати купу CSS і JS, щоб зробити це добре і добре. Або ви можете просто скористатися <a>елементом і отримати все це безкоштовно, без додаткового коду для завантаження, оскільки браузери вже знають, що робити, і логіка реалізована у швидкому, рідному коді. Плюс це набагато більше шансів правильно працювати для читачів екранів, мобільних браузерів, пошукових систем, агрегаторів та інших випадків використання, про які ви не думали.

Ось чому ви також повинні використовувати <button>для дій, які можна натиснути, а <label>для позначення мітки <input>та а <main>для основного розділу вашої сторінки.

Наскільки хороша розмітка впливає на SEO

По суті, SEO - це переконання пошукових систем у тому, що ваш вміст найкраще відповідає пошуковому терміну. Очевидно, ніхто в Google особисто не читає кожну веб-сторінку і не класифікує її.

Тому, щоб пошукові системи знали, що таке ваш вміст, програма повинна його розібрати.

І ей, дивись! У нас є ціла мова під назвою HTML, яка призначена для позначення вашого вмісту таким чином, щоб машини розуміли! :)

Так що так, чітка розмітка допоможе пошуковим системам краще індексувати ваші сторінки.

Якщо використовувати крайній приклад, якби заголовок вашої сторінки насправді був фотографією, яку ви зробили із заголовка газети, це може виглядати цікаво, і люди могли б просто її прочитати, але в пошуковій системі це було б просто зображення без сенсу . Тоді як <h1>Turtle Groomer 5000</h1>чітко повідомляє пошуковим системам, що у вас є продукт, який полегшує гігієну випробувань.

Будь ласка, подумайте і про людей з певними порушеннями, яким (як приклад) доводиться користуватися читачем шрифтом Брайля. У таких випадках теги html мають набагато більше значення, ніж візуальні стилі css.

Су відповів на смислову частину. Що стосується SEO, то ви побачите, що пошукові системи елементу h1 надають більшу вагу, ніж інші теги. Теги h2 / b / strong надають трохи більше ваги, ніж звичайний текст.

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

Для HTML5 ознайомтесь із жирним та курсивом у HTML5 .

Підсумок:

Використовуйте, <b>коли ви хочете, щоб текст мав інший стиль без контекстуального значення, але використовуйте, <strong>коли ви хочете, щоб текст мав додаткову важливість з точки зору вмісту або SEO.

Використовуйте <i>для компенсації настрою тексту, але використовуйте <em>для того, щоб зробити текст чітким.

Також: не забувайте про важливість семантики для користувачів з обмеженими можливостями. Програмне забезпечення Screenreader залежить від цієї семантики, щоб представити незрячим людям потрібний контекст, який вони не вистачають через їх інвалідність.

По-перше, <hx>це досить важливий тег, оскільки він визначає заголовки, як уже згадували інші. Заголовки дуже корисні не лише для зовнішнього вигляду, а й тому, що вони розділяють розділи таким чином, що схожий не може. Погляньте, наприклад, на Вікіпедію. Деякі програми залежать від таких тегів, щоб "розбити" документи на частини або навіть створити автоматичну таблицю вмісту. Пошукова система припускає, що текст у <h1>тезі буде важливішим, оскільки це заголовок - заголовок.

Далі, хоча таблиці стилів чудові, деякі пристрої ігноруватимуть таблиці стилів і зосереджуватимуться лише на HTML-коді, де тег начебто <em>стане у нагоді. Якщо таблиці стилів були відключені або виникла проблема з завантаженням її (наприклад, проблеми з підключенням до Інтернету), текст все одно з’явиться форматованим. <em>Можна також сказати, що наголос на слові має бути наголошеним, тоді як курсивом по одній лише курсиві може бути що завгодно, від назви фільму до просто створення підпису до зображення, відмінного від звичайного тексту. Цим можуть скористатися ті, хто використовує інструменти для інвалідності, які в іншому випадку не здатні загалом акцентувати увагу.

<span>з іншого боку, це значною мірою вбудована версія <div>тегу, і якщо що-небудь, це може просто позбавити вас від необхідності вводити додатковий клас у (якщо говорити, чи дійсно ви хочете використовувати <span class="italic">замість <i>кожного курсивного екземпляра Це робить код більш важким для читання, менш стандартизованим (за широким припущенням, що більшість людей використовує останнє над першим) і жодним чином не покращує документ.

<p>Це також стане в нагоді для людей з обмеженими можливостями, оскільки забезпечує те, що текст може бути розбитий на керовані абзаци таким чином, який <br />не може.

Звичайно, можна сказати, що HTML не був призначений для стилізації, але є делікатна лінія між дизайном та стилем; і, чесно кажучи, я б сказав, що це було перевагою користувача. Незалежно від того, користуєтесь ви <i>чи <span class="italic">, це залежить від вас, і це не вплине на SEO. Зрештою, навіщо обмежувати нас лише одним із способів робити речі? (наприклад, як ми могли вибрати, використовувати чи не використовувати крапки з комою в кінці рядків у JavaScript - я завжди їх використовую, а інші ніколи їх не використовую, і це зовсім не має значення для функціональності.)