HTML-теги для тексту: вирівнювання, розмір, шрифт

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

HTML-теги і атрибути: основи синтаксису

У будь-якому тексті присутній прихований код, який як би «пояснює» комп’ютера », як він повинен відображатися на екрані. Інформація може бути записана за допомогою набору універсальних елементів. HTML-теги для тексту по суті представляють собою команди, які додають певні блоки на сторінку або змінюють їх зовнішній вигляд. Правильна форма запису буде виглядати приблизно так:

<palign = center>

</ p>

Варто відразу звернути увагу на те, що не всі теги є парними. Наприклад, теги <BR> (Пропуск рядка) або <HR> (Додавання горизонтальної лінії) взагалі не потрібно закривати.

Чому не можна копіювати текст в редактор сайту з інших програм?

Багато сучасних офісних програми використовують для тексту ті ж самий HTML-теги. Але незважаючи на це, рідний код в 99% випадків виявляється не придатний для веб-сторінок. Навіть якщо документ нормально відображається в самому додатку, форматування може збитися при вставці фрагмента на сайт. Крім того, пошукові системи можуть не адекватно аналізувати вміст сторінки через великої кількості зайвих тегів і атрибутів. Це в свою чергу може значно ускладнити просування вашого інтернет-ресурса.Чтоби отримати релевантний і чистий код, спочатку необхідно очистити текст від HTML-тегів, створених звичайним редактором. Існує кілька способів це зробити. Можна «прогнати» статтю через «Блокнот», і вже тільки після цього вставити його на сайт. Додаток зітре весь HTML. Після цього доведеться заново форматувати весь текст вручну або за допомогою інструментів редактора. Також можна писати і публікувати статті через Live Writer. Даний редактор блогів здатний відразу згенерувати правильний код. В окремій вкладці можна переглянути, як текст буде виглядати безпосередньо на сайті. Можна використовувати HTML-Cleaner. Даний онлайн-сервіс не знищує повністю весь код, а тільки прибирає зайві фрагменти. За допомогою фільтрів ви можете вибрати, які теги потрібно зберегти. Тут присутній потужний візуальний редактор для форматування, який може додати в код вже оптимізовані команди. Перш ніж опублікувати новий запис, потрібно завжди перевіряти HTML. Давайте розглянемо основні теги.

абзаци

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

вирівнювання

Сьогодні вже давно не використовується окремий HTML-тег «Вирівнювання-тексту». Замість нього був створений універсальний атрибут ALIGN. Для зміни положення текстового блоку на сторінки, можна вибрати одне з трьох значень: CENTER, RIGHT, LEFT. Таким же чином можна задати вирівнювання інших елементів, наприклад, заголовків. У деяких випадках для вирівнювання використовуються інші теги. Наприклад, текст по центру можна розташувати за допомогою елемента <CENTER> … </ CENTER>. У чому зручність окремого тега? Він на відміну від атрибута працює з будь-яким контентом, в тому числі з відео, flash, фото і так далі.

Заголовки і підзаголовки

За допомогою структури підзаголовків можна створити логічну структуру контенту. Якщо текст розбитий на смислові блоки, читачеві буде простіше сконцентруватися на змісті і засвоїти нову інформацію. Також пошуковики аналізують заголовки для того, щоб зрозуміти, за якими запитами можна просувати сторінку. Саме з цієї причини SEO-фахівці рекомендують використовувати в них тематичні ключі. В HTML може використовуватися шість рівнів підзаголовків – від <H1>до<H6>.

– <H1> … </ H1> – основний заголовок. Може бути в тексті тільки один. Як правило, даний заголовок містить основний ключевик.

– <H2> … </ H2> – Підзаголовки другого рівня розбивають текст на окремі блоки. Наприклад, якщо ви створюєте якийсь рейтинг, вам можна буде зробити кілька підзаголовків другого рівня.

– <H3> … </ H3> – підзаголовки третього рівня потрібні в тому випадку, якщо між двома <H2> розбивається на блоки. У тому випадку, якщо мова йде про рейтинг, то на рівні <H3> можуть бути вказані критерії оцінки для кожної конкретної моделі.

– <H4>, <H5>,<H6>- вкрай рідко використовуються на практиці. В даному випадку використовується той же принцип: підзаголовки повинні бути вкладені в блог з підзаголовком вищого рівня. Головне дотримуватися правильність ієрархії. Не можна використовувати для однорідних за змістом блоків підзаголовки різних рівнів.

