Здрастуйте, шановні читачі блогу . Сьогодні ми почнемо розмову про теги в мові Html, а саме про заголовки H1, H2, H3, H4, H5, H6, про абзаци P і переноси рядків Br, а також про тег горизонтальної лінії Hr, на прикладі якого ми розглянемо використання атрибутів і подивимося, де можна буде дізнатися про всі можливі для кожного елемента атрибути і підглянути синтаксис значень для них.
В кінці статті про директиви Doctype і коментарів в ХТМЛ ми почали обговорювати теги, торкнулися такого поняття як блочні (block elements) і рядкові елементи (inline elements). Малі (текстові) використовуються для оформлення шматків тексту, а блокові — для формування структури документа. Причому, є важливе правило мови гіпертекстової розмітки — всередині рядкових тегів блочних елементів бути не повинно.
Теги заголовків H1-H6, абзацу P і переносу рядка BR
В тій статті, де ми почали розгляд поняття блокових і рядкових елементів, в якості прикладу було наведено найбільш наочні представники цих двох класів: Div та Span. Перший відноситься до блочних, а другий — до рядковим. Т. о. всередині Div контейнерів можна буде додавати Span, а навпаки вже не можна.
Точніше можна, але це вже буде не валидная верстка, тобто не відповідає стандартам мови розмітки, які докладно описані в валидаторе WC3).
Головна відмінність малих і блокових тегів складається в тому, що перші можуть слідувати один за одним по ширині, поки не закінчиться відведений для цього місце, а потім вони будуть перенесені на наступний рядок.
Блокові елементи, за замовчуванням, намагаються зайняти вільне місце по ширині і тому наступний блоковий елемент буде обов’язково розташовуватися на іншому рядку.
Давайте тепер почнемо планомірне вивчення всіх можливих тегів в Html і при цьому будемо звертати особливу увагу на те, до якого саме типу вони належать, щоб чітко уявляти для себе можливості їх правильного (валідного) використання. Спрощена структура тега виглядає так:
Для них передбачені також атрибути (для кожного свій набір), які дозволяють додати певні властивості цього елемента, але про це ми вже поговоримо на конкретних прикладах.
Давайте почнемо розгляд з такого поняття, як заголовки, які формуються з допомогою парних тегів H1, H2, H3, H4, H5, H6 (назва походить від першої літери слова «Header», тобто «заголовок»). Вони покликані відокремлювати один від одного різні фрагменти тексту і позначати їх важливість в залежності від рівня. У сучасній версії мови Html теги і всі допустимі атрибути заздалегідь обговорені і описані.
Внаслідок цього, рівнів у заголовків може бути тільки шість і, крім цього, елементи H1-H6 є блоковими, тобто прагнуть зайняти вільне місце по ширині сторінки. Але у них є одна особливість — всередині тегів заголовків можуть перебувати тільки рядкові елементи, незважаючи на те, що, наприклад, все той же Div дозволяє включати всередині себе інші блокові теги.
Т. о. браузер не дасть вам, наприклад, укласти всередину заголовків одного рівня ще і заголовки іншого рівня, бо, повторюся, вони є блочними елементами, але всередині них можуть знаходитися тільки рядкові. О, як.
Заголовки різного рівня H1-H6 будуть малюватися в браузерах шрифти різних розмірів (хоча, використовуючи CSS, ви можете задати абсолютно будь-який розмір, колір і тип шрифту для відображення в браузері, але в чистому Html діють такі правила):
Якщо розглядати верстку сайту з точки зору зручності його подальшого просування (Розкрутка та просування сайту самостійно), то варто обмовитися про те, що повинен бути тільки один заголовок рівня H1 на сторінці. Напевно, можна використовувати і два H1, але більша їх кількість швидше за все викличе негативну реакцію в пошукових систем, коли вони будуть визначати її релевантність і проводити ранжування вашого документа. Ваші дії можуть бути розцінені як спам або накрутка релевантності.
Також не рекомендується пропускати рівні заголовків, тобто після H1 слід використовувати H2 для виділення менш важливих фрагментів тексту і т. д. Навряд чи це спричинить якісь серйозні санкції з боку пошукових систем, але все ж краще дотримуватися логіки у формування рівнів заголовків в Html коді.
Пошукові системи приділяють словами, укладених у ці теги, більше значення, ніж словами, просто стоять в тексті. Звідси випливає висновок, що при написанні статей слід обов’язково додавати ключові слова у використовувані вами заголовки.
Ну, а сама по собі використання заголовків у тексті статті робить її більш наочною і допомагає читачам швидше зорієнтуватися в наборі інформації. Думаю, що на перший час буде досить і пора рухатися далі.
Параграф, перенесення рядка та горизонтальна лінія HR в Html коді
Тег P утворюється від слова «paragraph», але частіше все ж його називають абзацом. Вони використовуються для смислового виділення деякого шматка тексту, включає, як правило, кілька пропозицій. Між параграфами, утвореними елементами P по вертикалі, з’являється порожній простір, яке й дозволяє відокремити логічні шматки тексту візуально один від одного.
Вся справа в тому, що людині досить складно читати моноліт тексту, якщо він не розбитий на окремі невеликі фрагменти. Я так, наприклад, взагалі навіть не починаю читання статей не розбитих в Html коді абзацами, бо сильно напружує.
Розбиваючи текст ви сильно зменшує поріг стомлюваності відвідувачів вашого ресурсу і покращуєте користувальницькі фактори (час, проведений користувачем на вашому сайті і показник відмов у статистикою відвідуваності сайту), які в свою чергу позитивно впливають на просування.
Для цих же цілей (утримання уваги користувачів і зниження його стомлюваності при читанні статті) в текст здійснюють вставку картинок, додають різні маркіровані, нумеровані і вкладені списки, а іноді, можливо, і таблиці.
До речі кажучи, тег абзацу P, як ви вже, напевно, помітили, є парним, але по специфікації мови гіпертекстової розмітки 4.01 закриває елемент для нього зовсім не обов’язковий. В цьому випадку браузер буде зобов’язаний сам збагнути, де його потрібно проставити.
Так як P є блоковим елементом і всередині нього можуть стояти тільки рядкові. Отже, браузер, виявивши відкриваючий тег параграфа, розбирає код далі і як тільки наткнеться на наступний блоковий елемент (швидше за все це буде наступний відкриває P), то тут же перед ним вставляє закриваючий тег абзацу. В стандарті Html 5 таких вольностей швидше за все вже не буде і треба відразу звикати закривати всі теги і писати їх тільки малими літерами.
Параграф представляє з себе блоковий елемент, тому текст всередині абзаців буде прагнути зайняти весь доступний йому місце по ширині. Тобто, якщо ви в коді Html документа написали чотиривірш так, як це і годиться (кожен рядок окремо), та уклали це чотиривірш цілком теги абзацу P, то в браузері ви побачите, що всі ваші чотири рядки зіллються в одну і будуть займати по ширині все доступне для тексту простір.
Чому так відбувається, ми вже досить докладно обговорили в статті про символи пробілу в Html коді. Завдяки цій властивості мови гіпертекстової розмітки (що будь-яке число пробільних символів у вихідному коді при відображенні в браузері буде замінюватися на один пробіл) ви можете будь-яким зручним способом форматувати ваш код, при цьому не боячись порушити його відображення на вебсторінці.
Ну, а якщо вам потрібно буде дійсно написати чотиривірш у загальноприйнятому вигляді, то можете для цієї мети використовувати додаткові Html
теґи розриву рядків під назвою BR
(від слова «break»):
BR є рядковим елементом і до того ж «порожнім», тобто одиночним (не має закрывавшего елемента). Вся функція BR полягає в тому, що він викликає перенесення рядка при відображенні тексту в браузері (аналогічний клавіші Enter в будь-якому текстовому редакторі).
Написання тегів BR (перенесення рядка) в коді ніяк не регламентується. Можна написати весь текст злитно і поставити замість пробілів в потрібних місцях BR, а можна відразу для наочності в коді вже розбити текст на рядки та поставити BR або в кінці рядків, або до їх початку. Суті це не змінює.
HR (абревіатура від слів «horizontal rule», тобто горизонтальна лінія) — дуже простий Html тег, який малює горизонтальну лінію (смужку) у всю ширину екрану і товщини, залежить від браузера, в якому вона проглядається (по суті це візуальний маркер, який за аналогією з тегами заголовків дозволяє розбивати текст на логічні шматки для їх більш простого засвоєння).
Він є «пустим» (одиночним), тобто не має пари (закриваючого тега). Крім цього, HR є блоковим елементом, тобто він займає за замовчуванням всю доступну йому ширину сторінки.
Поняття атрибутів і правила їх написання в Html теги
Давайте на цьому простому елементі розглянемо таке поняття, як атрибут. Справа в тому, що в теги ми можемо додавати допустимі і описані в валидаторе WC3 атрибути, тим самим надаючи вмісту потрібне нам властивість.
Наприклад, якщо у вас йдуть підряд кілька параграфів (абзаців) ув’язнених у відповідні теги P, то для зміни зовнішнього вигляду одного з них вам потрібно всього лише додати відкриває елемент P цього абзацу необхідні атрибути. У разі поодиноких (порожніх) тегів, варіантів куди додати необхідний атрибут взагалі не виникає.
Отже, перше правило — атрибути ставляться тільки в початковому тегу (закриває ніколи нічого не містить). В одному елементі може стояти кілька атрибутів, які розділяються між собою і між назвою тега пробілом (обов’язкова умова). Давайте я відразу наведу приклад їх використання для горизонтальної лінії HR:
Отже, спочатку давайте пробіжимося по синтаксису атрибутів. Вони вставляються в відкриваючий тег, що пишуться через пропуск (у тому числі пробіл ставиться і після назви елемента) і являють собою конструкцію, що включає назву, знак «дорівнює» і написані в лапках (зазвичай прийнято ставити парні подвійні, але стандартом допускаються і парні одинарні лапки) значення. Порядок атрибутів у Html-коді тега не важливий.
Тут виникає питання, а де можна дізнатися перелік допустимих атрибутів для будь-якого тега, який вас цікавить, і дізнатися всі можливі значення, які можуть бути використані для нього. Тут нам допоможе перша стаття, в якій якраз і йдеться про те, що таке мова ХТМЛ.
Там я наводив посилання на список всіх допустимих в Html тегів. Якщо в цьому списку клацніть по назві цікавить вас елемента (в нашому випадку це HR), то потрапите на сторінку з детальною специфікацією саме з нього:
Всі атрибути будь-якого тега можна розділити на три групи:
Приклади атрибутів в тег горизонтальної лінії HR
В якості значень атрибутів можуть виступати як довільні числа (пікселі, відсотки тощо) так і значення із заздалегідь обумовленого набору, наприклад, як у випадку align для HR — left|center|right (ви можете використовувати один з трьох варіантів вирівнювання).
Взагалі, інформацію про них у валидаторе WC3 можна отримати не тільки в списку Html тегів, але і в списку атрибутів, який ви знайдете за наведеним посиланням.
У цьому списку перераховані всі можливі варіанти для всіх наявних у мові Html тегів. У колонці «Related Elements» навпроти цікавить вас варіанти будуть приведені елементи, в яких даний атрибут може бути використаний. У колонці «Type» вказаний тип даних, які можуть бути використані в якості його значення.
Наприклад, в підкресленій на малюнку рядку атрибут align, для тега HR, допустимо використання тільки трьох фіксованих значень, які там і перераховані (left | center | right).
Ще однією дуже важливою колонкою є «Depr». Якщо навпроти цікавить вас атрибуту в цій колонці стоїть буква D, то його використовувати не рекомендується, а для його заміни слід застосовувати відповідні CSS стилі. При перегляді специфікації тегів ми теж бачили, що поруч з назвами всіх чотирьох атрибутів для HR написано слово «Deprecated» (не рекомендований до застосування).
Давайте подивимося, які атрибути використовуються з тими елементами, які ми вже встигли розглянути в цій статті (P, заголовки H1-H6 і HR). Для всіх них можна використовувати «align», оскільки всі ці елементи є блоковими. Для рядкових елементів атрибут вирівнювання по ширині «align» втрачає сенс.
Наприклад, якщо ви додасте «align» в тег заголовка (наприклад, H1), то зможете задати вирівнювання тексту заголовку. Тобто блоковий елемент буде займати весь доступний йому простір по ширині, але вміст цього заголовку (його текст) може бути вирівняно або по лівому краю (left — використовується за замовчуванням), або по правому краю (right), або по центру (center), або по ширині (justify — змінюється відстань між словами, як в газетних колонках).
Теж саме, до речі, буде справедливо і для Html тега абзацу P і для контейнера Div, якщо ви уважно подивитеся на наведений скріншот.
Для горизонтальної лінії HR атрибут «align» буде означати вирівнювання самої горизонтального рядка, утвореної цим елементом. Але тег HR є блоковим елементом і прагне зайняти по ширині весь доступний простір. Отже, має сенс використовувати «align» в ньому тільки в тому випадку, якщо разом з ним ви задали значення для атрибуту «width» (ширина) менше ширини сторінки.
Значення «width» можна використовувати просто цифри (це буде задаватися ширина в пікселях), або можна використовувати відсотки від загальної доступною для горизонтальної лінії HR ширини. Значення атрибута «size» — для цього ж тега задається в цифрах, що позначають висоту горизонтальної лінії в пікселях. Давайте розглянемо це на прикладі:
У тега HR в стандарті Html 4.01 є ще один атрибут, який називають поодиноким, т. к. він не може приймати ніяких значень (він просто означає якусь дію) — це «noshade», який забороняє горизонтальної лінії відкидати тінь:
Зрозуміло, що всі можливі атрибути для всіх можливих тегів в Html мені розглянути не вдасться, та цього й не потрібно, бо все можна робити за аналогією — головне, зрозуміти синтаксис і саму ідею. До того ж багато з них вже стали не рекомендованими до використання, тому що зараз їх функцію виконують CSS стилі, про яких ми теж дуже скоро розпочнемо детально говорити.
Удачі вам! До зустрічей на сторінках блогу
