Теги логічного форматування тексту HTML. Форматування тексту

Таблиці досить широко застосовуються в електронній документації, причому для Web-сторінок вони використовуються не тільки в традиційному сенсі, як метод упорядкованого представлення даних, але і для форматування самих сторінок. Опис таблиці на мові HTML розміщується всередині тіла документа, тобто у контейнері і. У документі допускається будь-яке число таблиць, причому деякі з них можуть бути вкладеними. Кожна таблиця створюється у межах контейнера<ТАВLЕ>і, де розміщується опис структури самої таблиці та її вміст.

Кожен рядок таблиці розміщується після тега (Table Row). Кожен осередок таблиці в межах рядка оформляється тегом<ТН>(Table Header) - для заголовної частини таблиці або (Table Data) - для осередків, у яких розміщуються дані. У заголовній частині за умовчанням застосовується напівжирний шрифт та вирівнювання по центру. Для відображення даних за умовчанням використовується нормальне (світле) зображення та вирівнювання вліво. Можна відзначити, що для всіх тегів, перерахованих у цьому абзаці, тег, що закриває, не обов'язковий, тобто він може бути опущений.

Кількість рядків у таблиці визначається кількістю малих тегів , а кількість стовпців - максимальна кількість тегів<ТН>або в одному з рядків. Рядком вважається все те, що слідує після чергового тегу і до такого такого тега. Для комірки таблиці, яка не містить даних, треба використовувати порожній контейнер і. Якщо порожні осередки розташовані наприкінці рядка, їх опис може бути опущено - браузер самостійно залишить необхідне число осередків порожніми.

Таблиця може мати назву - те, що в редакційній практиці називається тематичним заголовком (на відміну від нумераційного), причому якщо в друкованому виданні заголовок обов'язково розташований над таблицею, то в електронному він може бути розташований зверху і знизу. Заголовок розташований усередині контейнера і. Вказаний контейнер повинен бути поміщений усередину тега-контейнера<ТАВLЕ>, але поза сферою опису тегів , або

У тезі спочатку було передбачено один необов'язковий параметр ALIGN, який призначався для вертикального вирівнювання і міг приймати одне з двох значень ТОР (за умовчанням) або BOTTOM. Потім з'ясувалась необхідність і горизонтального вирівнювання прагнучи стандартними параметрами LEFT, RIGHT і CENTER. Однак не можна в одному тегу двічі використовувати той самий параметр. Тому в сучасних версіях мови HTML параметр ALIGN (за замовчуванням ALIGN = LEFT) залишений для вирівнювання по горизонталі, а вертикальне вирівнювання (точніше - розміщення заголовка над таблицею) здійснюється за допомогою параметра VALIGN.

У тезі

можуть використовуватись такі параметри: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN, HEIGHT та BACKGROUND. Параметр BORDER управляє відображенням рамки навколо кожної комірки таблиці (тобто задає вертикальні та горизонтальні лінії сітки) і навколо всієї таблиці, причому його значення задає товщину рамки в пікселах навколо всієї таблиці, а саме наявність цього параметра задає лінії сітки. Значення параметра BORDER з'явилося лише у версії 3.2 специфікації HTML, до цього го тов щи на рамки навколо таблиці не регулювалася.

Параметр CELLSPACING задає відстань між суміжними по горизонталі та вертикалі осередками, причому ця відстань задається в пікселах, тобто всередині кожного осередку створюється щось на зразок рамки і лише при CELLSPACING = 0 ці рамки окремих осередків зливаються в єдину сітку. Параметр CELLPADDING визначає відстань між рамкою навколо комірки та даними всередині неї, тобто величину відступу символів від рамки. При значенні CELLPADDING=0 текст може стосуватися рамки, що у плані дизайну навряд можна вітати. За замовчуванням значення CELLSPACING=2, a CELLPADDING=1, у разі відстань між даними у сусідніх осередках дорівнюватиме б пікселам.

Параметри WIDTH і HEIGHT дозволяють задати ширину та висоту таблиці як в абсолютних одиницях – пікселах, так і у відносних – відсотках щодо розміру вікна браузера. Найчастіше ці розміри не потрібні браузеру, оскільки він автоматично обчислює розміри таблиці, враховуючи безліч чинників, включаючи параметри документа загалом, кількість осередків у таблиці та його заповнення. Браузер прагне встановити таку ширину таблиці, щоб вона містилася у вікні перегляду браузера і не було необхідності прокручування таблиці по горизонталі, тобто щоб горизонтальний слайдер був відсутній.

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

