Как сделать заглавие в html

должны конкретизировать суть обозначенную в HTML заголовке

И помните: указание заголовка

после

укажет что предыдущий раздел

закончен и начат новый, а не подчеркнет значимость подраздела.

В глазах поисковой системы заголовки имеют собственный вес в зависимости уровня. Наибольший вес имеет заголовок

, меньше него

, наименьший

. Таким образом, названия разделов имеют больший вес, чем названия подразделов.

Сколько уровней заголовков использовать

Из практики скажу, что редко когда есть необходимость опускаться ниже третьего уровня. Обычно заголовков

вполне достаточно, но, повторюсь: на первом месте правильное отражение структуры контента.

Не следует пытаться намеренно увеличить количество подзаголовков в статье. Слишком большое количество выделенных элементов может негативно сказаться на позициях вашего сайта в поисковых системах.

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

Заголовки дополнительных блоков сайта

или каким-то другим?

Я бы не рекомендовал. Для поисковых систем важна та уникальная информация, которую несет ваша страница, либо не уникальная, но преподнесенная удобнее всего среди конкурентов.

Структурируйте заголовками основной контент страницы, для всех дополнительных элементов достаточно выделения названия блоков стилями CSS.

Заголовки на сайте интернет-магазина

Стоит выделить 2 типа страниц: страница каталога и страница товара.

Страница каталога

Во многих случаях этого будет достаточно. Вам не обязательно использовать несколько уровней HTML заголовков на каждой странице.

Страница товара

Думаю, ни кого не возникнет сомнений, что заголовок

должен содержать название товара. Хорошей практикой для некоторых ниш является добавление слов, конкретизирующих товар, например, бренда или какой-то характеристики.

У магазина одежды, мало шансов попасть в топ по запросу «Белая футболка», но куда больше по запросу «Белая футболка Trussardi». Если вы продаете телефоны, вместо указания в названии «iPhone 8» и указания вариантов цвета и объема памяти в списке характеристик создайте несколько страниц и сделайте у них

: «iPhone 8 256Gb Белый», «Apple iPhone 8 64Gb Space Gray» и так далее.

Перейдем к подзаголовкам. Большинство страниц товаров имеют похожую структуру и одинаковые элементы: фото, описание, характеристики, отзывы. Сами же блоки могут быть показаны на странице все сразу, либо страница имеет вкладки, по клику на названия которых открывается нужный блок.

И в первом и во втором случаях стоит присвоить этим блокам заголовки HTML (обычно

). В данном случае блоки относятся к основному контенту и не являются обверткой, о чем говорили выше.

Также, достойным решением является конкретизация таких заголовков. В пример приведу один популярный магазин электроники.

Обратите внимание, вкладка имеет короткое название «Характеристики», при нажатии открывается блок с заголовком

: «Технические характеристики Apple iPhone X 256GB Silver».

Пожалуй, на этом все. Я надеюсь эта статья была для вас полезной. Ниже оставляю несколько рекомендаций, на которые следует ориентироваться при составлении заголовков.

Выводы. Рекомендации по использованию заголовков HTML

1) На странице должен быть только один заголовок уровня

2) Строго сохраняем иерархию:

внутри

внутри

и т.д. Никаких

сразу после

3) Заголовки должны передавать смысл содержимого.

4) Не стоит использовать заголовки на постоянно меняющихся / дополнительных элементах страницы.

Источник

Отделяем заголовки от абзацев или структурирование текста на html странице

Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки.

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

Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:

Исключение составляет тег pre, внутри которого все пробелы и переносы отображаются как есть.

Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.

Теперь перейдем к рассмотрению структурных элементов текста в разметке html.

Абзацы в языке HTML

Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег «p». Синтаксис создания абзацев следующий:

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег «Р» также является блочным элементом. Что такое блочные элементы я писал в статье «Как создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:

При открытии данного файла будет примерно такая картина:

Пока, что наша страница содержит одни абзацы.

Для выравнивания текста в абзаце тег «Р» поддерживает атрибут align. Он может принимать одно из четырех значений:

По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

И так это отобразится в браузере:

Заголовки в языке HTML

Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег h1, а самым нижним — уровень 6, тег «h6». Теги h1 — h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.

Синтаксис создания заголовков:

Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

Добавим заголовки в нашу страницу:

И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:

Теги h1-h6, как и тег «Р», используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом «Р».

Нумерованные и маркированные списки в HTML

Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным, а с непронумерованными пунктами — маркированным.

В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.

Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега «li». Затем все элементы помещаются внутрь тега «ul», если нужен маркированный список, или внутрь тега «ol», если нужен нумерованный список.

И выглядят они примерно так:

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег «ul» добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег «li» если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

