Вопросы к разделу «Разметка» на 26 потоке

htmlcss-1__section-2.md

Вопросы к разделу «Разметка»

1. Как используется бинарный атрибут hidden?

Всем HTML-элементам может быть установлен атрибут hidden. Атрибут hidden позволяет скрыть элемент со страницы, причем элемент перестает занимать место в интерфейсе. Сам атрибут логический, это значит, что он может иметь два состояния - включен или выключен:

• <div hidden></div> - элемент скрыт
• <div></div> - элемент не скрыт

Обычно состоянием видимости элемента управляют с помощью CSS. Для этого используют свойство display со значением none. Но есть один момент, который вы должны учитывать.

.show {
  display: block;
}

<div class="show" hidden>Я скрытый или нет?</div>

В этом случае .show будет показан, так как приоритет у CSS.

Используйте атрибут hidden правильно Атрибут не нужно использовать на тех частях сайта, которые пользователь точно не должен получить. Например, у вас есть текст с данными о счёте клиента, но его можно увидеть только после регистрации. Если вы скроете счёт с помощью hidden, то доступ к нему всё равно останется. Мы лишь скрываем его визуально, а сам счёт остаётся в коде и получается, что доступ есть у любого пользователя.

Не нужно скрывать заголовки(label, h1-h6 и другие) с помощью hidden, так вы прячете заголовки от скринридеров. Для этого создали специальный css-класс, с которым вы можете познакомиться в нашей статье.

Не скрывайте поля форм с помощью этого атрибута, ведь данные формы всё равно будут отправляться. Для этого есть более подходящий атрибут disabled.

2. Почему в галерее кнопка «назад» это <button>, а не <a>.

Если коротко, то ссылкой становятся элементы, которые куда-либо ссылаются:

• на другую страницу;
• на какую-то секцию на странице;
• изменение get-параметров страницы.

То есть, по факту происходит физическое изменение ссылки при взаимодействии с элементом.

При клике на кнопку «назад» в галерее нам не нужно переходить на другую страницу или менять положение на странице. Нам всего лишь нужно поменять слайд. В этом случае используется <button>.

Как правильно разметить вводный текст к списку, когда мы верстаем текст документа. Т е нам нужно чтобы визуально были отступы между абзацами. А если внутри абзаца есть вводное предложение и через двоеточие список - то они бы не разрывались отступом и выглядели единым целым? очень хочется использовать:

<p>
      вводное предложение:
      <ul>
        <li></li>
....
        <li></li>
     </ul>
</p>

но это под запретом по спецификации. как лучше такое разметить в html? или тут только с css

пример текста:

Наш финансовый сектор идет в ногу с мировыми тенденциями. Если говорить про тенденции, то можно выделить следующие:
банкострахование становится важнейшим каналом продаж для страховщиков,
диджитализация финансовой сферы несет в себе как риски, так и шансы,
ведутся дискуссии о мисселинге и внедряются те или иные меры для его предотвращения,
под внимание начинают попадать размер банковских комиссий за продажу страховых продуктов, да и в целом вопросы ценообразования в данном направлении,
финансовые рынки начинают ощущать перспективы стандартизации.

@mauta, это просто параграф и список:

<p>Использовать:</p>
<ul>
  <li>…</li>
</ul>

тогда у нас автоматом отступ между списком и вводным предложением. если его не хочется делать???

@mauta для этого придумали стили :)

<p style="margin-bottom: 0">Использовать:</p>
<ul>
  <li>…</li>
</ul>

Была надежда без стилей =))) сб, 7 сент. 2019 г., 15:05 Vadim Makeev <notifications@github.com>:

…

@mauta <https://github.com/mauta> для этого придумали стили :) <p style="margin-bottom: 0">Использовать:</p> <ul> <li>…</li> </ul> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/455dd8d191e49b0836bae79c04fc599e?email_source=notifications&email_token=AMSYN2HWCWDRJEKEFYGLZ3DQIOKKBA5CNFSM4IT5PBDKYY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFYJBQ#gistcomment-3019288>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMSYN2B2S4L5YHOMWJSXTFLQIOKKBANCNFSM4IT5PBDA> .

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