Параметр ALIGN визначає горизонтальне вирівнювання таблиці у вікні перегляду браузера. Можливі два значення цього параметра: LEFT та RIGHT, кожен із яких забезпечує обтікання таблиці текстом документа з протилежного боку. Це відповідає оборочній таблиці у друкованому виданні. За замовчуванням параметр ALIGN набирає значення LEFT. Якщо параметр ALIGN опущений, то тексту поруч із таблицею взагалі не буде, тобто таблиця буде форматною або смуговою (коли вона займає всю сторінку по вертикалі), якщо використовувати терміни, прийняті в друкованих виданнях. Значення параметра ALIGN=CENTER не передбачено. Однак, якщо ми хочемо орієнтувати таблицю по центру, можна піти іншим шляхом: укласти контейнер

n
, який описує всю таблицю повністю, у контейнер
і
. Нагадаємо, що останній має рівень блоку, тобто форматує будь-яку кількість даних, розміщених усередині нього (див. § 2.2).

Зазначимо, що параметр ALIGN може використовуватися і для форматування даних усередині кожної комірки таблиці, наприклад:

Приклад відображення браузером документа, що включає наведений вище фрагмент, показаний на рис. 2.8. На малюнку добре видно рамка навколо таблиці і те, що таблиця вирівняна вліво, а справа обтікається текстом. Як текст використаний фрагмент другого абзацу, що починається на цій сторінці. Слід звернути увагу, що хоча вся таблиця вирівняна вліво, дані у кожному рядку вирівнюються вправо. Формально можна було б у кожному осередку вирівнювати текст по-своєму. Однак візуально це виглядало б дуже непривабливо.

Для якісного дизайну лінії дані у всіх осередках стовпця таблиці повинні вирівнюватися однаково, тобто у прикладі на рис. 2.8Можливо було б залишити перший стовпець незмінним, а дані у другому вирівняти вліво (або навіть по центру).

Параметр BACKGROUND, який вже був показаний у наведеному вище прикладі, також може використовуватися як у тезі<ТАВLЕ>, так і в тегах<ТН>і

ПрізвищеОцінка
Іванов A.H.

Сергєєв І.Д.5
Лавров В.В. 3, Що визначають характеристики окремих осередків таблиці У всіх випадках він визначає фоновий рисунок за допомогою параметра HREF. В останній версії специфікації HTML у тезі<ТАВLЕ>з'явився параметр COLS, що задає загальну кількість колонок таблиці. Ця додаткова інформація прискорює процес побудови таблиці браузером.

p align="justify"> При створенні заголовної частини таблиці, рідше боковика і прографки (основної частини таблиці, де розміщуються дані), виникає потреба в об'єднанні декількох осередків по горизонталі (у рядку) або по вертикалі в єдине ціле. Для цього використовуються параметри ROWSPAN і COLSPAN, перший з яких об'єднує кілька рядків, а другий - стовпчиків в один осередок. Приклад опису такої таблиці наводиться нижче.

Об'єднання осередків у заголовній частині

3aголовокЗаголовок 2

Заголовок 2-1<ТН>Заголовок 2-2

1 2 3

Наведений нижче рис. 2.9 побудований на підставі HTML-документа, в тілі якого міститься наведений вище контейнер

і
зі всім його вмістом. Порівняно з таблицею, показаною на рис. 2.8 тут за допомогою тега
додано тематичний заголовок, вирівняний по центру таблиці. У таблиці добре видно рамки осередків та рамка навколо таблиці загалом. У осередку «Заголовок 1» об'єднано два рядки, а в осередку «Заголовок 2» - два стовпці, що відповідає вихідному HTML-коду. У третьому рядку, як це часто роблять для довгих вузьких таблиць, вказані номери колонок, що дозволяє при перенесенні на наступну смугу не повторювати заголовка цілком. Зазначимо, що використовуючи параметри ROWSPAN та COLSPAN можна скласти багаторівневі заголовки таблиць будь-якого ступеня складності

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

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

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

