Тег закреслений. Теги html які використовуються для оформлення тексту. Як виділити текст підкресленням у html

До цього часу для закреслення тексту в HTML-коді широко застосовується тег , який є скороченим написанням тега . Серед безлічі значень англійського слова "strike" є "черкати" і "викреслювати". Ось як виглядають результати використання цих двох тегів:

  2. текст, закреслений за допомогою тега → текст, закреслений за допомогою тега

Як бачимо, результат ідентичний. Всі сучасні браузери розуміють ці теги, але обидва вони нерекомендовані для використання. У специфікаціях XHTML та HTML5 вони взагалі відсутні. Та й у специфікації HTML 4.0 теж описуються як небажані.

Причина цього полягає в тому, що теги і ставляться до класу про тегів фізичного форматування. Тобто вони не несуть якогось смислового навантаження і лише визначають стиль відображення тексту. Однак сама по собі мова розмітки HTML призначена саме для семантичної розмітки тексту. Для візуального форматування призначені таблиці стилів CSS.

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

  1. текст, закреслений за допомогою тега → текст, закреслений за допомогою тега

Як бачимо, візуально немає жодної різниці між , і , Але за змістом - дуже велика різниця.

Тег призначений для того, щоб відзначати видалені рядки тексту. Тобто він несе певну логічну інформацію про текст і належить до класу про семантичних тегів HTML. Форматування тексту як закресленого при застосуванні – це призначення цього тега лише наслідок його логічної суті.

Ще раз повторюся: якщо вам байдужа ідеологія мови розмітки HTML і важливий лише візуальний ефект, просто вважайте, що для закреслення тексту призначено тег а не або . Хоча б з таких самих міркувань, з яких пишете «професіоналізм», а не «професіоналізм».

Крім того, тег більш функціональний, ніж і . Він вміє передавати додаткову інформацію про текст за допомогою атрибутів «cite» та «datetime»:

  • Атрибут « cite» призначений містити посилання на документ, в якому наведено причину видалення тексту і, можливо, інші подробиці про його редагування.
  • Атрибут « datetime» призначено вказувати дату та час редагування цього тексту.

Що ж робити, якщо потрібно вивести текст як закреслений, але позначати його як віддалений не хочете? Як вже було згадано вище, вам допоможе CSS. Більш конкретно - властивість "text-decoration", яка має значення "line-through". Ось так, наприклад, це можна зробити:

  1. текст, закреслений засобами CSS → текст, закреслений засобами CSS

Занадто багато коду? Згоден. Тому можна його зменшити, винісши інструкції CSS в окремий файл. У ньому можна, наприклад, в такий спосіб описати клас закресленого тексту:

S ( text-decoration: line-through; ) Це дозволить писати в HTML-коді таким чином:

  1. текст, закреслений засобами CSS → текст, закреслений засобами CSS

Цей код також довше, ніж у випадку з Але якщо хочете долучитися до семантичного Інтернету, з такою надмірністю доведеться примиритися. Вдалого вам закреслення!

Попередні публікації:

CSS дозволяє проводити найрізноманітніші операції, пов'язані з декоративною окрасою всієї сторінки. Особлива увага приділяється тексту, який у більшості випадків заповнює більшу частину всіх сайтів. Сьогодні ми з вами розглянемо одну цікаву властивість: надкреслений, підкреслений та закреслений текст. Всі ці ефекти встановлюються за допомогою одного правила CSS.

Присвоєння

Підкреслити та закреслити текст у CSS можна за допомогою команди "text-decoration". Ефект залежатиме від того, яке вказане значення. CSS було вигадано, щоб розділити логічну та структурну частину веб-сторінки. Але до появи каскадних таблиць стилів використовувалися HTML-теги, що мали аналогічне значення. Наприклад, такий елемент, як дозволяє вивести закреслений текст. Наразі цей тег визнаний небажаним, і його застосування автоматично зробить ваш код сторінки невалідним. Хоча при цьому елемент досі підтримується всіма сучасними браузерами та використовується деякими розробниками. Але повернемось до CSS. Команда «text-decoration» може мати такі значення:

  • Underline. Призначивши це значення, ви отримаєте
  • Overline. Лінія проходитиме над певним фрагментом сторінки.
  • Line-through. Створює перекреслений або закреслений текст.
  • Blink. Виділений фрагмент документа періодично зникатиме і знову з'являтиметься.
  • Також є значення "none" та "inherit". Перше скасовує всі ефекти, а друге наказує успадковувати властивість батьківського елемента.

