Здрастуйте, шановні читачі блогу сайт. Сьогодні ми почнемо розмову про теги в мові Html, а саме про заголовки H1, H2, H3, H4, H5, H6, про абзаци P та перенесення рядка Br, а також про тег горизонтальної лінії Hr, на прикладі якого ми розглянемо використання атрибутів та подивимося, де можна буде дізнатися про всі можливі для кожного елемента атрибути і піддивитися синтаксис значень для них.

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

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

Давайте тепер почнемо планомірне вивчення всіх можливих тегів у 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

теги перенесення рядка під назвою BR

(Від слова "break"):

BR є малим елементом до того ж «порожнім», тобто. одиночним (не має елемента, що закривав). Вся функція BR полягає в тому, що він викликає перенесення рядка при відображенні тексту в браузері (аналогічний клавіші Enter у будь-якому текстовому редакторі).

Написання тегів BR (перенесення рядка) в коді не регламентується. Можна написати весь текст разом і поставити замість пробілів у потрібних місцях BR, а можна відразу для наочності в коді вже розбити текст на рядки і поставити BR або наприкінці рядків, або на початку. Сутності це не змінює.

HR(абревіатура від слів «horizontal rule», тобто горизонтальна лінія) — дуже простий Html тег, який малює горизонтальну лінію (смужку) на всю ширину екрана і товщини, яка залежить від того браузера, в якому вона проглядається (по суті це візуальний маркер, який за аналогією з тегами заголовків дозволяє розбивати текст на логічні шматки для їхнього простого засвоєння).

Він є «порожнім» (одиночним), тобто. не має пари (закриває тега). Крім цього, HR є блоковим елементом, тобто. він займає за умовчанням усю доступну йому ширину сторінки.

Поняття атрибутів та правила їх написання у Html тегах

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

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