Інші теги логічного форматування: - служить для опису визначень; - служить виділення цитат; - ; - Використовується для введення з клавіатури користувача; - використовується для позначення результатів, що видаються програмами, виділення кількох символів моноширинним шрифтом: ; - використовується для символьних змінних; - використовується для абревіатур (СНД, КПРС, WWW); - використовується для скорочень (стор., англ.) з атрибутом TITLE; - Цитований текст у лапках.

Теги і використовуються, коли потрібно нагадати собі про те, що даний шматок тексту повинен бути (або вже) вставлений чи видалений. Застосовуються під час створення сайту групою дизайнерів. Можуть мати атрибути datetime, cite, title. У datetime можна вказати дату та час видалення/вставки. У cite ставиться посилання URL, яким міститься пояснення до цього уривку. За допомогою title пояснення вставляються у тег.

Не плутайте тег з тегом 

Є елементом рівня блоку, який слід використовувати для позначення великих фрагментів коду!



Логічне та фізичне форматування
Для форматування тексту HTML-документів передбачено цілу групу тегів, яку можна умовно розділити на теги логічногоі фізичногоформатування.
Теги логічного форматування позначають (своїми іменами) структурні типи текстових фрагментів, такі, наприклад, як програмний код(тег 
), цитата(тег<СIТЕ>
), абревіатура(тег< ABBR >) І Т.П.
За допомогою тегів<ЕМ>і можна, наприклад, відзначити окремі фрагменти як виділені,або сильно виділені.Зауважимо, що йдеться про структурної розмітки,яка впливає конкретне екранне уявлення фрагмента браузером.  Тому така розмітка і називається логічною.
Фрагменти з логічним форматуванням браузери відображають на екрані певним чином заданим за замовчуванням.  Вигляд відображення не пов'язаний зі структурним типом фрагмента (тобто ім'ям тега логічного форматування), але може бути легко перевизначений.
Теги фізичного форматування визначають формат відображеннявказаного у них фрагмента тексту у вікні браузера.
Наприклад, для відображення фрагмента курсивомможна використовувати тег курсиву 
.
Між розробниками HTML-документів тривалий час точилися суперечки про переваги та недоліки того чи іншого підходу.  З виходом специфікації HTML 4.0 ці суперечки завершилися на користь застосування логічного форматування, оскільки проголошено принцип відділення структури документа з його представлення.  Дійсно, тільки на базі логічного форматування можна гнучко керувати поданням документа, використовуючи сучасні методи (засновані на таблицях стилів, документах, що динамічно змінюються і т. д.).
Тим не менш, зараз може вільно використовуватися і фізичне форматування.  У специфікації HTML 4.0 деякі теги фізичного форматування не рекомендуються для застосування, однак поки вони все ще підтримуються всіма браузерами.  Зауважимо, деякі теги логічного форматування, покликані замінити окремі теги фізичного форматування, розпізнаються не всіма браузерами, що робить їх застосування вкрай незручним.
 
Теги логічного форматування тексту
 
Тег 
Тег< ABBR >відзначає свій текст як абревіатуру(ABBReviation).
Мова HTMLбув розроблений британським ученим Тімом Бернерсом-Лі приблизно у 1991-1992 роках у стінах Європейської ради з ядерних досліджень у Женеві (Швейцарія).  HTML створювався як мова для обміну науковою та технічною документацією, придатний для використання людьми, які не є фахівцями в галузі верстки.
 
Тег 
Тег< ACRONYM >.  Так само, як і тег< ABBR >, що використовується для позначки абревіатур.  Цим тегом рекомендується відзначати так звані акроніми,Т.  е. слова, що складаються з абревіатур.  Тег< ACRONYM >можливо в майбутньому використовуватиметься для невізуального відображення елементів, наприклад при мовному синтезі.
Цей тег зручно використовувати у поєднанні з параметром TITLE , як значення якого можна вказати повну версію абревіатури.  Тоді візуальні браузери при наведенні курсору на текст розмічений тегом< ACRONYM >, будуть видавати повне найменування у вигляді підказки, що з'являється.
ТПУ.
 
Тег H1...H6
HTML пропонує шість заголовків різного рівня, які показують відносну важливість розділу, розташованого після заголовка.  Так, тег 
є найбільш важливим заголовком першого рівня, а тег 
служить позначення заголовка шостого рівня і є найменш значним.  За замовчуванням, заголовок першого рівня відображається найбільшим шрифтом жирного зображення, заголовки наступного рівня за розміром менше.  Теги 

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