По умолчанию атрибут type равен disc. Пример использования:

Отображение в браузере:

Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:

По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.

Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов «li» внешнего списка:

В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега «dl». Внутри него помещают пары «термин — определение». Термины заключают в парный тег «dt», а определения — в парный тег «dd»:

Отображение в браузере:

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:

И посмотрим результат:

Горизонтальные линии

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:

И вот как это отображается:

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.

С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег «hr» поддерживает следующие атрибуты:

Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:

Результат будет примерно таким:

Комментарии html

В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом. Пример:

Комментариями можно помечать какие-то участки кода, чтобы в будущем можно было легче разобраться в нем.

На этом все и, как обычно, подведу итог поста. В данной статье мы рассмотрели основные html-элементы для разделения текста страницы на логические части. Напомню все эти элементы:

Остальные материалы о тегах html ищите в рубрике HTML и CSS и подписывайтесь на обновления моего блога. До встречи в следующих постах!

Источник

Работа с текстом в HTML

Форматированию текста в HTML в первую очередь следует уделить внимание, так как практически на любой странице большая часть информации представлена в текстовом виде. Кроме этого, изучив эту тему, Вы познакомитесь со значительной частью HTML тегов.

Группу тегов HTML, предназначенных для работы с текстом можно разделить на две основные подгруппы: теги физического форматирования и теги логического форматирования текста.

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

— Эти теги относятся к группе логического форматирования: Abbr Acronym Code Em Kbd Q Samp Strong

Абзац в HTML. Перенос текста

Важнейшим тегом физического форматирования текста является тег

, который предназначен для разбивки текста на параграфы.

создает новый параграф. При этом текст начинается с новой строки, и между параграфами образуется промежуток.

Атрибут align тега

позволяет позиционировать абзац по горизонтали, размещая его слева (align= «left» ), справа ( align= «right» ), располагая по центру ( align= «center» ) или выравнивая по ширине ( align= «justify» ) окна браузера или родительского элемента.

При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.

Текст разбит на параграфы.

При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.

Заголовки в HTML. Размер текста

Заголовки в HTML представлены шестью тегами

. Каждый из них обозначает заголовок определенного уровня (веса или значимости).

И так далее, по значимости и иерархии, при помощи тегов

, выделяют заголовки различных уровней.

Использование заголовков в HTML «облегчает жизнь» не только пользователям в плане удобного и быстрого ориентирования на странице, но и упрощают работу поисковым роботам, позволяя выделить главное и второстепенное, что положительно влияет на оптимизацию страниц сайта.

, как и тег

Использование закрывающего тега для всех заголовков HTML, является обязательным условием их применения!

Заголовок 1-го уровня

«center» > Заголовок 2-го уровня

«right» > Заголовок 3-го уровня

«center» > Заголовок 4-го уровня

«right» > Заголовок 5-го уровня

Заголовок 1-го уровня

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Размер текста продолжение.

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

Теги и _{предназначены для отображения текста в виде верхнего и нижнего индекса соответственно. При этом размер шрифта уменьшается на единицу.}

Увеличение и уменьшение текущего размера шрифта на одну условную единицу.

Индекс верхний. и Индекс _{нижний.} в HTML.

Изменим характеристики текущего шрифта «red» size= «+2» face= «Arial, Helvetica, sans-serif» > при помощи тега font

Увеличение и уменьшение текущего размера шрифта на одну условную единицу.

Индекс верхний. и Индекс_{нижний.} в HTML.

Изменим характеристики текущего шрифта при помощи тега font

Изучайте CSS и работайте со стилями!

Гарнитура шрифта

По умолчанию в браузере Вы видите светлый текст прямой постановки. Тег позволяет отобразить текст курсивом, а тег сделать его жирным.

Изменим начертание шрифта: его постановку и насыщенность!

Моноширинный шрифт

Многие среды разработки и редакторы исходного текста программ по умолчанию настроены на моноширинные шрифты. Это сделано для удобства работы программистов: улучшается удобочитаемость кода.

В HTML несколько тегов отображают текст моноширинным шрифтом.

Цитаты в HTML. Подчеркивание и перечеркивание текста

Тег предназначен для подчеркивания текста, а тег для его перечеркивания. Это теги физического форматирования текста, и, кроме визуального оформления, никакой смысловой нагрузки они не несут.

Оформление цитат

Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.

. Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей).

Как сказал Г. Ламене:

Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.

Как сказал Г. Ламене:

Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.

Несколько логических тегов

Тег применяется для заключения текста в кавычки. Этот тег можно использовать при оформлении цитат или при употреблении слов и выражений, которые имеют переносный смысл.

Источник