Здравствуйте!

В обзоре разметки внутренней страницы-каталога «Барбершопа» (макет barbershop-shop.psd) карточки товаров размечаются элементами списка с кучей вложенных span'ов, абзацев и ссылок:

<code>
<ul>
         <li>
            <h3>
                <a href="catalog-item.html">
                    <span>Набор для путешествий</span>
                    <span>«Baxter of California»</span>
                </a>
            </h3>
            <p>
                <a href="catalog-item.html">
                    <img src="img/product-1.jpg" width="220" height="165" alt="Набор для путешествий «Baxter of California»">
                </a>
            </p>
            <p>
              2 900 ₽
                <a href="#">Купить</a>
            </p>
         </li>
</ul>
</code>

Вопрос: можно ли вместо списка <ul> использовать обёртку <div>, а вместо <li> — <figure> следующим образом:

<code>
<div>
    <figure>
        <a href="">
            <img src="https://via.placeholder.com/150x120" alt="Набор для путешествий «BAXTER OF CALIFORNIA»">
	</a>
	<figcaption><a href="">Набор для путешествий «BAXTER OF CALIFORNIA»</a></figcaption>
        <p>
	    <span>2 900 Р</span>
	    <button type="button">Купить</button>
        </p>
    </figure>
</div>
</code>

Или же это неправильное решение?

И ещё непонятен момент с «...<a href="#">Купить</a>». Почему «Купить» здесь — это ссылка, а не кнопка?

Заранее благодарю за ответы! :)

@ZomboBombo, попробуйте, когда спрашиваете «а может так?» аргументировать, почему так лучше, чем предложенное решение. Тогда вам самим будет становиться понятнее, чем это лучше. А может быть чем хуже.

Вопрос: можно ли вместо списка <ul> использовать обёртку

Можно всё, что не противоречит критериям :) Но список здесь подходит логически, ведь здесь перечисление товаров.

вместо <li> — <figure> следующим образом

Почитайте спецификацию, где описан элемент <figure>, он не самостоятельный, он подходит как иллюстрация к каком-то контенту (картинки, графики, код). Плюс <figcaption> — это подпись к картинке, а вы её используете как название товара. То, что вы используете заголовок, ухудшает доступность такого интерфейса. Об этом подробнее будет в 4 разделе про доступность.

Почему «Купить» здесь — это ссылка, а не кнопка?

Потому, что это ссылка, которая ведёт на страницу товара, а не добавляет в корзину.

На счёт <figure> всё понятно. Спасибо!
Но на счёт ссылки...
В ТЗ написано следующее:
«3.15. Карточка товара: кнопка «Купить» — по клику товар добавляется в корзину (макета корзины нет, не делать)».

@pepelsbey Подскажите пожалуйста, почему в разметке мы оборачиваем изображение в тег p ? В качестве причины указано - "визуальное описание товара", но мне кажется немного непонятное объяснение.

@ZomboBombo, по ТЗ там должна быть кнопка, но мы улучшили её до ссылки, чтобы можно было попасть на страницу товара, если кликнуть правой кнопкой и открыть в отдельной вкладке. Это делать не обязательно.

Должно ли быть всё пространство тега main разделено тегами section, article, aside ? Или допустимо наличие областей, не попадающих в область этих тегов ?

@KBoyarchuk оборачивать картинку в параграф необязательно. С точки зрения вложенности тегов — проблем никаких, картинку дейтвительно можно завернуть в параграф и это будет визуальным описанием товара. Другое дело, что параграф здесь не будет нести особой пользы. Мы пересмотрим эту демку, спасибо.

@shkarov тег main описывает уникальное содержимое страницы, делить его на секции нужно тогда, когда эти секции действительно есть и их можно назвать. Если контент внутри — это одна секция, то её можно опустить. Секции имеющие смысл — это две и больше.