Заголовок другого рівня


Заголовок третього рівня
У браузері це виглядатиме так:
 
Тег<СIТЕ>
Тег використовується для позначення цитат або назв книг та статей, посилань на інші джерела тощо. буд. Браузерами такий текст зазвичай виводиться курсивом.

 Не можна сказати людині: "Ти можеш творити. Так давай, твори".  Набагато вірніше почекати, поки він сам не скаже: "Я можу творити, і я творитиму, хочете ви цього чи ні".



Айзек Азімов
 
Тег 
Тег відзначає свій текст як невеликий фрагмент програмного коду.Як правило, відображається моноширинним шрифтом.  Цей тег не слід плутати з тегом 
Елементом рівня блоку, який слід використовувати для позначки великих фрагментів (листингів) коду.

 
Код програми

 

 функція checkParent (src, dest) ( 
while (src! = null) ( 
if (src.tagName == dest) return src 
src = src.parentElement 

 } 
return null 

 }
 
 








Тег 
Тег відзначає свій текст як віддалений.Цей елемент корисно використовувати для позначення змін, які вносяться до документа від версії до версії.  Тег може використовуватися як елемент рівня тексту та як елемент рівня блоку.
Тег має два необов'язкові параметри: CITE та DATETIME .  Значення параметра CITE має бути URL-адресою документа, що пояснює причини видалення цього фрагмента.
Параметр DATETIME вказує дату видалення у форматі: YYYY-MM-DDThh:mm:ssTZD , що визначає рік, місяць, число, години, хвилини та секунди видалення, а також часовий пояс (Time Zone).
 
Теги фізичного форматування тексту
 
Тег 
В'язні між цими тегами мають властивості жирного тексту.  Має атрибут title - покликає текст у вигляді підказки.


Тег 
Даний тег збільшує розмір відображення тексту. Має атрибут title - покликає текст у вигляді підказки.
Приклад фізичного форматування


Тег 
Виберіть шрифт для тексту.  Атрибути:
  • size – розмір тексту від 1 до 7
    • 

  • color - колір тексту
    • 

Приклад фізичного форматування


Тег 
Цей тег вставляє в сторінку горизонтальну лінію.  Атрибути:
  • size - висота та товщина лінії
    • 

  • width - ширина лінії
    • 

  • noshade - створення лінії без тіні
    • 

  • color - змінює колір лінії
    • 



У цьому розділі ми знову будемо працювати з текстом, і на відміну від матеріалу, викладеного в другому розділі: подивимося на деякі речі під іншим кутом, а так само поговоримо про теги, що раніше не ввійшли в цей підручник, за допомогою яких так само можна форматувати текст  на сторінках сайту


Справа в тому, що всі теги призначені для роботи з текстом можна розділити на дві групи: "теги фізичного форматування тексту" та "теги логічного форматування тексту"


Тепер по порядку.


Теги фізичного форматування тексту.


Про теги фізичного форматування тексту в цьому підручнику йшлося раніше, тому повторяться, не стану, а просто перерахую їх:

 , , , , , , , , , , 
, , 
…


Це теги фізичного форматування тексту.


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


Про всяк випадок знову покажу старий приклад:


  

  

 Стилі тексту 

  

  

Наукова стаття. 
 
 
 
Якщо розбавити дистильовану воду Н 
 2
Про сорок процентів етилового спирту С 
 2
Н 
 5
ВІН то вийде рідина в 40 
про 
більш відому широкому загалу під назвою 
- Горілка. 
 
 
Вперше цю пропорцію  
доклав 
запропонував 
Дмитро Іванович Менделєєв. 
 
 
 
 

Розпиття спиртних напоїв шкодить вашому здоров'ю. 
 

 



 

 



Основне завдання тегів фізичного форматування тексту – це виконання суто декоративних функцій.


Однак якщо Ви вивчали, то напевно звернули увагу, що вище перелічені теги це далеко не всі інструменти для роботи з текстом!  А якщо Ви вивчали довідник скрупульозно і уважно, то напевно помітили, що деякі теги виконують одні і ті ж дії над текстом.


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


Так та не так.. відмінності є.. і вони досить суттєві!!..


Логічна розмітка тексту.


