Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Правильный способ использования тегов break в HTML — Tempertemper
Технически это элемент, но все знают их как теги break . Теги разрыва являются самозакрывающимися элементами и выглядят так: .
Время мнений: есть только одна вещь, для которой мы должны использовать с. Но прежде чем я туда доберусь, вот несколько вещей, которые вам не должен использовать их для , а вместо них следует использовать разметку.
Неправильный способ использования тегов разрыва
Я видел теги разрыва, используемые для самых разных вещей, некоторые я полностью понимаю, другие заставляют меня вздрагивать. Это сводится к двум вещам:
Создание разрывов строк
Создание визуального пространства
Создание разрывов строк
Правильно: я собираюсь сказать вам, чтобы вы не использовали элемент с номером специально для создания разрывов строк для создания разрывов строк. У меня есть причины, хотя – выслушайте меня!
Хорошим примером является адрес. Как правило, контактный адрес отображается в нескольких строках, поэтому вы можете подумать, что ряд тегов разрыва выглядит как разумный шаблон разметки, к которому нужно стремиться.
Стиль может измениться
Прежде всего, подумайте, где вы разобьете адрес. Вот пример использования тегов разрыва:
<адрес> 123 High Street
Ньюкасл-апон-Тайн
NE1 4UR
Соединенное Королевство <адрес/>
Это хорошо работает как визуально, так и для программ чтения с экрана; точно так же, как зрячий пользователь видит каждую четкую новую строку, программа чтения с экрана перестанет читать, когда дойдет до каждого , требуя от пользователя перехода к следующей строке вручную.
Однако, если вы хотите немного сжать его визуально, скажем, поместив город и почтовый индекс в одну строку, вам придется отредактировать разметку:
<адрес> 123 High Street
Ньюкасл-апон-Тайн, NE1 4UR
Соединенное Королевство <адрес/>
Не забудьте сделать это в каждом месте или в каждом шаблоне, где указан адрес. Это может быть подвержено ошибкам, и это именно та ситуация, которую поможет нам избежать наилучшая практика разделения стиля и контента.
Обтекание каждой строки несемантическим
или дает нам гораздо больше гибкости:
123 High Street Ньюкасл-апон-Тайн NE1 4UR Великобритания
Я добавил сюда несколько семантических/описательных классов, но вам не нужно использовать их, чтобы выделить каждому элементу отдельную строку:
address span { display: block; }
Это заставляет программы чтения с экрана читать каждую строку и ждать, пока пользователь не перейдет к следующей вручную; точно так же, как это было бы с тегами разрыва.
А как насчет сжатия адреса, как мы это делали раньше? Что ж, мы могли бы обнулить каждую строку с помощью :nth-of-type , но это кажется немного странным, и нам нужно начать комментировать наш CSS, чтобы было ясно, что мы стилизуем с каждым :nth-of- введите псевдокласс .
Эти классы, которые я добавил, можно использовать для нацеливания на конкретные элементы, которые нам нужны, чтобы сделать улицу и страну на всю ширину, но город и почтовый индекс встроенными:
.street, .country { дисплей: блок; }
Хорошая вещь в этом заключается в том, что средства чтения с экрана, такие как VoiceOver, немного приостанавливаются, когда между двумя есть пробел (новая строка или просто пробел), поэтому адрес читается хорошо. Если вы хотите добавить знаки пунктуации, чтобы визуально разделить «части» адреса, вы можете сделать это:
Еще одно преимущество переноса каждого элемента адреса в отдельный элемент заключается в том, что мы можем добавлять микроданные. Микроданные предоставляют более детализированную и подробную информацию таким машинам, как поисковые системы, которые могут захотеть отобразить адрес на своей странице результатов и извлечь выгоду из знания того, что на самом деле представляет собой каждый бит адреса :
Хай-стрит, 123 Ньюкасл-апон-Тайн NE1 4UR Великобритания
Создание визуального пространства
Это большое нет-нет.
Тег разрыва создает разрыв строки, поэтому содержимое после будет отображаться на новой строке. Таким образом, использование второго (или третьего и т. д.) создаст свободное пространство между содержимым до и после серии тегов разрыва.
Это абзац текста.
Этот текст отделяется от текста выше одной строкой.
Но этот контент действительно лучше разметить как два абзаца:
Это абзац текста.
Этот текст отделяется от текста выше символом однострочный интервал.
Теперь это два абзаца, визуально и семантически, но это также предотвращает смешение содержимого и стилей, с которыми мы столкнулись с адресами, позволяя легко стилизовать абзацы с помощью CSS. Например, чтобы отрегулировать расстояние между абзацами, мы бы сделали это:
p + p { margin-top: 1em; }
Делать то же самое с тегами разрыва — это очень больно…
Вы могли бы сделать это с margin-top , но line-height инстинктивно кажется более подходящим, поскольку мы хотим контролировать высоту сам элемент, а не добавлять отступ к чему-то еще, чтобы создать пространство.
Как я упоминал ранее, теги разрыва не являются типичными для
display: block; Элемент стиля . В отличие от
, например, они не занимают всю строку, отодвигая окружающий контент выше и ниже себя. Вместо этого они форсируют содержимое, которое появляется после под ними. на самом деле находится в конце строки, на которой он находится, поэтому будет учитываться вместе с «Это абзац текста» в первом примере выше (именно поэтому я добавил тег разрыва в конец линии, а не на отдельной строке). Второй тег разрыва делает то же самое, но находится в конце строки без содержимого, поэтому это создает разрыв.
Увеличение line-height s приведет к увеличению line-height текста, в конце которого он находится в конце; второй будет располагаться на отдельной строке и будет иметь ту же высоту строки , что и первая строка текста.
Теги разрыва являются самозакрывающимися элементами и выглядят так: 
