Путеводитель HTML:
Вступление
Для того, чтобы продолжить дальнейшую статью крайне рекомендую ознакомиться с предыдущей статьёй (ссылку можете найти в путеводителе). В ней мы разобрались что же такое HTML и накидали базовую структуру для нашего будущего проекта.
Заголовки ✍
Всего в HTML существуют 6 заголовков:
- <h1></h1> - первый по важности.
- <h2></h2> - второй по важности.
- <h3></h3> - третий по важности.
- <h4></h4> - четвёртый по важности.
- <h5></h5> - пятый по важности.
- <h6></h6> - шестой по важности.
Давайте напишем их у нас в файле (не забывайте, что всё надо писать в теге <body></body>):
Как вы можете заметить, сначала я открываю <h1> или другой <h-тег>, пишу в нём какой я захочу текст и закрываю его - </h1> или другой </h-тег>.
Вот так это будет выглядеть у нас на сайте:
Не трудно увидеть, что чем меньше важность заголовка, тем меньше размер шрифта будет у этого заголовка.
Не обращайте внимание, что на данный момент наш сайт выглядит как кусок не пойми чего. Помните, что мы всего лишь делаем каркас. Не переживайте, скоро мы и к стилям доберёмся.
Совет 👍
- <h1></h1> - лучше использовать один раз на странице. Этот заголовок служит отличным путеводителем для поисковых роботов. И чем грамотней вы подумаете, что можно в этот заголовок записать, тем выше в строке поиска вы можете оказаться.
- <h2></h2> - лучше используйте для оглавление секций на сайте. К примеру у вас есть большая секция с новостями, а потом секция с формой рассылки. Так дайте этим секция заголовок <h2/>Новости</h2> и <h2>Рассылка</h2>. Так, думаю, будет правильней.
- <h3></h3> и <h4></h4> - можете использовать для оглавления карточек товара, к примеру. Или навигацию внутри секции. Но не переусердствуйте, не тыкайте их везде. Для обычного текста у нас есть другой тег. Сейчас о нём и поговорим.
Абзацы ✍
Для абзацев существует один единственный тег - это <p></p>.
Я, в основном, использую его для того, чтобы вставить какой-нибудь большой текст или если мы пишем статью, то вставляем уже несколько.
Как вы можете увидеть логика остаётся всё та же. Я открываю тег <p>, пишу в нём своё текст и закрываю тег </p>.
Тег <span>
<span</span> - сам по себе ничего не значит, но может быть полезен при использовании вместе c абзацем или заголовком.
Например, у меня есть заголовок "REALIT - всё для начинающего web-разработчика" и я хочу, чтобы "REALIT" был у меня оранжевого цвета. Без <span></span> я это никак не смогу сделать, так как я не могу вырвать кусочек текста из заголовка. А вот <span></span> позволит это сделать.
Давайте напишем следующий код:
Как вы можете увидеть, я просто взял наш "REALIT" и поместил его в <span></span>, а <span></span> поместил в <h1></h1>. Добавил немного стилей и вуаля, у нас появился оранжевый текст.
⭐Итоги⭐
- Существуют 6 видов заголовков - <h1></h1> - <h6></h6>. И чем выше цифра заголовка, тем ниже его приоритет.
- Заголовок первого уровня (<h1></h1>) на странице размещайте всего один раз.
- Используйте <p></p> для больших текстов.
- Используйте <span></span> для словосочетаний или небольшого текста.