Блог

Как разработчик-новичок, я пытаюсь изучить html5 и css с нуля правильным и аккуратным способом. Итак, я попытаю счастья с семантикой, семантическими элементами, структурой документа и т.д.

Допустим, у нас есть несколько абзацев в разделе. Для меня нормально использовать <p> s, когда они необходимы. Но я хочу отделить только одно предложение от предыдущего и следующего абзацев. Это предложение рассказывает другую историю, факт, информацию и т.д. Вот почему я хочу его разделить.

Вот пример. Это мой раздел о помоле кофе (просто пример):

Измельчение

Цельные кофейные зерна подвергаются измельчению, также известному как помол, для облегчения процесса заваривания. Тонкость помола сильно влияет на приготовление. Методы заваривания, при которых кофейная гуща дольше выдерживается в подогретой воде, требуют более грубого помола, чем методы быстрого заваривания. Зерна, которые слишком мелко измельчены для используемого метода заваривания, оставят слишком большую площадь поверхности подогретой воде и придадут горький, резкий, «переваренный» вкус. С другой стороны, слишком крупный помол приведет к некрепкому кофе, если не использовать больше. Из-за важности тонкости обработки очень желательна равномерная обработка.

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

(hr здесь)

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

(hr здесь)

Измельченный кофе можно повторно использовать для ухода за волосами или кожей, а также в саду. Их также можно использовать в качестве биодизельного топлива.[1]

(hr здесь)

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

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

Итак, вместо использования <p> я подумал об использовании <hr с непрозрачностью 0. После этого я подумал, что смогу использовать это для других <p> файлов. Итак, много <hr> букв в разделе! Теперь:

1. Нормально ли использовать <hr> подобное (0 непрозрачности)?
2. Как вы справляетесь с подобными проблемами?

Нет, использование <hr> тега внутри <p> тега не будет считаться семантическим HTML. Для этого есть две причины:

1. <hr> не допускается внутри <p> по спецификации (подробнее см. Содержание формулировки).

2. Согласно <hr> определению тега, он используется для «… тематического разрыва, например, смены сцены в истории или перехода к другой теме в разделе справочника».

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

Тем не менее, как уже упоминалось в комментариях, <aside> теги кажутся наиболее подходящими для типа контента в вашем примере. Из спецификации:

aside Элемент представляет раздел страницы, который состоит из содержимого, которое косвенно связано с содержимым родительского раздела content, и которое можно рассматривать отдельно от этого содержимого. Такие разделы часто представлены в виде боковых панелей в печатной типографии.

Может быть, <cite> для цитирования или <kbd> для текста с клавиатуры