Семантическая верстка - создание смысла, структуры документы, правильно пользуясь семантическими тегами
Семантическая верстка заключается в том, что мы пользуюсь качествами 2ух первых базовых блоков section и article, формируем связи между смыслами
https://html.spec.whatwg.org/multipage/sections.html#the-body-element
Можно представлять как article
Элемент body представляет содержимое документа.
https://html.spec.whatwg.org/multipage/sections.html#the-article-element
Элемент представляет собой законченную или автономную структуру в документе, странице, приложении или сайте, которая может независимо распространяться или повторно использоваться
Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента.
article - описание вариативности сущности, перечисление.
Когда нужно добавить вариативность в описание, когда есть какое-то неотъемлемое качество, которое вы хотите описать в нескольких вариантах
- можно представить как связь 1...n
- можно понимать как логическое ИЛИ
https://html.spec.whatwg.org/multipage/sections.html#the-section-element
Общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.
Примерами разделов могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы диссертации. Домашняя страница веб-сайта может быть разделена на разделы для введения, новостей и контактной информации.
Разработчикам рекомендуется использовать article элемент вместо section элемента, когда имеет смысл сгруппировать содержимое элемента.
section - неотъемлемое качество сущности, прямая зависимость.
Желание описать какое-либо неотъемлемое качество объекта, которое характеризует этот объект.
Если это качество вместе с секции вырвать, то объект потеряет изначальную свою суть и его смысл будет изменен
section - описание некоторого св-ва нашего контента, которую мы хотим выделить, т.е выделить неотъемлемую важную часть контента
- 1...1
- можно понимать как логическое И
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2 itemprop="headline">The Very First Rule of Life</h2>
<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<section>
<h1>Comments</h1>
<article itemprop="comment" itemscope itemtype="http://schema.org/Comment">
<footer>
<p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">George Washington</span>
</span></p>
<p><time itemprop="dateCreated" datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article itemprop="comment" itemscope itemtype="http://schema.org/Comment">
<footer>
<p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">George Hammond</span>
</span></p>
<p><time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article><article>
<hgroup>
<h2>Apples</h2>
<p>Tasty, delicious fruit!</p>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article><article>
<hgroup>
<h2>Яблоки</h2>
<p>Вкусный, ароматный фрукт!</p>
</hgroup>
<p>Яблоко – семечковый плод яблони.</p>
<section>
<h3>Сорта яблок</h3>
<article>
<h3>Яблоки сорта «Фуджи»</h3>
<p>Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах.</p>
</article>
<article>
<h3>Granny Smith</h3>
<p>Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.</p>
</article>
</section>
<section>
<h3>Цвета яблок</h3>
<article>
<h3>Red</h3>
<p>Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах.</p>
</article>
<article>
<h3>Green</h3>
<p>Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.</p>
</article>
</section>
</article><article>
<hgroup>
<h2>Яблоки</h2>
<p>Вкусный, ароматный фрукт!</p>
</hgroup>
<p>Яблоко – семечковый плод яблони.</p>
<section>
<h2>Характеристики яблок</h2>
<article>
<h3>Сорта яблок</h3>
<section>
<h3>Яблоки сорта «Фуджи»</h3>
<p>Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах.</p>
</section>
<section>
<h3>Granny Smith</h3>
<p>Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.</p>
</section>
</article>
<article>
<h3>Цвета яблок</h3>
<section>
<h3>Red</h3>
<p>Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах.</p>
</section>
<section>
<h3>Green</h3>
<p>Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.</p>
</section>
</article>
</section>
</article>https://html.spec.whatwg.org/multipage/sections.html#the-header-element
https://html.spec.whatwg.org/multipage/sections.html#the-footer-element
Это инструменты которые позволяют определить связи определнных частей контента, между основным контентом и побочным, например дата публикации контента, автор, адреса, лицензия
или так
Определяют контент внутри секции (article,nav,figure,section,aside), для того чтобы анализирую секцию, определенный контент не связать с основным контентом
Весь контент в этой группе, не имеет никакого прямого отношения к выполнению задачи раскрытия основного контента текущий страницы (логических секций)
header - группирует тот контент, который не нужен для раскрытия осн. контента, но имеет прямую связь с основным контентом
footer - группирует тот контент, который не нужен для раскрытия осн. контента, но не имеет прямой связь с основным контентом
Дата которая имеет отношение к контенту, но не имеет прямой связи с значимостью этого контента
Автор новости - это возмжоно футер. Потому что нам не важно кто написал новость.
Автор блог поста, это возможно header, потому что блог пост, это личное мнение автора. Он напрямую с ним связан.
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2 itemprop="headline">The Very First Rule of Life</h2>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<footer><p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p></footer>
<footer><p>@Creative Commons</p></footer>
</article>Заголовок секции не нужен для того чтобы раскрыть суть контента, это заголовок, это выжимка, его суть, но она не нужна для того чтоб раскрыть основной контент, но при этом наш заголовок имеет прямую связь с нашим контентом, потому что он являеется его выжимкой инымы словами все то что не нужно для раскрытия нашего главного контента страницы, но с ним связано, все это притендеты для группы header
<section>
<header>
<h2>Услуги</h2>
</header>
<article>
<header>
<h3>Уборка снега</h3>
</header>
<p>...</p>
</article>
<article>
<header>
<h3>Ландшафтный дизайн</h3>
</header>
<p>...</p>
</article>
</section><section>
<header>
<h2>История компании</h2>
</header>
<p>...</p>
<p>...</p>
<p>...</p>
<section>
<header>
<h3>Начало: 1888 год</h3>
</header>
<p>...</p>
</section>
<header>
<p>CEO Ivan Ivan: Company 1</p>
</header>
</section><section>
<header>
<h2>Комментарии</h2>
</header>
<article>
<footer>
<h3>Комментарий от Ивана</h3>
</footer>
<p>...</p>
</article>
<article>
<footer>
<h3>Комментарий от Саши</h3>
</footer>
<p>...</p>
</article>
</section>https://html.spec.whatwg.org/multipage/sections.html#the-aside-element
Элемент представляет собой часть страницы, состоящую из содержимого, которое косвенно связано с содержимым вокруг aside элемента и может рассматриваться как отдельное от этого содержимого.
Элемент можно использовать для типографских эффектов, таких как кавычки или боковые панели, для рекламы, для групп nav элементов и для другого контента, который считается отдельным от основного контента страницы.
Задача максимально нивелировать влияние контента, содержащегося внутри него.
Контент, который заключен внутри него не стоит связывать с основным контентом, который был связан с секции
<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>
<aside>
<nav>
<h2>My blogroll</h2>
<ul>
<li><a href="https://blog.example.com/">Example Blog</a>
</ul>
</nav>
<nav>
<h2>Archives</h2>
<ol reversed>
<li><a href="/last-post">My last post</a>
<li><a href="/first-post">My first post</a>
</ol>
</nav>
</aside>
<aside>
<h1>Twitter Feed</h1>
<blockquote cite="https://twitter.example.net/t31351234">
I'm on vacation, writing my blog.
</blockquote>
<blockquote cite="https://twitter.example.net/t31219752">
I'm going to go on vacation soon.
</blockquote>
</aside>
<article>
<h2>My last post</h2>
<p>This is my last post.</p>
<footer>
<p><a href="/last-post">Permalink</a>
</footer>
</article>
<article>
<h2>My first post</h2>
<p>This is my first post.</p>
<aside>
<h2>Posting</h2>
<p>Пока я думаю об этом, я хотел сказать кое-что о проводка. Публикация — это весело!</p>
</aside>
<footer>
<p><a href="/first-post">Permalink</a>
</footer>
</article>
<footer>
<p><a href="/archives">Archives</a> -
<a href="/about">About me</a> -
<a href="/copyright">Copyright</a></p>
</footer>
</body>https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
Навигация, которая определяет, что внутри этой секции (nav) определены ссылки для навигации в рамках текущего проекта(ресурса), что эти ссылки нужно не рассматривать как те вещи, которые связывают какие-то смысловые сущности проекта, а важно понимать, что это ссылки, которые определяют навигационные элементы.
<p>lorem ipsum <a href="vk.com">lorem ipsum vk</a></p>Когда мы внутри текста, указываем ссылку, для поисковой машины эта ссылка является определенной информацией, которая связывает контент конкретного абзаца, в котором была эта ссылка, с другим документом
nav нужен чтоб машина понимала, где есть инструмент для навигации по странице и где есть инструменты определяющие смысловые связи
Элемент представляет собой раздел страницы, который ссылается на другие страницы или части внутри страницы
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav><nav>
<h1>Навигация по сайту</h1>
<p>Тут можно написать отзыв: <a href="/r">клик</a>, а тут можно <a href="/c">купить купоны</a></p>
</nav>https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element
Тег figure представляет некоторый поток содержимого, возможно, с заголовком, который является автономным и обычно упоминается как отдельная единица из основного потока документа.
Figure - тег который позволяет внутри себя сформировать особый контент, который точно также как и aside, напрямую не связан с осн. контентом
Этот элемент можно использовать для аннотирования иллюстраций, диаграмм, фотографий, списков кодов и т. д.
Когда доказываем теорему, должны сослаться на определенные аксиомы, аксиома - это fugure
<h2>Комиксы Малинко</h2>
<p>Это дело касалось какой-то «интеллектуальной собственности».
нарушение, связанное с комиксом (см. Приложение А). Костюм начался
после трейлера, заканчивающегося такими словами:
<blockquote>
<img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>
<p>... вышел в эфир. Юрист, вооружившись Блокнотом побольше, запустил
упреждающий удар снежками. Полная копия трейлера
включены в Приложение B.
<figure>
<img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
<figcaption>Доказательство А. Предполагаемый <cite>грубая копия</cite> комикса.</figcaption>
</figure>
<figure>
<video src="ex-b.mov"></video>
<figcaption>Приложение B. Трейлер <cite>Черновая копия</cite>.</figcaption>
</figure>
<p>Дело было разрешено во внесудебном порядке.https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body><body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
<h2>Diving in</h2>
</section>
<section>
<h2>Simple shapes</h2>
</section>
<section>
<h2>Canvas coordinates</h2>
<section>
<h3>Canvas coordinates diagram</h3>
</section>
</section>
<section>
<h2>Paths</h2>
</section>
</body>https://html.spec.whatwg.org/multipage/sections.html#the-address-element
Элемент адреса представляет контактную информацию для своего ближайшего предка статьи или элемента тела.
Элемент address не должен использоваться для представления произвольных адресов (например, почтовых адресов), если только эти адреса не являются релевантной контактной информацией.
в нем не должно быть: article,aside,nav,section,address,h1-6
<footer>
<address>
For more details, contact
<a href="mailto:js@example.com">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer><address>
<a href="../people/raggett/">dave raggett</a>,
<a href="../people/arnaud/">arnaud le hors</a>,
contact persons for the <a href="activity">w3c html activity</a>
</address>Первая минимальная базовая единица семантической верстки
Параграф текста, фразовый контент, имеет функцию группирующую все фразы в одну ед. сущность
Обычно представляет собой набор фразового содержания, который образует блок текста с одним или несколькими предложениями, обсуждающими конкретную тему, как в типографике, но также может использоваться для более общей тематической группировки.
Например, адрес — это также абзац, как и часть формы, подписи или строфы в стихотворении.
https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element
https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element
https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element
ul - не нумерованный список, изменение позиции li внутри елемента ul не изменит смысла блока
ol - нумерованный список, изменение позиции li внутри елемента ul изменит смысл блока
<ul>
<li>Главная
<li>Новости
<li>О нас
<li>Контакты
</ul>
<ol>
<li>Главная
<li>Категория
<li>Товар 1
</ol>https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element
Элемент blockquote представляет собой раздел, цитируемый из другого источника.
Контент внутри цитаты должен быть процитирован из другого источника, адрес которого, если он есть, может быть процитирован в атрибуте cite.
<blockquote>
<p>I contend that we are both atheists. I just believe in one fewer
god than you do. When you understand why you dismiss all the other
possible gods, you will understand why I dismiss yours.</p>
</blockquote>
<p>— Stephen Roberts</p>
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
<p>My mistress' eyes are nothing like the sun,<br>
Coral is far more red, than her lips red,<br>
...
<blockquote>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</blockquote>https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
https://html.spec.whatwg.org/multipage/grouping-content.html#the-dt-element
https://html.spec.whatwg.org/multipage/grouping-content.html#the-dd-element
dl представляет собой список ассоциаций, состоящий из нуля или более групп «имя-значение» (список описаний). Группа имя-значение состоит из одного или нескольких имен (dt), за которыми следуют одно или несколько значений(dd).
Группы "имя-значение" могут быть терминами и определениями, темами и значениями метаданных, вопросами и ответами или любыми другими группами данных "имя-значение".
Порядок списка групп, а также имен и значений в каждой группе может иметь значение.
dt - ключ Элемент представляет термин или имя
dd - значение Элемент представляет собой описание, определение или значение
<dl>
<dt> Authors
<dd> John
<dd> Luke
<dt> Editor
<dd> Frank
</dl>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-time-element
Элемент time представляет свое содержимое вместе с машиночитаемой формой этого содержимого в атрибуте datetime. Тип контента ограничен различными датами, временем, смещениями часовых поясов и длительностью.
<time>2011-11</time>
<time>11-18</time>
<time>14:54:39.929</time>
<time>2011-11-18T14:54:39.929</time>
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart" datetime="2005-10-05">October 5</time> -
<time class="dtend" datetime="2005-10-07">7</time>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element
Ключевое слово, усиление голоса, логическое ударение на слово в предложении. Элемент em также не предназначен для передачи важности; для этой цели более подходит strong.
Подчеркивая первое слово, утверждение подразумевает, что речь идет о обсуждаемом виде животных
<p><em>Cats</em> are cute animals.</p>Перенося ударение на глагол, можно подчеркнуть, что под вопросом истинность всего предложения (может быть, кто-то говорит, что кошки не милые):
<p>Cats <em>are</em> cute animals.</p>Подчеркивая все предложение, становится ясно, что говорящий изо всех сил старается донести мысль. Этот вид ударения также обычно влияет на пунктуацию, отсюда и восклицательный знак.
<p><em>Cats are cute animals!</em></p>Элемент b представляет собой фрагмент текста, к которому привлекается внимание в утилитарных целях, без передачи какой-либо дополнительной важности и без указания альтернативного голоса или настроения, например, ключевые слова в аннотации к документу, названия продуктов в обзоре, слова, требующие действия, в интерактивном текстовом программном обеспечении или в статье.
Это тег который должен выделять, не более одного или 2 слов
Тег которым подчеркивают термин или словосочетания, которое в рамках тек. страницы или всего проекта в целом обладает особым значением для страницы или всего проекта.
Контекст значения не имеет.
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element
Элемент представляет большую важность, серьезность или срочность своего содержания.
В отлчии от тега b должен выделять законченную смысловую сущность, в рамах текущей минимальной семантической единицы. (p)
Контекстно зависимый
т.е выделяем самое главное
<p>
<strong>Внимание!</strong>
Это подземелье опасно.
<strong>Избегайте уток.</strong>
Берите все золото, которое найдете.
<strong><strong>Не берите бриллианты</strong>,
они взрывоопасны и <strong>уничтожают все внутри
десять метров.</strong></strong>
Вас предупредили.</p>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element
Представляет собой побочные комментарии, такие как мелкий шрифт.
Обычно содержит заявления об отказе от ответственности, предостережения, юридические ограничения или авторские права. Также иногда используется для указания авторства или для выполнения лицензионных требований.
Элемент small не влияет на em, strong
Предназначен только для коротких фрагментов текста
<aside>
<h1>Пример корпорации</h1>
<p>Эта компания в основном создает небольшое программное обеспечение и веб-сайты.</p>
<p>Миссия компании Example Corp: "Развлекать".</p>
<p><small>Информация получена от <a
href="https://example.com/about.html">example.com</a> домашняя страница
страница.</small></p>
</aside>
<dl>
<dt>Single room
<dd>199 € <small>breakfast included, VAT not included</small>
<dt>Double room
<dd>239 € <small>breakfast included, VAT not included</small>
</dl>
<p>Сегодня компания Example Corp объявила о рекордной прибыли за
второй квартал <small>(Полное раскрытие информации: Foo News является дочерней компанией
Example Corp)</small>, что привело к предположениям о третьем квартале
слияние с Demo Group.</p>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element
Элемент s представляет содержимое, которое уже не является точным или более неактуальным.
<p>Купите наш чай со льдом и лимонад!</p>
<p><s>Рекомендуемая розничная цена: 3,99 доллара США за бутылку</s></p>
<p><strong>Теперь продается всего за 2,99 доллара США за бутылку!</strong></p>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element
Элемент i представляет собой фрагмент текста в другом голосе или настроении или иным образом смещен от обычной прозы таким образом, чтобы указать на другое качество текста, например, таксономическое обозначение, технический термин, идиоматическая фраза из другого языка, транслитерация.
<p>В воздухе витает нечто <i lang="fr">je ne sais quoi</i>.</p>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-u-element
Элемент u представляет собой фрагмент текста с нечеткой, хотя явно отображаемой, нетекстовой аннотацией, пометка текста как написанного с ошибкой.
в браузере, подчеркивает текст
<p>The <u>see</u> is full of fish.</p>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-cite-element
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element
Элемент cite представляет собой название произведения (например, книги, статьи, эссе, стихотворения, партитуры, песни, сценария, фильма, телешоу, игры, скульптуры, картины, театра). постановка, спектакль, опера, мюзикл, выставка, судебный отчет, компьютерная программа и т. д.). Это может быть работа, которая подробно цитируется или упоминается (т. е. цитата), или это может быть работа, которая упоминается вскользь.
Имя человека не является названием произведения — даже если люди называют этого человека произведением — и поэтому этот элемент не должен использоваться для обозначения имен людей.
<p>Моя любимая книга — <cite>The Reality Disfunction</cite> автора
Питер Ф. Гамильтон. Мой любимый комикс <cite>Pearls Before</cite> Стефана Пастиса. Мой любимый трек - <cite>Jive. Самба</cite> в исполнении секстета Cannonball Adderley.</p>
<p>Корабль <cite> Александр Суворов </cite></p>То что находится в cite, не являентся просто фамилией, а является чем-то цитируемым откуда то
q Цитата, цитата которая вставлена в рамках параграфа текста
<p>На странице W3C <cite>О W3C</cite> говорится, что W3C
миссия состоит в том, чтобы <q cite="https://www.w3.org/Consortium/">возглавить
World Wide Web полностью раскрывает свой потенциал, разрабатывая протоколы и
руководящие принципы, обеспечивающие долгосрочный рост Интернета</q>. я
не согласен с этой миссией.</p>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element
https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
code: представляет собой фрагмент компьютерного кода.
pre: Элемент pre представляет блок предварительно отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементами.
<pre><code class="language-pascal">var i: Integer;
begin
i := 1;
end.</code></pre>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sub-and-sup-elements
Верхний и нижний регистр
представляют изменения в документе.
<aside>
<ins datetime="2005-03-16 00:00Z">
<p> I like fruit. </p>
</ins>
<ins datetime="2005-03-16 00:00Z">
Apples are <em>tasty</em>.
</ins>
<ins datetime="2007-12-19 00:00Z">
So are pears.
</ins>
</aside>
<h1>To Do</h1>
<ul>
<li>Empty the dishwasher</li>
<li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
<li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
<li>Buy a printer</li>
</ul>
- button
- input
- label
- select
- textarea
<form action="https://www.google.com/search" method="get" enctype="multipart/form-data">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" id="exampleInputEmail1" />
</div>
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" id="exampleInputPassword1" />
</div>
<div>
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div>
<input type="checkbox" name="size" value="xl" id="exampleCheck1" />
<label for="exampleCheck1">Check me out</label>
</div>
<div>
<input type="checkbox" name="size" value="m" id="exampleCheck2" />
<label for="exampleCheck2">Check me out</label>
</div>
<div>
<input type="radio" name="color" value="red" id="exampleCheck3" />
<label for="exampleCheck3">Check me out</label>
</div>
<div>
<input type="radio" name="color" value="blue" id="exampleCheck4" />
<label for="exampleCheck4">Check me out</label>
</div>
<button type="submit">Search...</button>
<input type="submit" value="Search..." />
</form>rows — Количество строк для отображения
- article
- section
- nav
- aside
- h1, h2, h3, h4, h5, and h6
- hgroup
- header
- footer
- p
- blockquote
- ol, ul, li
- dl, dt, dd
- div
- a
- span
- time
- strong
- s
- code,pre
- sup,sub
- small
- q,cite
<button type="submit">Submit</button>
<button type="reset">Submit</button>
<button type="button">Submit</button>Если элемент это ссылка, т.е переход на др. страницу или web ресурс, то тег <a>
Если при нажатии на что-то, должно произойти какое-либо действия - <button type="button">Go to Top</button>
а не <a href="#">Go to Top</a>
Всегда должен быть alt
<img src="example.jpg" width="1280" height="2265" alt="">Не используем, иконочный шрифт (Font Awesome)
Элементы вставляем через svg, css - background-image или псевдо элементы (:after, :before)
Schema.org — это совместная инициатива по разработке единой схемы для семантической разметки в HTML5. Инициатива была запущена второго июня 2011 года создателями крупнейших поисковых систем — компаниями Google, Yahoo! и Microsoft, а первого ноября 2011 года к ней присоединилась российская компания Яндекс.
Семантическая верстка описывает абстракции, сущности, но она не говорит ни о чем конкретном.
С помощью микроразметки мы может детально, конкретно описать четко структуру какого-то объекта при условии, если эти свойства заранее предопределены в словаре.
https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?hl=ru
https://search.google.com/test/rich-results
https://html.spec.whatwg.org/multipage/#toc-dom
Модель контента
Нормативное описание того, какой контент должен быть включен в качестве дочерних элементов и потомков элемента.
https://html.spec.whatwg.org/multipage/dom.html#content-models
Некоторые элементы описываются как прозрачные. У них есть "transparent" в описании их модели содержания. Модель содержания прозрачных это производная от модели содержания её родительского элемента:
Элементы требуемые в части модели содержания, которая является прозрачной (имеет "transparent"), это такие же элементы которые требуется в модели содержания родителя прозрачного элемента, в котором он находится.
https://habr.com/ru/company/timeweb/blog/685990/
https://habr.com/ru/article/686010/
https://codepen.io/alexps2/pen/VwxZGBR
<body>
<h1>Сайт про бизнес</h1>
<header><img src=""></header>
<section>
<header>
<h2>Слайдер</h2>
</header>
<article></article>
<article></article>
<article></article>
</section>
<section>
<h2>Тект про бизнес</h2>
<p></p>
<p></p>
<p></p>
</section>
<section>
<h2>Новости</h2>
<article></article>
<article></article>
<article></article>
</section>
<section>
<h2>question-answers</h2>
<article></article>
<article></article>
<article></article>
</section>
<section>
<h2>service</h2>
<article></article>
<article></article>
<article></article>
</section>
<footer>@copyright</footer>
</body>Задачи:
Навигация (1,2)
https://tailwindui.com/components/application-ui/navigation/breadcrumbs
https://tailwindui.com/components/application-ui/navigation/vertical-navigation
Контент (1 - Centered)
https://tailwindui.com/components/marketing/sections/content-sections
Блог (1 - 2-column with sign-up)
https://tailwindui.com/components/marketing/sections/blog-sections
FAQ (3 - Side-by-side)
https://tailwindui.com/components/marketing/sections/faq-sections
Service (4 - With background image and overlapping cards)
https://tailwindui.com/components/marketing/sections/header
E-commerce Category page (2 - With image header and detail product grid)
https://tailwindui.com/components/ecommerce/page-examples/category-pages