Skip to content

Latest commit

 

History

History
95 lines (56 loc) · 6.15 KB

02. Как собирать страницу.md

File metadata and controls

95 lines (56 loc) · 6.15 KB

Как собирать страницу

Теги — это хорошо, но страницу из курсивного текста не собирают. И да, причём тут семантика?

Флоу

Ок, в прошлом уроке мы поняли, что есть теги, но из них страницу не построишь: одно дело выделить текст, другое — сверстать целую страницу.

Начнём с того, что у страницы есть поток (флоу): элементы идут друг за другом и выстраиваются в таком же порядке.

<p>первый абзац</p>
<p>второй абзац</p>

iframe: https://jsfiddle.net/gd8jrsst/1/embedded/result/

Но элементы бывают трёх типов: блочные, инлайновые (строчные) и инлайн-блочные. В чём разница?

Блочные

Занимают всю доступную ширину, каждый элемент встаёт под предыдущий.

Тег абзаца (<p>), например, блочный

iframe: https://jsfiddle.net/gd8jrsst/1/embedded/result/

Ещё блочные это заголовки от <h1> до <h6>, списки <ol> и <ul>, цитаты <blockquote> и многие другие: htmlreference.io.

Инлайновые

В основном относятся к тексту, занимают ширину контента в нём:

iframe: https://jsfiddle.net/11hvb3cf/embedded/result/

Я выделил размеры элементов с тегами <strong> и <i> — они занимают ширину того контента, что в нём. Выберите inline на http://htmlreference.io, увидите все инлайновые теги, например, ссылки <a>, картинки <img>, аббревиатуры <abbr>, удаленный текст <del>, для кода <code>.

Инлайн-блочные

Занимают ширину контента, но у них можно ставить ширину и высоту. Например, это кнопки <button>:

iframe: https://jsfiddle.net/1sey2bL6/embedded/result/

Итог

Мы узнали, что страница строится по потоку: это порядок элементов на странице, который зависит от их типа — блочного, инлайнового или инлайн-блочного.

Семантика и структура страницы

Основа понятна — страница собирается из тегов, которые ведут себя по-разному. Ок, но каких тегов? Какие из них основные, которые стоит запомнить, а какие — второстепенные?

Первое, что нужно запомнить — страница строится из компонентов. Бывают крупные компоненты (в Бюро Горбунова их называют этажами — большой блок информации), а бывают маленькие — типа кнопок, форм и остальных.

Теги, которые отвечают за структуру:

  • <main>: основной тег страницы, может быть только один раз;
  • <section>: достаточно общий тег, говорит о том, что внутри — большая секция; можно использовать много раз и даже вкладывать друг в друга;
  • <header>: шапка страницы;
  • <footer>: подвал страницы;
  • <nav>: тег навигации;
  • <article>: статья;
  • <aside>: дополнение к абзацу;
  • <div>: блочный тег общего назначения, может заменять все остальные.

Почему их так много? Почему нельзя обойтись дивами?

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

Семантика нужна всем: и разработчикам, и машинам.

Задача

Сегодня вы должны научиться верстать.

Я сознательно не рассказал вам про атрибуты и стилизацию через ЦСС — сначала вы должны освоить семантичную вёрстку.

Вам нужно сверстать эту страницу:

Как себя проверить?

Давайте так: у вас должен быть один header, два section, три вида заголовков, один aside и несколько других тегов, о которых сегодня говорилось.

Правильный вариант — в следующем уроке.

Итог

Этот урок — чистая вёрстка, он нужен, чтобы набить руку и не перегружать вас информацией.

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

Не забывайте задавать вопросы в чате — там обязательно помогут 💪🏻

Помните: нет глупых вопросов, есть лишь страх их задавать.