Призначення

Здавалося б, що CSS закреслений текст і подібні ефекти служать лише для прикрашання тексту. Найчастіше це твердження правдиве. Але іноді варто подумати над питанням: для чого створювалися такі елементи? Наприклад, вже застарілий тег "strike" використовувався для позначення неправильної чи старої інформації. Читачі, побачивши перекреслений текст, розуміють приховане значення такого позначення. Підкреслені слова завжди відразу виділяються із загального потоку. Тому такий ефект необхідно використовувати виділення важливої ​​інформації. Значення «blink», яке робить миготливим текст, використовується досить рідко, оскільки серед програмістів прийнято вважати такий ефект неприйнятним. Адже мало кому з ваших читачів подобаються миготливі символи, які постійно відволікатимуть їх. Ну а значення overline використовується тільки для прикраси тексту.

Особливості

Хоча всі значення властивості «text-decoration» входять у специфікацію версій каскадних таблиць, все ж таки деякі значення не підтримуються сучасними браузерами. Наприклад, миготливий текст не буде видно в IE. Браузер Google Chrome не сприймає певних значень. Мобільні платформи неповноцінно підтримують цю властивість.

Висновок

Такі ефекти, як закреслений текст та інші схожі значення, використовуються досить часто на просторах Інтернету. Їх використання дозволяє правильно висловити основну ідею автора, допомагаючи концентрувати увагу читачів на потрібній частині тексту. Але не варто занадто старатися і за будь-якої можливості застосовувати властивість «text-decoration». Адже зайва прикраса тексту може зашкодити вам та вашим читачам.

Розглянемо всі способи, як можна зробити закреслений текст через html і CSS. Існує два варіанти реалізації:

  • Через html теги , і
  • Через властивість CSS text-decoration

1. Закреслений текст через html теги , і

Весь текст укладені у html теги , і стає закресленим. Незвичайна літера s відбулося скорочення від англійського слова "strike".

Різниці між усіма трьома тегами візуально відсутні. Однак останній варіант з використанням html тегу вважається кращим, оскільки він підтримується в стандарті HTML5. Інші теги не підтримуються (вони, звичайно, будуть відображатися коректно, але валідацію не пройдуть).

Звичайний шрифт. Закреслений текст через тег s

Звичайний текст. Закреслений текст через тег strike

Звичайний текст. Закреслений текст через тег del

Перетворюється на сторінку в

Звичайний шрифт. Закреслений текст через тег s

Звичайний текст. Закреслений текст через тег strike

Звичайний текст. Закреслений текст через тег del

2. Закреслений текст через властивості CSS text-decoration

CSS має властивість text-decoration , яке відповідає за підкреслення тексту.

Синтаксис CSS text-decoration

text-decoration : none|underline|overline|line-through|inherit;
  • none - текст без оформлення
  • underline - нижнє підкреслення
  • overline - верхнє підкреслення
  • line-through - закреслення тексту
  • blink - мерехтливий текст (рекомендується не застосовувати це значення)

Нас цікавить значення line-through, яке задає закреслення тексту.

Для початку поговоримо про заголовках. У попередніх уроках Ви могли бачити, як використовується текст. Однак, поряд з ним, у html є теги, що позначають заголовки: h1, h2, h3, h4, h5, h6. Вони йдуть гаразд від найбільшого, до найменшого: h1- найбільший заголовок, h2- трохи менше, ну а h6, Останній з них, відповідно найменший.



html заголовки

Заголовок 1


Заголовок 2


Заголовок 3


Заголовок 4





Демонстрація Завантажити вихідні
Вказаний вище код відобразить наступне

Увага! одразу хочу сказати, що заголовки треба використовувати акуратно! Пошуковий робот, який створює масив інформації за вашим сайтом у ПЕРШУ чергу за Контентом аналізує заголовки. І якщо, наприклад, у них буде порожня інформація на кшталт Цікаво, Увага, А тут ще цікаво, То це піде в мінус Вашому сайту!

Відразу звертайте на це увагу та робіть заголовки інформативними! Наприклад: Введення у соціологію, Парадокс Енштейна-Подільського-Розена, Життєпис Горація, Юрський період, в яких повинен міститися сенс всієї або проміжної інформації даної сторінки.

Форматування тексту в HTML