Отже, перше правило - атрибути ставляться тільки у тезі, що відкриває(Закриває ніколи нічого не містить). В одному елементі може стояти кілька атрибутів, які розділяються між собою та між назвою тега пробілом (обов'язкова умова). Давайте я одразу наведу приклад їх використання для горизонтальної лінії HR:

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

Там я наводив посилання на список усіх допустимих у Html тегів. Якщо в цьому списку клацніть по назві елемента, що вас цікавить (у нашому випадку це HR), то потрапите на сторінку з детальною специфікацією саме по ньому:

Усі атрибути будь-якого тега можна розділити на три групи:

1. Загальні – вони можуть стояти у більшості елементів у мові Html. На наведеному вище малюнку вони знаходяться внизу і обведені червоною рамочкою. Власне, загальних атрибутів небагато (загалом шість), та й те, навряд чи ви будете використовувати у своїй практиці всі з них. Швидше за все лише чотири — , title та style.
2. Атрибути подій — вони потрібні, щоб викликати будь-яку дію у відповідь на дію користувача або системну подію. Вони мають більше відношення до ДжаваСкрит і на наведеному вище малюнку знаходяться в самому низу (обведені в темну рамочку).
3. Унікальні — кожен тег, як правило, має свій власний набір атрибутів, деякі з яких можуть взагалі не зустрічатися в інших елементів. Якщо розглядати горизонтальну лінію HR, то вона має лише чотири унікальні атрибути (align, noshade, size і width). Всі інші, вказані в 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 стилі, Про які ми теж дуже скоро почнемо детально говорити.

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

Таблиці в Html - теги Table, Tr і Td, а також Colspan, Cellpadding, Cellspacing і Rowspan для їх створення
Iframe та Frame - що це таке і як краще використовувати фрейми в Html
Директиви коментарів і Doctype в Html коді, а також поняття блокових та малих елементів (тегів)
Embed та object - Html теги для відображення медіа контенту (відео, флеш, аудіо) на веб-сторінках
Як вставити в HTML посилання та картинку (фото) - теги IMG та A
Html форми для сайту - теги Form, Input та Select, Option, Textarea, Label та інші для створення елементів вебформ
Теги Font (Face, Size та Color), Blockquote та Pre - застаріле форматування тексту в чистому HTML (без використання CSS)
Пробільні символи та форматування ними коду в Html, а також спецсимволи нерозривної пробілу та інші мнемоніки
Як створити гіперпосилання (А, Href, Target blank), як відкривати її в новому вікні на сайті, а також зробити картинку посиланням у Html коді

І сьогодні ми з вами розглянемо детальніше, що таке html тегита їх атрибутина прикладі p, br, hr; а також, яку роль відіграють значення атрибутівтегів, що містяться в html документі.

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

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

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

Отримавши від вас, дорогі читачі, безліч побажань за допомогою форми зворотного зв'язку та через e-mail, я вирішив все-таки повернутися до початку і детальніше зупинитися на тому, які теги взагалі існують, як вони класифікуються і що таке атрибути тегів html. Тож почнемо.

Парні та одиночні, блокові та малі HTML теги: p, br, hr

Як ви, напевно, вже зрозуміли з попередніх публікацій на блозі, тег є основним структурною одиницеюмови гіпертекстової розмітки HTML (Hyper Text Markup Language) За великим рахунком, саме сукупність тегів визначає html код, який описує той чи інший документ (наприклад, одну зі сторінок вашого ресурсу).

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

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

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

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

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

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

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

HTML теги Тег p - блоковий елемент Зміст тега p

А ось щоб відобразити цей текст у кілька рядків, необхідно скористатися елементом br (від англійського «break»), який є одиночним, тобто не має тега, що закриває, а також це малий елемент. Поміщаючи його в кінці кожного з рядків тексту, що є вмістом тега p, отримуємо варіант:

HTML теги
Тег p - блоковий елемент
Зміст тега p

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

Тепер подивимося ще на один простий тег, про який детальніше поговоримо наприкінці статті. Мова про тег hr (від англійської «horizontal rule»- горизонтальна лінія), який є одиночним, але одночасно блоковим, оскільки за умовчанням займає всю можливу ширину. Він описує просту горизонтальну лінію, яка буває корисною при розподілі контенту сторінки на логічні частини. Це може бути поділ тексту, груп зображень чи інших складових елементів дизайну.

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

Атрибути HTML тегів та їх класифікація

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

Майже кожен атрибут має своє значення (параметр). Загалом будь-який одиночний або парний тег можна представити схематично в наступному вигляді:

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

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

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

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

Усі атрибути елементів можна розподілити на три групи:

1. Група універсальних атрибутів- вони застосовуються практично до всіх html тегів. На скріншоті вище вони виділені у зелену рамку
2. Унікальні атрибути- властивий лише даному елементу набір атрибутів (для тега hr малюнку вони підкреслені фіолетовим: align, noshade, size, width). У специфікацію html 5 додано новий атрибут color, що визначає колір горизонтальної лінії.
3. Події- ці атрибути потрібні, коли потрібна будь-яка дія у відповідь на дію користувача. На скріншоті вони виділені у синю рамку.

Інформацію про атрибути можна отримати на іншій сторінці W3C, де наведена таблиця з повним списком html атрибутів:

У цій таблиці наведено всі атрибути для всіх тегів, що існують у мові гіпертекстової розмітки. У стовпці "Related Elements" навпроти потрібного атрибуту зазначені теги, в яких цей атрибут може бути використаний. У колонці "Type" позначено тип даних, які можна використовувати як значення атрибута. Наприклад, для атрибуту align (який визначає вирівнювання елемента) можливе застосування трьох можливих значень (left, center, right).

Якщо в колонці "Dept" проставлено букву D, то такий атрибут використовувати не рекомендується, інакше html документ не пройде валідацію. У цьому випадку необхідно використовувати стилі css, вивчення яких, як я вже відзначав, займемося в недалекому майбутньому. Це просто необхідно, оскільки тенденція така, що більшість атрибутів у версії html 5 не рекомендовані для використання та зовнішній вигляд елементів слід визначати, застосовуючи css.

До речі, абсолютно повна інформація з доданими тегами та їх атрибутами за версією html 5 представлена ​​на одному з найкращих, на мій погляд, ресурсів, присвячених вивченню основ html, а саме на htmlbook, причому російською мовою.

Як відобразити горизонтальну лінію за допомогою тега hr

Діятимемо поступально. Елемент hrбез атрибутів визначає просту горизонтальну лінію, яка займає весь простір по ширині (див. приклад вище). Послідовно застосовуючи різні атрибути для тега hr, змінюватимемо зовнішній вигляд горизонтальної лінії.

Для початку пропишемо атрибути align та width. Що ж до align, його використовувати має сенс лише тому випадку, якщо заданий атрибут width, який визначає ширину елемента (менше, ніж ширина сторінки). Нагадаю, що тег hr є блоковим елементом і за замовчуванням займає весь доступний по ширині простір.

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

---

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

---

Спробуємо додати атрибут color, який визначить колір горизонтальної лінії. Зауважу, що використання цього атрибуту автоматично забороняє тривимірні ефекти, тому використання noshade не потрібне. Як значення ставимо назву кольору, наприклад "blue".

---

Отже, на конкретному прикладі p, br, hr ми розглянули, як теги html, і навіть використовувані різні атрибути, впливають формування різних елементів на веб-сторінці. Незабаром я опублікую продовження цієї теми, тому для отримання нових матеріалів не забудьте передплатити оновлення блогу через RSS-стрічку або за допомогою електронної пошти . Потім дозвольте відклонятися з найкращими побажаннями.

Тег

Тег

застосовується для розподілу сторінки на параграфи. Він може містити лише текст та inline-теги (теги рівня рядка). При цьому сам тег

Є блоковим, тобто створює перенесення рядка перед собою та після себе. Крім цього, він встановлює поля (margin) вільного простору зверху і знизу від своїх сторін до навколишнього контексту, завдяки чому відбувається візуальне розбиття сторінки на параграфи. Розмір полів тега

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

Закриваючий тег

не є обов'язковим. Якщо він відсутній, то кінцем параграфа буде вважатися перший не-inline-тег, розташований нижче в HTML-коді сторінки.

Атрибути

Особисті атрибути:

• align - Встановлює горизонтальне вирівнювання вмісту параграфа.

• accesskey – встановлює клавішу швидкого доступу для фокусування на HTML-елементі.
• class - задає ім'я класу або класів тегу, що використовуються у CSS (Каскадні таблиці стилів).
• dir - вказує напрямок тексту всередині елемента.
• - задає ім'я ідентифікатора HTML-тегу, який може використовуватися як «якор» або таблиці стилів.
• lang - вказує мову, якою написаний текст усередині HTML-елемента.
• style - необхідний застосування вбудованих стилів CSS до тегу.
• tabindex – встановлює порядок табуляції між елементами (клавіша Tab).
• title - виводить підказку при наведенні курсору миші на HTML-елемент.

Тип тега

Призначення: текст (блоки).

Модель тега: блок (блоковий, рівня блоку).

Може містити: inline-теги, звичайний текст та спецсимволи HTML(Мнемоніки).

Відкриваючий тег:необхідний. Закриває тег:не обов'язковий.

Синтаксис

вміст

Приклад HTML: застосування тега P

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

Ще одна помилка - це використання «де не потрапивши» інвертованих кольорів, коли візуально колір тексту світліший за тло, наприклад чорний фон - білий текст. Ця техніка цілком застосовна, але тільки там, де це дійсно доречно.

Підтримка версіями HTML

Версія:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Підтримка:	Так	Так	Так	Так

Підтримка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
Версія:	6.0 та вище	2.0 та вище	2.0 та вище	9.2 та вище	3.1 та вище
Підтримка:	Так	Так	Так	Так	Так

Браузер					Netscape		Опера							Mozilla Firefox
Версія	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Підтримується	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так

ШТМЛ:

3.2

4

XШТМЛ:

1.0

1.1

Опис

Визначає контентовий параграф. Тег

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

Синтаксис

контент

контент

Параметри

align Визначає вирівнювання контенту.

Закриваючий тег

Чи не обов'язковий.

Приклад 1. Використання тега

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

У wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Опис параметрів тега

Параметр ALIGN

Опис

Вирівнювання блоку контенту по краю.

Синтаксис

Аргументи

left Вирівнювання контенту по лівій стороні. У цьому випадку рядки контенту вирівнюється по лівій стороні, а правий край розташовується "драбинкою". Такий спосіб вирівнювання є найбільш популярним на нашому сайті, оскільки дозволяє користувачеві легко відшукувати поглядом новий рядок і комфортно читати великий контент. center Вирівнювання контенту по центру. контент міститься по центру горизонталі вікна браузера або контейнера, де розташований контентовий блок. Рядки контенту наче нанизуються на невидиму вісь, яка проходить центром web-сторінки. Подібний спосіб вирівнювання активно використовується в заголовках та різних підписах, на кшталт підмалювальних, він надає офіційного та солідного вигляду оформленню контенту. У всіх інших випадках вирівнювання центром застосовується рідко з тієї причини, що читати великий обсяг такого контенту незручно. right Вирівнювання контенту з правого боку. Цей спосіб вирівнювання виступає у ролі антагоніста попереднього типу. А саме, рядки контенту дорівнюють праворуч, а лівий залишається "рваним". Через те, що лівий край не вирівняний, а саме з нього починається читання нових рядків, такий контент читати важче, ніж, якби він був вирівняний ліворуч. Тому вирівнювання праворуч застосовується зазвичай для коротких заголовків обсягом трохи більше трьох рядків. Ми не розглядаємо специфічні сайти, де контент доводиться читати праворуч наліво, там можливо подібний спосіб вирівнювання і стане в нагоді. Але де ви в нашій країні бачили такі сайти. justify Вирівнювання по ширині, що означає одночасне вирівнювання по лівому та правому краю. Щоб зробити це браузер в цьому випадку додає пробіли між словами.

Значення за замовчуванням

Аналог CSS (ЦСС)

Приклад 2. Вирівнювання контенту

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Duis te feugifacilisi. Duis autem dolor in hendrerit в vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a gue duis dolore te feu. У вас є анім в мінімальному венії, який не має exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

46.4K

Найчастіше веб-майстрів-початківців мучить питання, чому одні сайти ранжуються вище і обходять конкурентів у пошуковій видачі. Причиною цього можуть бути неправильно розставлені теги h1, h2...h6. Якщо ці теги розставлені неправильно, без урахування специфіки ресурсу, то пошукачам складніше отримати точну інформацію про статті та ключові слова, що містяться в ній.

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

Грамотне розміщення тегів дозволяє пошуковим системам більш точно відображати сторінку за запитами у видачі, що сприятливо позначається на позиції ресурсу:

Навіщо потрібні теги h1-h6?

У теги полягає назва сайту, заголовки та підзаголовки тексту:

У HTML теги заголовків позначаються h від англійської "header", що в перекладі означає " заголовок, шапка». Ось приклад того, як це виглядає:

Заголовок

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

- найважливіші теги

- менш значущі теги...

- останні за важливістю теги

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

Синтаксис тегів h1-h6

Назва тексту

Підзаголовок 1

...

Підзаголовок 2

Підзаголовок 3.1

...

Підзаголовок 3_2

Підзаголовок 3

Найбільшою популярністю користуються теги h1 h2 h3.

Як правильно використовувати тег h1?

Ігноруючи тег h1, веб-майстри, позбавляють себе такої важливої ​​переваги, як оптимізація контенту. На двигунах він часто прописується автоматично, проте не завжди, і цей факт слід враховувати.

HTML тег h1 – найзначніший у своєму роді. У нього містять назву сайту та заголовок статті. Однак не варто його плутати з тегом