Перш ніж розповідати про нові теги розповім, про те, що слід розуміти під фразою: "логічна розмітка документа".


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


Тепер давайте знову повернемося до питання вище: "Чим відрізняється тег 
від тега 
?" - здавалося б яка різниця адже текст і там і там буде відображатися курсивом.. вся справа в тому що тег 
- (курсив) - є тегом фізичного форматування тексту та призначений насамперед для людей, а тег 
(Особливо важливий текст) - є тегом логічного формування тексту і призначений для машин!  А те, що текст, узятий у тег 
, Зазвичай у браузерах відображається курсивом - це всього лише, скажімо так "мода" і вигадка браузерів.


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


То які теги краще використовувати?  Ну, раз ми вже заочно познайомилися з тегами 
і 
покажу приклад, коментарі будуть нижче.


  

  

  

 Як створити сайт 

  

  

 

Як створити сайт? 

 

 
Для того щоб 
самостійно створити сайт 
Для початку в блокноті потрібно написати такі теги:
 

  - початок документа

  - початок голови

  - закриття голови

  - початок тіла

 



 - закриття тіла

  - кінець документа

 



 

  


Тепер поясню, чому на сторінках даного сайту, як і в прикладі вище, у деяких випадках використовуються теги 
і 
, а в інших випадках і 
 .


Вся справа в тому, що мені як творцю даного сайту дуже хочеться, щоб люди набравши в тому ж кути фразу: " Як створити сайт?" або " Самостійне створення сайту" бачили у перших рядках пошукової видачі гугла посилання: " " і переходили нею на головну сторінку мого ресурсу:) Так от помітивши потрібні мені шматки тексту з допомогою тегів 
і 
, я тим самим даю зрозуміти гуглу, що цей текст важливий і що на нього слід звернути особливу увагу!  - звичайно, це не запорука успіху, тим більше для настільки популярних (високочастотних) запитів користувача, але за інших рівних умов, це великий плюс в очах пошукових систем.


І протилежний випадок.


Як людина, яка намагається зробити сайт зручним для читання та сприйняття іншими людьми, я виділяю деякі ділянки тексту курсивом (гумор, примітки та іншу відсеб'ятину) та жирним шрифтом (теги, що вивчаються в прикладах), але я не хочу, щоб пошукові системи звертали сильну увагу на фрази  типу: "початок голови" "закриття тіла" - так як сайт написаний для веб-ремісників-початківців, а не для початківців патологоанатомів, тому розмічаю такий текст тегами і 
- вони дають необхідний результат, що напівжирний шрифт і курсив, але не є "червоною ганчіркою" для програм.


Теги логічного форматування тексту.


Розібравшись із суттю та призначенням логічної розмітки тексту, настав час познайомити Вас із тегами, які здатні розбавити сухий текст певним змістом.


Буду перераховувати.


Тег 


Виділяє в тексті абревіатуру.  Браузерами зазвичай підкреслюється пунктирною лінією.


 
 CSS 



Практично до всіх тегів застосуємо атрибут title- підказка, так ось якщо Ви в тексті виділяєте якусь абревіатуру, намагайтеся давати до неї розшифровку, використовуючи даний атрибут.


  title="Cascading Style Sheets">CSS!} 
дозволить Вам легко змінити стиль будь-якого тега логічного форматування тексту!


Тег 


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


Вступай у  title="комуністична спілка молоді">комсомол!} 
!!


Так само як і з абревіатурою для розшифрування тексту, бажано використовувати атрибут. title .


Тег 



 

Вася Пупкін м. Урюпинськ Макаронна фабрика 2010р. 




Тег 


Виділяє у тексті цитату чи виноску інший документ.  Зазвичай браузери відображають курсивом.


Як сказав Остап Бендер 




Тег 


Позначає текст як програмний код.  Зазвичай відображається моноширинним шрифтом.


 
 function() 
- так позначається функція в PHP


Тег 


Виділяє видалений текст у новій версії документа.  Виділений текст стане перекресленим.


Нагадує теги фізичного форматування 
та скорочений 
- Перекреслений текст.


Використання тега 
, більш переважно, оскільки крім того, що він розбавляє текст логікою, ще й замінює собою теги. 
і 
, які позначені специфікацією 4.01 як небажані.


 
Стара ціна 1000р. 
- Нова 999 р.!