Напевно, Ви вже помітили, що якщо Ви переносите рядок і продовжуєте друкувати текст у коді, сам текст все одно йде в один абзац без перенесення рядка. Для того, щоб перенести рядок, потрібно використовувати одиночний тег. brу місці примусового перенесення.

Найчастіше (і правильніше) для перенесення рядка та позначення абзацувикористовують тег p (параграф). У разі використання даного тегу абзаци у Вас розділятимуть відступами один від одного.



html параграфи

Текст першого абзацу. Текст першого абзацу. Текст першого абзацу. Текст першого абзацу.


Текст другого абзацу. Текст другого абзацу. Текст другого абзацу. Текст другого абзацу.





Демонстрація Завантажити вихідні

У тега pє атрибут alignщо відповідає за вирівнювання параграфа. Може мати такі значення:

left- вирівнювання по лівій стороні
right- вирівнювання з правого боку
center- по центру
jastify- по ширині

Розглянемо приклад коду вирівнювання тексту по лівій стороні, по правій та по центру



html вирівнювання параграфів

Текст першого абзацу. Текст першого абзацу. Текст першого абзацу.


Текст другого абзацу. Текст другого абзацу. Текст другого абзацу.


Текст третього абзацу. Текст третього абзацу. Текст третього абзацу.






Демонстрація Завантажити вихідні

Також існує тег center. Він центрує його вміст (текст, зображення тощо). Для тексту його дія аналогічна до вирівнювання по центру.



центрування в html

Текст центром




Як виділити текст напівжирним у html?

strong- стандартне виділення тексту жирним.
b- Виділення ключового слова жирним. Ужито раніше тега strong, тому деякі вважають його застарілим (проте тег використовується в HTML5). Нарівні зі strong сприймається пошуковими системами щодо ключових слів, словосполучень.
Увага! Виділення тексту даними тегами розуміється пошуковою системою як особливо важливе.
Будьте уважні:
1. виділяйте тільки важливіслова та словосполучення
2. важливі – це не чверть тексту. Намагайтеся обмежити застосуванняцього тега.

Розглянемо приклад коду виділення тексту жирним



html виділення жирним

Якщо Ви хочете виділити якусь фразу, щоб вона просто була видна користувачеві,
наприклад, нагадування, то робимо так. Або так у разі ключового слова





Демонстрація Завантажити вихідні
У браузері з'явиться таке

І ті, й інші слова будуть виділені жирним, проте для Пошукової Системи буде важливими є слова ключового слова

Як виділити текст курсивом у html?

i- Виділення курсивом. Даним відкриваючим та закриваючим тегами слід виділяти лише важливу інформацію (ключові слова), оскільки пошукові системи будуть видавати дані, орієнтуючись на них.
em- Стандартне виділення курсивом. Немає обмежень у використанні.
cite- даний вид курсиву використовується для цитати, посилання на матеріал та авторів.
dfn- для виділення визначень та термінів.

Розглянемо приклад коду з виділенням тексту курсивом



Допустимо сторінка про машини

Mercedes-Benz- це німецький автоконцерн, заснований 1886 року.
Назва походить від двох марок - Мерседесі Бенц.
Він займається в основному випуском легкових автомобілів преміум-класу, вантажних автомобілів, автобусів.

http://ua.wikipedia.org/wiki/Mercedes-Benz





Демонстрація Завантажити вихідні
У браузері з'явиться так

Як виділити текст підкресленням у html?

u- стандартне виділення підкресленням (краще використовувати з останніми специфікаціями html)
ins- так позначаються нові дані (текст, пояснення), вставлені у Ваш документ (або додані, або замість старих). Виділяються підкресленням

Дані і в першому, і в другому випадку будуть виділені підкресленням.

Як зробити перекреслений текст у html?

Перекресленим виділяється текст у наступних тегах
del- Внесене виправлення.
strike- Стандартне перекреслення.
s- скорочений запис strike



Перекреслений текст у html

Двічі два одно п'ятичотири. Звичайний перекреслений текст





Демонстрація Завантажити вихідні

Як виділити текст у верхньому та нижньому індексах у html?

sub- тег, що відображає текст нижче рівня рядка меншим шрифтом розміру.
sup- тег, що відображає текст вище рівня рядка меншим шрифтом розміру.



індекси у html

a 2+b 2= c 2- теорема Піфагора.


H 2 O – хімічна формула води.





Демонстрація Завантажити вихідні
У браузері з'явиться таке

Тег font у html

Для редагування тексту в HTML також використовується тег font. Однак із введенням блокової верстки та популярністю CSS даний спосіб швидко почав забуватися.