списки

Будь-які інструкції та перерахування краще оформляти у вигляді спісковпрі допомогою спеціальних HTML-тегів для тексту. Структура таких блоків досить проста. Спочатку потрібно визначити тип списку: <UL> … </ UL>- маркований список, <OL> … </ OL> – нумерований список. Всі елементи списку повинні знаходиться між відкриває і закриває тегами.

атрибути шрифту

Що можна поміняти за допомогою HTML-тега? Без додавання класів в CSS ви можете змінити розмір тексту, його колір і шрифт. Це досить зручно, якщо вам потрібно виділити якийсь фрагмент або пропозицію

<FONT> має наступні атрибути:

– Face: даний атрибут дозволяє змінювати шрифт. Є можливість перерахувати через кому відразу кілька варіантів (Verdana, Tahomaі так далі). Якщо у користувача не встановлено якийсь шрифт, система просто буде використовувати альтернативний варіант.

– Size: застосовується для збільшення або зменшення розміру тексту. В лапках можна вказати значення від 1 до 7.

– Color. Можна вибрати один із стандартних відтінків залежно від дизайну або ввести на вибір код будь-якого кольору.

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

Як виділити текст?

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

<B> … </ B>: Даний тег користується великою популярністю. Жирний текст відразу впадає очі. Таким способом можна виділяти важливі факти і тези. Користувачі часто плутають теги <B> і <STRONG>. Візуально різниці між ними практично немає, але працюють вони трохи по-різному. тег <B> змінює зовнішній вигляд тексту. тег <STRONG> може виконувати функцію «покажчика». Він використовується для виділення важливих фрагментів, наприклад, для ключових слів і фраз для SEO.

<I> … </ I>: Строгий і витончений курсив відмінно підходить для оформлення іншомовних слів, термінів і цитат. Похилим текстом в серйозних виданнях зазвичай виділяють назви творів.

<U> … </ U>: Даний тег викликає досить багато суперечок. Підкреслення тексту використовується досить рідко. Історично цей спосіб виділення закріпився за гіперпосиланнями. Якщо ви використовуєте цей тег в статтях, то обов’язково потрібно враховувати, що він підходить тільки для невеликих фрагментів, не більше одного рядка.

<S> … </ S>: Досить цікавий тег, за допомогою якого частина тексту можна зробити закресленою. Особливо актуальний цей тег в рекламі. Він може використовуватися для того, щоб почеркнуть різницю між старою ціною і нової.

<BIG> … </ BIG>: Даний тег використовується для збільшення розміру шрифту без необхідності внесення додаткових параметрів.

<SMALL> … </ SMALL>: Працює за таким же принципом, що і попередній тег. Розташований усередині нього текст буде за розміром менше щодо основного тексту.

<SUP> … </ SUP>: Правильніше буде назвати даний формат верхній індекс. Даний тег в основному призначається для виносок і математичних ступенів. За допомогою нього можна зменшити шрифт і змістити виділений фрагмент тексту вгору.

<SUB>… </ SUB>: Нижній індекс зазвичай зустрічається в формулах. Виділений таким чином фрагмент буде розташовуватися нижче основного тексту.

смислові контейнери

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

<CODE>… </ CODE>: Даний тег використовується для додавання комп’ютерних кодів. Він буде дуже корисний при написанні статей з програмування. Команди в даному випадку не будуть виконуватися і відображаються, як простий текст.

<CITE> … </ CITE>: Даний тег може використовуватися для оформлення цитат і видережек з інтерв’ю.

<BLOCKQUOTE> … </ BLOCKQUOTE>: Тег виносить в окремий блок частину тексту. Виділений фрагмент за замовчуванням має великий відступ зліва. У CSS ви можете поміняти стиль накреслення, розмір і колір тексту.

<ADDRESS> … </ ADDRESS>: Тег, в якому міститься інформація про автора. Тут також можуть міститися посилання.

<HR> розділова лінія

Позначити логічне завершення великого розділу можна за допомогою горизонтальної риси. тег <HR> не відноситься до парних. Це означає, що при використанні даного тега не потрібно закриває елемент формату </>. Роздільник можна зробити коротше за допомогою атрибута WIDTH.

Ссылка на основную публикацию