Тег 


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



 
Акронім 
- абревіатура, утворена з початкових літер, слів або словосполучень, що вимовляється як єдине слово, а не буквально.


Тег 


Виділяє новий текст у новій версії документа.  Виділений текст у більшості браузерів стане підкресленим.


Протилежний за значенням тегу 
з ним же у парі зазвичай він і використовується.


 Стара ціна 1000р. - 
Нова 999р. 
!!!


Тег 


Виділяє важливий фрагмент тексту.  Зазвичай відображається курсивом.


 
Як створити сайт? 
- Дізнайся на Вебремесло.ру!!


Тег 


Від англійської keyboard – клавіатура.  Вказує текст, що вводиться з клавіатури, або назви клавіш.  Зазвичай відображається моноширинним шрифтом.


Натисніть 
 Ctrl+Z 
для того, щоб скасувати останню дію.


Тег 


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


Як сказав Остап Бендер 
Крига зрушила!  панове присяжні засідателі! 



До речі, є ще й тег фізичного форматування тексту 

цей тег теж позначає текст як цитату і навіть виділяє його відступами і переносами рядків від решти тексту.


  

  

  

 Цитати 

  

  

 
 логічногоформатування тексту : 
- браузери автоматично беруть таку цитату у лапки.  До речі виходячи за рамки теми, видом лапок легко керувати за допомогою CSSпсевдокласу langта його значення quotes- лапки.
 

 
Ця цитата створена за допомогою тега логічногоформатування тексту : Крига зрушила!  панове присяжні засідателі.. Остап Бендер.  12 стільців.
- Зазвичай браузерами вона відображається курсивом.  Друге покликання такого виду цитати – це виконання ролі виноски на інший документ.
 

 
А ця цитата створена за допомогою тега фізичногоформатування тексту 
: 
Крига зрушила!  пани присяжні засідателі.

- в основному тексті вона виділяється відступами та переносами рядків, як правило, такою цитатою позначають довгі шматки тексту, взяті з інших джерел.
 

 



 

  


Такі ось відмінності.


Тег 


Позначає текст, який виводиться на екран у результаті роботи будь-якої програми.  Зазвичай браузерами відображається моноширинним шрифтом.


У процесі розв'язання задачі 2+2 програма видасть відповідь: 
 4



Тег 


Виділяє важливий фрагмент тексту.  Зазвичай відображається жирним.


 
Як створити сайт? 
- Дізнайся на Вебремесло.ру!!


Тег 


Виділяє текст, як змінну у роботі будь-якої програми.  Зазвичай браузер відображається курсивом.


Ця функція використовує змінну 
$count 



Ну от, власне, і всі теги створені для логічної розмітки тексту.  Приклади показувати не стану, думаю і так все зрозуміло, а ось кілька корисних порад щодо розмітки тексту в документі дам.



    Стиль всіх тегів як логічного, так і фізичного форматування тексту чудово налаштовується за допомогою засобів CSS!  Моя Вам порада, якщо до цього моменту ще не знайомі з ним.  При використанні властивостей CSS у роботі з текстом Ви забудете про проблему кросбраузерності, тобто Ваш текст буде відображатися у всіх браузерах саме так, як потрібно Вам, а не тому, що заманеться браузеру.  Крім того, СSS відкриває куди ширші можливості пов'язані як зі стилем тексту, так і з дизайном сайту в цілому.
    Намагайтеся правильно розмічати текст на сторінках Вашого сайту.
    

    Для початку, розбийте весь текст на параграфи за допомогою тега 
    
- це полегшить читання тексту як для людей так і для програм, крім того, дозволить Вам надалі легко керувати текстом за допомогою CSS.  Взагалі намагайтеся не залишати "голі" слова та речення, не взяті в якийсь тег форматування тексту.
    

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

    Використовуйте теги логічної розмітки лише там де вони дійсно необхідні т. е. не варто наприклад виділяти абревіатуру за допомогою цитати і навпаки. на те вона і логіка що все було б логічно!!
    

    Використовуйте 
і 
у тих випадках, якщо Ви хочете акцентувати увагу на тексті не тільки людей, але пошукових систем, в інших ситуаціях використовуйте і 
 .
    Коли вивчіть CSS забудьте та викиньте з голови тег 
і всі його атрибути!  Їм вже давно ніхто не користується, ну за рідкісним винятком звичайно.
    



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