Тег fontвказує параметри шрифту (тип шрифту, розмір, колір). Він має відповідні атрибути:

face- Назва шрифту. Можна наводити кілька назв шрифтів (чере кому), так як у користувача, що переглядає Ваш сайт, такого шрифту може НЕ бути за замовчуванням або він не буде підтримувати цю мову. Наприклад, користувач з Польщі або Китаю. Відповідно, якщо цей шрифт не знайдено, використовується наступний за списком.

size- активні значення від 1 до 7. Шрифт мовчання дорівнює 3.

color- Колір тексту. Якщо не вказати параметр, то текст буде чорним.



Тег font у html

Tahoma шрифт, розмір 5, колір синій.





Демонстрація Завантажити вихідні
Повторюся, цей спосіб застарів, тому раджу не звикати його використати.

Чи можна вивести текст у вигляді, у якому надрукував(а). Тег PRE

Так, справді можна полегшити собі життя та позбутися багатьох відступів, переносів та іншого. Для цього існує тег pre. Кількість пробілів, більша за один, у коді прирівнюється до одного, проте pre текст залишається в такому вигляді, в якому його ввели.



Тег pre в html

Як захотіли ввести текст 
так він і відобразився!  =)





Демонстрація Завантажити вихідні
У браузері буде так

Інші теги для форматування тексту

Тег abbrпозначає абревіатуру. Абревіатура - скорочене слово чи словосполучення. Абревіатури можна зустріти всюди, наприклад, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
атрибуту title



Тег abbr в html

HTML





Демонстрація Завантажити вихідні
У браузері виглядатиме так

Тег acronymна відміну абревіатури позначає усталені слово (акронім), що вживається як самостійне. Наприклад: СРСР (Союз Радянських Соціалістичних Республік), СНІД (Синдром набутого імунного дефіциту), США (Сполучені Штати Америки).
Слово виділене в ці теги виділяється пунктиром і при наведенні виводить вміст атрибуту title



Тег acronym в html

HTML




Горизонтальна характеристика в html або тег hr

Для позначення горизонтальної лінії в HTML використовується тег hr. Звіру та знизу він виділяється відступами.

Цей тег має наступні атрибути:
align- Вирівнювання горизонтальної лінії. Раніше згадувалися типи вирівнювання: по лівому краю (left), по центру (center), по правому (right).
width- фіксує довжину риси у пікселях чи відсотках
size- товщина лінії
color- колір лінії
noshade- прибирає рельєфність лінії



Тег font у html

Звичайна лінія

Лінія центру довжиною 50% від ширини блоку, товщина лінії 2

Лінія праворуч, синя, 200 пікселів





Демонстрація Завантажити вихідні
У браузері

Дякую за увагу! Урок був довгий та складний! Ви зробили великий крок уперед!


Для закреслення тексту в HTML застосовується тег strike:

  1. Електроник
  2. Сироїжкін
  3. Смирнов
  4. Чижиків
  5. Зозуліна

Результат виконання цього коду:

  1. Електроник
  2. Сироїжкін
  3. Смирнов
  4. Чижиків
  5. Зозуліна

Цей тег не має атрибутів. Замість тега HTML strikeможе використовуватися і скорочена його версія - s(аналогічно, жирний - b, курсив - i, підкреслений - u):

Конструктор LEGO"Нубекс"

Як ви можете бачити, результат аналогічний:

Конструктор LEGO "Нубекс"

Використання тега sі strikeвважається невірним з погляду валідації коду (необхідно використовувати перехідний). Або інший варіант – використовувати CSS.

Перекреслений текст: CSS

За допомогою CSS текст можна "декарувати" за допомогою якості text-decoration. Ця властивість може приймати такі значення:

  • line-through- використовується для перекреслення тексту;
  • underline- Наголошує текст;
  • overline- використовується для розміщення лінії над текстом (накреслений текст);
  • blink- тест блимає (кожну секунду);
  • none- дозволяє скасувати всі ефекти, застосовані до тексту.

Зазначені значення можуть бути застосовані одночасно, для цього потрібно записати потрібні параметри через пропуск. Наприклад, застосуємо одночасно підкреслення, надкреслення та миготіння:

Text-decoration: underline blink overline;

Зробимо тепер перекреслений текст за допомогою CSS:

Закреслений текст CSS - "Нубекс"

Конструктор LEGOсайтів "Нубекс"





ПОХОДЖЕННЯ СТАТТІ