Как писать на HTML / Девман
Этот туториал для тех, кто только начинает верстать и не понимает как же ему начать. Здесь вы узнаете как выбрать тег, как его написать, какие они бывают и где их искать.
В этом туториале вы поможете верстальщице Оле сделать страницу с результатами поиска в Яндексе. Получится не один в один, но довольно похоже:
Настоятельно рекомендуем повторить все шаги, что делает Оля в этом туториале, чтобы вы лучше усвоили материал. Читать — недостаточно, так материал усваивается плохо и уже через пару дней вы всё забудете.
1. Создайте HTML-документ
Для начала Оле понадобится заготовка, файл index.html. Создайте у себя файл с таким же содержимым:
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>
Здесь 3 тега, которые обязаны быть в каждом html-файле:
<html>— здесь лежат все теги страницы, он “корневой”, главный;<head>— в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге<title>, кодировка и так далее;<body>— “тело”HTML-документа, здесь лежит всё, что вы увидите на страничке в браузере.
2. Добавьте текст
Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:
Коала — Википедия Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых ... Читать ещё.
Вы уже знаете, куда добавить этот текст, чтобы он вывелся в браузере? Попробуйте вывести его сами, а затем жмите на кнопку ниже, чтобы посмотреть, как это получилось у Оли.
Как получилось у ОлиНе долго думая, Оля добавила текст прямо внутрь <body> и получила такой результат:
Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.
Оля помнит наизусть несколько тегов: <img> — для картинок, а <p> — для параграфа текста. Но как добавить ссылку? Какой у неё тег?
Оля загуглила, и получила этот ответ:
htmlbook.
ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.Отлично, нужен тег <a>! Но как его написать?..
Как писать теги
У тегов бывают разные названия, но способов их написать всего два. Способ записи зависит от того парный он или одиночный.
Пример парного тега:
<p>Покупайте наши веб-сайты!</p>
Так на страницу можно добавить параграф с текстом. Тег <p> обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой: </p>. Так вы скажете браузеру, что всё, текст параграфа закончился.
Пример одиночного тега:
<img src="адрес_картинки">
Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только <img> — для картинок, <br> — перенос строки и <hr> — горизонтальная линия.
Вот более развёрнутый пример, где вы можете увидеть как выглядят парные и одиночные теги рядом друг с другом:
<img src="https://dvmn.org/filer/canonical/1594118255/683/"> <h2> Зачем нужен h2 </h2> <p> В теге h2 пишут заголовки, как "Как писать теги" чуть выше. Это парный тег, у него есть начало и конец, как и у тега p. </p> <p> У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку. Браузеру не нужно сообщать, когда она "закончится". </p>
Парные теги нужно закрывать
Допишите тег
Оля хотела добавить ссылку с помощью тега <a>, и теперь она поняла, как это сделать. Ещё немного гуглежа и она узнала : тег парный, а значит выглядеть он должен вот так:
<a href="#">Читать ещё</a>
Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь #.
Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:
4. Выделите все “коала” на странице
Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.
Попробуйте, у вас получится, как у Оли? У неё получился такой текст:
Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: <h2>.
Странно, получается, заголовку достался отдельный тег, а остальному тексту — нет. Оля продолжила гуглить теги и узнала о теге <p>: пишут, что он нужен для текста. Но зачем? Чтобы разобраться в этом Оле пришлось узнать о строчных и блочных тегах.
О строчных и блочных тегах
Если вы хотите отредактировать текст, то вам нужны строчные теги.
Они существуют только внутри текста: выделяют текст жирным, курсивом, или делают его ссылкой. С ними вы уже успели познакомиться, вот небольшой список из самых популярных:
<a>— ссылка;<i>— выделение текста курсивом;<b>— выделение текста жирным;<br>— одиночный тег для переноса строки.
Другой вид тегов — блочные. Это теги, которые объединяют другие теги внутри себя в группы, и наделяют их смыслом. Например, блочный тег <h2> содержит в себе заголовок страницы, а блочный тег <p> — параграф текста. За счёт них можно оформить заголовок в одном стиле, а остальной текст — в другом:
<h2>Статья о котиках</h2> <p> <b>Котики</b> — замечательные животные. Я полюбил их, когда мне было 7 лет. Как сейчас помню, на мой <i>день рождения</i> мне подарили замечательного кота.
..
</p>
В этом примере заголовок статьи покрашен в красный цвет: color:red;. Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега <p> теперь можно определить другие, отдельные стили, которые не коснутся текста в заголовке <h2>.
Внутри тега <p> есть несколько строчных тегов: <b> и <i>. Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.
Блочные теги незаменимы, когда хочется добавить тексту фон, рамку, отступы… Вот небольшой список из самых популярных блочных тегов:
<header>— “шапка” сайта, полоса, которая всегда висит в самом верху страницы;<footer>— “подвал” сайта — самый низ страницы, где расположены всякие ссылки на техподдержку, лицензии, контакты поддержки и т. д.;<main>— главный контент на странице: то, ради чего пользователь пришёл на сайт;<div>— для создания прочих блоков, для которых нет специализированного тега. Например, для карточки товара в магазине или карточки поста.
д.;Отдельно стоит выделить эти блочные теги:
<p>— параграф текста;<h2>, <h3>... <h6>— заголовок. Чем больше число — тем мельче заголовок;
Допишите код
Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги <h2> и <p>. Заголовок с тегом <h2> показался ей слишком крупным, поэтому она воспользовалась <h3>:
Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок <a>.
Но как правильно: положить тег <a> внутрь тега <h2> или наоборот?..
О комбинации тегов
Нельзя располагать блочные теги внутри строчных.
Такой код существовать не должен:
<a><h2>Заголовок</h2></a>
Тег <a> — строчный, он существует внутри текста. Тег <h2> — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:
<h2><a>Заголовок</a></h2>
Оля прислушалась к этой рекоммендации и вот что у неё получилось:
<h3> <a href="#"><b>Коала</b> — Википедия</a> </h3>
Проверьте, у вас получилось сделать заголовок ссылкой?
Теперь Оля хочет подпись под заголовком ссылки, как вот тут:
Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега <h3>, чтобы она была “едина” с заголовком <h3>, никуда не уехала и так далее:
<h3> <a href="#"><b>Коала</b> — Википедия</a> <small>ru.
wikipedia.org›Коала</small>
</h3>
Получилось не то, что хотела Оля… Во-первых, текст не сильно-то и уменьшился. Во-вторых, не хватает переноса.
В HTML обычные переносы строк игнорируются, так как текст переносится по ширине экрана. Чтобы заставить текст перенестись насильно, есть одиночный тег
<h3> <a href="#"><b>Коала</b> — Википедия</a> <br> <small>ru.wikipedia.org›Коала</small> </h3>
Теперь нужно сделать текст ещё мельче. Оказывается, теги можно комбинировать, вот так:
<small>
<small>
ru.wikipedia.org›Коала
</small>
</small>
Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?
Попробуйте применить
Что делать, если подходящий тег не нашёлся
В первую очередь, загуглите. В этой статье перечислены не все теги, какие есть в HTML, их там очень много.
Если же и гугл не помогает — придётся подумать, как составить то, что вы хотите из того, что есть. Самый простой пример — вы хотите сделать кнопку с картинкой. Такого тега нет, зато есть кнопка и есть картинка:
<button>
<img src="#" >
</button>
Или вы хотите, чтобы ваш текст был выделен жирным и при этом был ссылкой, вот так: жирная ссылка.
Это можно сделать двумя способами, комбинируя теги <a> и <b>, они оба строчные:
<a><b>Жирная ссылка</b></a> <b><a>Жирная ссылка</a></b>
Что ещё почитать по теме
- Статья Строчные элементы от htmlbook.ru
- Слайды типичные ситуации в вёрстке
Давайте писать HTML-код, как профессионалы
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Подписаться
×
Перевод статьи
«Let’s write HTML like a pro».
HTML напоминает ребенка, с которым никто не играет, потому что JavaScript и CSS отвлекают внимание на себя. Сегодня мы рассмотрим несколько вещей, способных помочь вернуть этого «ребенка» в центр внимания.
Все, описанное здесь, – часть создания чистого, поддерживаемого и масштабируемого кода, в котором должным образом используются семантические элементы разметки из HTML5 и который правильно отображается в поддерживаемых браузерах.
DOCTYPE
Начнем с самого верха вашего index.html. Обязательно декларируйте DOCTYPE. Это активирует стандартный режим во всех браузерах и уведомляет их о том, как следует интерпретировать этот документ. Имейте в виду, что DOCTYPE не является элементом HTML.
В HTML5 это выглядит следующим образом:
<!DOCTYPE html>
Примечание: если вы используете
фреймворк, эта часть будет заполнена
без вашего участия. В противном случае
я настоятельно рекомендую использовать
сниппеты вроде Emmet,
доступные в VS Code.
Хотите узнать побольше о других типах документов? Можете почитать об этом здесь.
Опциональные теги
Некоторые теги в HTML5 опциональны, главным образом потому, что элемент присутствует неявным образом. Это может показаться странным, но вы вполне можете пропустить тег <html>, и страница все равно прекрасно отобразится.
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>Приведенный пример HTML-кода валиден, но есть некоторые случаи, когда так сделать не получится, например, когда после тегов идут комментарии:
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>Этот код невалиден, потому что
комментарий оказывается вне тега <html>.
Закрывающие теги
Теги всегда следует закрывать, поскольку в некоторых браузерах могут возникнуть проблемы с отображением вашей страницы. Закрытие тегов улучшает читаемость кода, а также имеет большое значение по другим причинам, о которых мы поговорим немного позже.
<div> <img src="example.jpg" alt="example" /> <a href="#" title="test">example</a> <p>example</p> </div>
Все приведенные в этом примере теги валидны. Но есть и исключения из правила, предписывающего закрывать теги.
В следующих элементах самозакрывающиеся теги валидны, но не обязательны:
<br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
Примечание: обычные теги не могут быть самозакрывающимися.
<title />
Это неправильное написание.
Charset
Заранее определяйте кодировку своего документа. Хороший тон — поместить эту информацию в самом верху, внутри элемента <head>.
<head> <title>This is a super duper cool title, right 😥?</title> <meta charset="utf-8"> </head>
Приведенный выше пример кода невалиден, название отобразится неверным образом. Декларировать кодировку нужно выше.
<head> <meta charset="utf-8"> <title>This is a super duper cool title, right 😃?</title> </head>
Язык
Еще одна причина не пропускать опциональные теги — использование атрибутов. Не отказываясь от тега <html>, вы можете (и это рекомендуется) определить язык вашей веб-страницы. Это очень важно с точки зрения доступности и поиска.
<html lang="fr-CA"> ... </html>
Тег title
Никогда не пропускайте тег <title>.
Это очень ухудшает доступность. Кроме
того, я бы не пользовался сайтом, где не
используется этот тег.
Если открыть
страницу такого сайта, то 2 минуты и 20
вкладок спустя вы ее уже не найдете
(вкладке будет нечего вам показать).
Тег base
Очень полезный тег, но пользоваться им нужно с известной осторожностью. Он устанавливает базовый URL для приложения. После его установки все ссылки будут формироваться относительно него, а это может привести к нежелательному поведению:
<base href="http://www.example.com/" />
Если в вашем приложении установлен базовый URL, как в примере выше, то href=»#internal» будет интерпретироваться как href=»http://www.example.com/#internal«.
Но при этом href=»example.org» будет интерпретироваться как href=»http://www.example.com/example.org«.
Description
Этот мета тег очень полезен, хотя и не является неотъемлемой частью лучших подходов. Он имеет огромное значение для поисковиков, когда они исследуют ваш сайт.
<meta name="description" content="HTML best practices">
Семантические теги
Хотя вы можете обойтись одними div-ами,
это еще не значит, что так нужно делать.
Семантический HTML наполняет вашу страницу
смыслом. Такие теги как p, section, h{1-6}, main,
nav являются семантическими. Если вы
используете тег <p>, пользователи
будут знать, что это абзац текста, а
браузеры будут понимать, как его следует
отображать.
Разбирать все семантические элементы разметки мы здесь не будем, но почитать о них вы можете здесь.
Не используйте hr для форматирования
<hr> это не элемент форматирования, так что прекращайте использовать его с этой целью. В HTML5 этот тег представляет тематический разрыв вашего контента. Правильное использование <hr> может выглядеть следующим образом:
<p>Абзац о щенках.</p> <p>Абзац о любимой еде щенков.</p> <p>Абзац о породах щенков.</p> <hr> <p>Абзац о том, почему я брею голову.</p>
Будьте осторожны, используя атрибут title
Атрибут title это мощный инструмент. С
его помощью создается всплывающая
подсказка, способная пояснить действие
или назначение элемента на странице.
При этом не следует забывать, что этот
атрибут и, например, атрибут alt для
изображений не
являются взаимозаменяемыми.
Из спецификации HTML5 следует, что в настоящее время использование атрибута title не поощряется. Для появления всплывающей подсказки нужно навести на элемент указатель мыши, а это недоступное действие для тех, кто пользуется только клавиатурой или современными телефонами и планшетами.
О правильном использовании этого атрибута можно почитать здесь.
Одинарные и парные кавычки
Во многих кодовых базах в разметке используются оба вида кавычек одновременно. Это не хорошо, особенно если в вашем фреймворке используются одинарные кавычки или если вы работаете без фреймворка, но используете кавычки в тексте. И, кроме того, нужно просто быть последовательным в написании кода. Не делайте так:
<img alt="super funny meme" src='/img/meme.jpg'>
Делайте так:
<img alt="super funny meme" src="/img/meme.jpg">
Опускайте булевы значения
Что касается булевых
значений для атрибутов, рекомендуется
их опускать, поскольку они не несут
смысловой нагрузки и при этом увеличивают
вес разметки.
<audio autoplay="autoplay" src="podcast.mp3"> <!-- лучше так --> <audio autoplay src="podcast.mp3">
Опускайте атрибут type
Не нужно добавлять атрибут type в теги script и style. В некоторых сервисах, например, в W3C Validator, вы получите ошибку валидации при проверке вашего кода.
Проверяйте вашу разметку
Используйте для проверки разметки специальные сервисы, к примеру, тот же валидатор от W3C. Это позволит вам быть уверенным, что ваша разметка валидна.
Скажите «нет» встроенным стилям
В HTML-файле пишется контент. То, как он выглядит, это уже представление. Оставьте представление CSS и не используйте встроенные стили. Это поможет как разработчикам, которые будут работать с кодом в дальнейшем, так и браузерам.
Заключение
Конечно, это лишь верхушка айсберга — просто несколько вещей, которые следует иметь в виду при написании разметки. Чтобы познакомиться с этой темой подробнее, можно обратиться к следующим источникам (среди прочих):
- HTML best practices on GitHub
- W3C school HTML style guide
Он используется для создания веб-страниц и веб-приложений. HTML широко используется в Интернете. В этой статье мы научимся писать HTML.
Теги HTML заключены в открытые теги (<>) и закрытые теги (). Предположим, нам нужно создать абзац, поэтому в HTML абзац создается путем ввода тега открытого абзаца
