Заголовки, абзацы, создание списков в html: теги логической разметки и форматирования текста
Опубликовано: 01.09.2018
Содержание:
HTML-заголовки (H1, H2) и основной текст — тег параграфа
С заголовком страницы H1 и абзацем P мы частично познакомились в первом уроке о структуре документа html. Теперь рассмотрим теги логической разметки: заголовки, абзацы, списки, видимых элементов элемента Body, и теги физического форматирования подробнее. Для этого слегка изменим нашу страницу-пример или наберем ее заново:
В нашей учебной html-странице добавились (отмечены стрелками, однократно): заголовок 2-го уровня - тег H2, два заголовка 3-его уровня - тег H3, еще один абзац - тег P, маркированный список - Ul и несколько тегов физического форматирования. Откроем страницу в браузере:
Теги H1-H3 обозначают заголовки различного уровня - их всего шесть. Заголовок самого нижнего уровня, соответственно - H6. Использовать заголовки необходимо логически, а заголовок верхнего уровня H1 должен встречаться на странице один раз. Заголовок H1 отображается браузерами крупным шрифтом, а размер шрифта в заголовках следующих уровней - уменьшается соответственно.
Поисковые боты придают большое значение содержимому заголовков верхнего уровня. А пользователям легче ориентироваться на странице с логически правильно выстроенными заголовками.
Т еги физического форматирования
На странице видно горизонтальную полосу, после второго абзаца - ее создает элемент Hr, не имеющий закрывающего тега. Тег Br означает перевод строки на новую, он тоже не парный - без закрывающего тега. При форматировании текста можно использовать несколько идущих подряд элементов Br - каждый следующий добавит новую пустую строку.
Теперь обратим внимание на слово «body» во втором абзаце, заключенное в парный тег B, который задает слову полужирное начертание. А фраза «оформлять текст» отображается курсивом - это достигается с помощью тега I. Тег U задает подчеркивание (его нет в нашем примере).
Кроме этих тегов, выделяющих фрагменты текста, в HTML существуют еще тег Strong - выделяет важный по значению фрагмент (жирное начертание). И тег Em - чуть менее важный (курсив). Поисковые боты обращают более пристальное внимание на эти два тега, указывающие на важные по логическому смыслу фразы. Целесообразно заключать в них ключевые слова , но перебарщивать с этим не стоит. Это же касается и заголовков.
Вот еще несколько тегов физического форматирования текста: Q - выделяет цитату в строке. Блочный элемент Blockquote - в этот тег можно помещать несколько абзацев.
Тег Code служит для разметки фрагментов кода, его необходимо использовать с переносами строк Br и неразрывными пробелами: для их обозначения используется спец. символ (первый знак - амперсанд : клавиша 7 с зажатой Shift в английской раскладке). А вот тег Pre отображает программный код, как есть, с пробелами и столько строк, сколько их в коде.
Это наиболее употребимые элементы оформления текста, об остальных тегах форматирования и специальных символах смотрите в Справочнике HTML , расположенного на этом же сайте - в нем удобная навигация по алфавиту.
С оздание списков html
Осталось рассмотреть создание списков, у нас он маркированный, и задан парным тегом Ul, а его элементы, или пункты тегом Li (1-ый скриншот). При помощи атрибута type, как для тега Ul, так и для тега Li, мы можем поменять тип маркера. По умолчанию, т.е. если атрибут не указан, его значение равно «disk» - кружок. Можно задать атрибут type со значением «circle» - окружность. Или так: <ul type="square"> - мы получим список с маркерами-квадратиками.
Вообще то, я не буду заостряться на атрибутах тегов, кроме обязательных и парочке примеров для общего понимания. Для задания стилей лучше использовать свойства CSS - дойдем и до них, а атрибуты вы найдете в справочнике.
Кроме маркированных, существуют нумерованные списки, которые задаются тегом Ol, а элементы списка, как и у маркированных - тегом Li. Кроме того, для обоих видов списков можно создавать вложенные списки . Усложним задание и изменим наш список в странице-примере на следующий:
Откроем страницу в браузере, наглядно видим: нумерованный список с вложенным в него маркированным списком, для которого значение «square» атрибута type задает маркеры-квадратики:
Посмотрите в справочнике элементы Menu и Dl - они тоже используются для формирования списков. В следующем уроке мы рассмотрим теги html для вставки изображений и ссылок. Научимся связывать html-страницы в единый сайт, познакомимся с его структурой. Далее, по плану - создание таблиц.
Содержание: