Как сделать тег невидимым – Можно ли скрыть стилем заголовок h1 только ради верного построения семантической верстки?

особенности применения свойства и его значения hidden

Свойство visibility — это не только видимость

От автора: недавно я столкнулся с проблемой, когда текст, содержащийся в созданной мною button, отсутствовал в дереве доступности и, следовательно, не был доступен для программ чтения с экрана. После некоторой отладки я понял, причина в том, что я визуально анимировал текст, изменяя прозрачность и, что более важно, свойство HTML visibility.

Я знаю, что это был недосмотр, и ранее я писал о различных эффектах различных способов скрытия элементов с помощью CSS. Но это заставило меня задуматься о поведении свойства visibility, особенно о его значении hidden, поскольку оно связано с различными видами «видимости» — визуальным представлением, размещением, вспомогательными технологиями и взаимодействием. Когда мы слышим слово «visibility», мы склонны думать только о видимости. Как мы увидим, свойство visibility — это не только (визуальная) видимость.

visibility: hidden и видимость

Когда речь идет о визуальной видимости, правило visibility: hidden дает ожидаемый эффект. Элемент становится более или менее «невидимым».

It's gone! ---> <span>I'm gone!</span>

It's gone! ---> <span>I'm gone!</span>

Свойство visibility — это не только видимость

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Макет — какое место занимает элемент на странице?

Отрисовка — что содержится в каждом пикселе?

Составление — в каком порядке рисуется каждый пиксель?

Для элемента с правилом visibility: hidden было бы целесообразно оптимизировать браузеры, не выполняя этапов отрисовки и составления, так как в месте, где будет находиться элемент, нет пикселей. Хотя в спецификации не указано, что браузеры должны выполнять эту оптимизацию, это помогает мне понять, как работает это правило, представляя его таким образом.

visibility: hidden и размещение

Хотя технически верно сказать, что элемент при применении к нему правила visibility: hidden невидим, можно утверждать, что он не является действительно невидимым, поскольку он все еще занимает место на странице.

Как я уже говорил, элемент с visibility: hidden, возможно, не должен проходить этапы отрисовки и составления в конвейере рендеринга. Тем не менее, он пройдет этап макета. Это означает, что, хотя пиксели не окрашены, они все еще занимают место на странице. Это похоже на Гарри Поттера в его плаще-невидимке — его не было видно, но он все еще был там.

Давайте возьмем эти три элемента div, каждый шириной 100 пикселей, к среднему div применено правило visibility: hidden.

<style> div { width: 100px; display: inline-block; background-color: #ffdb3a; } </style> <div>One</div> <div>Two</div> <div>Three</div>

<style>

    div {

        width: 100px;

        display: inline-block;

        background-color: #ffdb3a;

    }

</style>

 

<div>One</div>

<div>Two</div>

<div>Three</div>

Свойство visibility — это не только видимость

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотя средний div технически «визуально скрыт», можно утверждать, что он не является действительно невидимым из-за того, что он все еще занимает пространство.

visibility: hidden и интерактивность

Поскольку элемент с visibility: hidden будет по-прежнему занимать физическое пространство на странице, может показаться, что это правило визуально скрывает элемент аналогично установке для opacity значения 0. Однако, на самом деле правило visibility: hidden гораздо больше похоже на display: none.

Любые интерактивные элементы, такие как формы или ссылки, теряют способность взаимодействовать. Например, button ниже должна отображать предупреждение при нажатии.

It's gone! ---> <button >I'm gone!</button> <--- You can't touch it!

It's gone! --->

<button

        onclick="alert('Hello!')">I'm gone!</button>

<--- You can't touch it!

Хотя кнопка занимает физическое пространство, с ней никак нельзя взаимодействовать.

visibility: hidden и вспомогательные технологии

Основная причина, по которой правило visibility: hidden касается не только визуальной видимости, заключается в том, что оно также влияет на видимость элементов для вспомогательных технологий. Когда мы применяем к элементу visibility: hidden, оно также удаляет его из дерева доступности, что делает его невидимым для таких технологий, как программы чтения с экрана.

Взять, к примеру, проблему, с которой я столкнулся. У меня есть элемент button с вложенным span.

<button> <span>Button label here</span> </button>

<button>

    <span>Button label here</span>

</button>

Если мы посмотрим на свойства доступности элемента button, то увидим, что в нем нет текстового содержимого и, следовательно, нет доступного имени.

Свойство visibility — это не только видимость

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

Источник: https://bitsofco.de/

Редакция: Команда webformyself.

Свойство visibility — это не только видимость

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Свойство visibility — это не только видимость

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

что это такое, как и зачем делать текст невидимым в HTML на сайте

Москва г. Москва, ул. Нобеля 7, п. 56 +7 (800) 700-59-30

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

Черные методы скрытия текста

Скрыть текст на сайте можно различными методами, например:

  • использование шрифта такого же цвета, как и фон, на котором он размещен;
  • применение атрибутов стилей, <div style=”display:none”> как сделать скрытый текст .</div>;
  • выбор шрифта, размер которого равен нулю;
  • размещение текстового контента за графическим элементом.

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

Белые методы скрытия текста

Существуют разрешенные способы сокрытия текста от посетителей или роботов.

Для повышения юзабилити. Скрытый текст может улучшать юзабилити сайта и быть неотъемлемой частью его интерфейса (скрытый блок выпадающего меню, всплывающие подсказки или анонсы новостей). Так как цель подобных приемов - не манипуляция позициями сайта, а удобство пользователей, поисковые системы  не пессимизируют сайт за их применение. Для создания многоуровневых меню, подсказок и других эффектов можно использовать готовые скрипты, к примеру, Prototype, jQuery и др.

Для управления релевантностью. Одним из белых методов  управления релевантностью сайта является скрытие части текста от поисковых роботов, например, контактной информации на сателлитах при продвижении основного домена. Чтобы сделать текст скрытым для Яндекса или Google, используются теги запрета индексации <noindex> и <nofollow>. Также контент можно вывести как изображение, с помощью javascript и flash.

Управление видимостью элементов в CSS

управление над видимостью объекта

Доброго времени суток, уважаемые подписчики!

На связи Андрей.

Этот выпуск рассылки хотелось бы посвятить управлению видимости элементов в CSS.

Но прежде даю Вам ссылку на видео-версию данного урока:

Видео версия 12 урока

В html существуют возможность делать объект видимым или невидимым, причем есть различные варианты, и они по-разному отображают содержимое.

управление над видимостью объекта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, начнем.

Представим ситуацию: нам нужно в блок размером 200 на 300 пикселей вместить достаточно большой фрагмент текста (в принципе это может быть что угодно).

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

Для нашего блока задаем свойство overflow со значением scroll. Блок становится с нужными нам размерами, все содержимое поместилось в нем, и появились полосы прокрутки.

Значения свойства overflow приведены ниже:

overflow – управление размерами объекта, если его содержимое не может быть показано целиком.

Значения:

auto – определяется браузером.

visible – размер растягивается до такой степени, что бы все содержимое было видимым.

hidden – то, что выходит за границы элемента просто не отображается.

scroll – все содержимое отображается, и появляются полосы прокрутки.

Для нашего конкретного случая пример:

<style type="text/css"> #st1{ overflow: scroll; width:200px; height:300px; } </style> <div> Достаточно большой фрагмент текста </div>

<style type="text/css">

#st1{

overflow: scroll;

width:200px;

height:300px;

}

</style>

<div> Достаточно большой фрагмент текста </div>

Есть свойство, которое позволяет управлять видимостью содержимого элемента.

visibility — управляет в CSS, видимостью содержимого элемента.

Значения:

Visible – содержимое отображается.

hidden — содержимое не отображается.

управление над видимостью объекта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Пример:

<h3>содержимое этого заголовка не отобразится</h3>

<h3>содержимое этого заголовка не отобразится</h3>

Следующее свойство, которое позволяет управлять видимостью блока – это display.

display — определяет, как будет отображаться элемент

Значения:

none — элемент не отображается

block - разбивает строку до и после элемента (т.е. элемент не может находится на одной линии с другими элементами)

inline - не разбивает строку

Как этим свойством пользоваться?

Допустим у нас идет текст, среди этого текста есть тэг <strong> или это может быть ссылка, и нам нужно, что бы содержимое этого тэга или ссылки отображались на отдельной строке, то для них мы зададим свойство display cо значением <strong>block. И наоборот, если нужно, допустим, чтобы тег <h3> был не на отдельной сроке, а в той же что и текст, то ему задаем свойство display cо значением inline.

Примеры:

<h3>будет на одной строке с текстом </h3> <strong>отобразиться на отдельной строке</strong>

<h3>будет на одной строке с текстом </h3>

<strong>отобразиться на отдельной строке</strong>

Особого внимания заслуживает значение none. Если мы зададим какому-либо элементу, свойство display со значением none, то этот элемент не отобразиться. Причем, в отличие от свойства visibility со значением hidden, этот элемент не отобразится полностью (свойства visibility со значением hidden не отобразит содержимое элемента, а сам элемент будет занимать свое место на странице).

Пример:

<h3>элемент не отобразится на странице</h3>

<h3>элемент не отобразится на странице</h3>

Чем хочу завершить данный выпуск?

Скажу, что эти свойства очень важны при разработке выпадающих меню (при наведении на пункт меню выпадают подпункты этого меню).

Идея здесь заключается в том, что мы скриптом меняем значения none на display при наведении курсора мыши на ссылку.

О таких меню будет подробно рассказано на диске, который уже совсем скоро выйдет в свет.

Повторная ссылка на видео-версию урока:

Видео версия 12 урока

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

До скорой встречи!

киберсант-вебмастер

управление над видимостью объекта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее киберсант-вебмастер

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Скрытый текст на сайте – что это? Как и зачем делать текст невидимым

В попытке продвинуть свой сайт веб-мастера и сео-специалисты зачастую прибегают к методам «черной» и «серой» оптимизации. Одним из таких способов является добавление скрытого текста на сайт. О том, что это такое, и стоит ли использовать этот метод при продвижение веб-ресурса, мы расскажем в данной статье.

Что такое скрытый текст?

Скрытый текст на сайте – такой способ продвижения веб-ресурса, при котором на нем размещается текст, не видимый пользователями сайта, но при этом индексируемый роботами поисковых систем.

Какими способами можно скрыть текст на сайте?

Текст, размещенный на веб-ресурсе, можно скрыть с помощью одного из следующих методов (или использовать несколько из них одновременно):

  • цвет шрифта текста изменяется на идентичный цвету фона
  • изменение размера шрифта на нулевой или менее 1 миллиметра, при этом такой текст может иметь формат заголовка
  • использование атрибутов стиля <div style=”display:none”> текст</div>
  • смещение текста на странице за пределы видимости для пользователей при помощи CSS
  • размещение текста за графическим элементом
  • использование какой-либо ссылки в качестве скрытого текста (например, анкорной)

Зачем текст делают невидимым?

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

Последствия использования скрытого текста

При обнаружении использования этого метода на сайте поисковые системы пессимизируют такой веб-ресурс - накладывают на него санкции и могут исключить его из результатов поисковой выдачи. Однако не всегда размещение скрытого текста является способом обмануть поисковые системы. Существуют так называемые «белые», или разрешенные методы использования скрытого текста.

Допустимое использование скрытия текста

В некоторых случаях использование скрытого текста является оправданным:

Для улучшения параметров юзабилити

Скрытый текст способен повысить юзабилити, являясь при этом частью его интерфейса – например, в виде скрытого блока выпадающего меню, всплывающих подсказок или анонсов. В данном случае применение этого метода считается «белым» потому, что оно рассчитано не на обман поисковых роботов, а применяется для того, чтобы сделать сайт удобным в использовании для посетителей. В таком случае поисковые системы не «наказывают» веб-ресурс.

Для управления релевантностью

При продвижении основного домена на сайтах-сателлитах можно скрыть такую часть текстовой информации от поисковых роботов, как, например, контактные данные. Для того, чтобы сделать текст невидимым для Google и Yandex, применяются теги запрета индексации <noindex> и <nofollow>. Помимо этого, текстовое содержимое можно вывести как графический элемент, используя javascript и flash.

Стоит ли размещать скрытый текст на сайте?

Обнаружив использование этого метода на сайте в тех случаях, когда текст был скрыт в попытках обмануть роботы поисковых систем, последние строго «наказывают» такие веб-ресурсы, вплоть до их исключения из индекса. Поэтому общаться к такому способу имеет смысл только в разрешенных форматах, описанных выше. В иных случаях стоит обратить внимание на другие, «легальные» методы продвижения сайта.

информация из спецификации, примеры кода

Глобальный атрибут HTML5 hidden

От автора: как вы, наверное, знаете, существует несколько атрибутов HTML, которые считаются глобальными, поскольку они могут применяться к любому элементу HTML. В качестве примеров можно привести class, id, style и tabindex. Атрибут hidden HTML5, который был добавлен несколько лет назад, и о котором вы, возможно, забыли, используется для двух элементах в следующем коде.

<p hidden>Example text. Nothing to see here.</p> <textarea hidden>More example text.</textarea>

<p hidden>Example text. Nothing to see here.</p>

<textarea hidden>More example text.</textarea>

Атрибут hidden — это логическое значение, которое, если задано для элемента: «указывает, что элемент еще не указан или больше не имеет прямого отношения к текущему состоянию страницы, или что он используется для объявления содержимого для повторного использования другими частями страницы, а не для прямого доступа пользователя».

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

Глобальный атрибут HTML5 hidden

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для чего этот атрибут может использоваться?

Последняя часть определения в спецификации интересна тем, что она означает, что вы можете размещать контент на странице с атрибутом hidden, а затем обращаться к этому контенту через JavaScript для использования в другом месте. Я сделал это, прежде чем, например, использовать скрытый элемент textarea, но в стандартной ситуации я бы скрыл этот элемент с помощью CSS, используя что-то вроде display: none. С помощью hidden это сделать проще. Таким образом, элемент со атрибутом hidden является частью DOM, но недоступен для пользователя.

Вот пример, в котором я захватываю содержимое скрытого элемента innerHTML с помощью JavaScript:

Есть некоторые вещи, которые вы должны знать при использовании этого атрибута. Как объясняется в спецификации:

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

Глобальный атрибут HTML5 hidden

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Не скрытые элементы не должны содержать гиперссылок на скрытые элементы

Элементы, размеченные с использование hidden, по-прежнему потенциально активны. Например, элемент управления формой или даже элемент script по-прежнему будут работать.

Спецификация предоставляет информацию о допустимом использовании, и этот атрибут полностью поддерживается в браузерах при сопоставлении доступности. Он сопоставим с aria-hidden="true", но ведет себя иначе. В этой статье Стив Фолкнер описывает ряд различий между ними. Основным из них, конечно же, является тот факт, что элементы с aria-hidden="true" по прежнему отображаются в браузере, но не будут отображаться для вспомогательной технологии, тогда как элементы с hidden не отображаются ни там, ни там.

В той же статье Фолкнер также объясняет, как правильно использовать скрытый hidden: Если вы хотите скрыть контент от всех пользователей, используйте атрибут HTML5 hidden (наряду с CSS display:none для браузеров, которые еще не поддерживают hidden). Необходимости в использовании aria-hidden нет.

Глобальный атрибут HTML5 hidden

Как вы можете видеть, браузер использует селектор атрибутов для указания на элемент. Поэтому, чтобы переопределить это, вы должны убедиться, что используете селектор, который является более специфичным. В следующей демо-версии я переопределяю hidden для двух элементов с помощью CSS. В одном случае это работает, во втором - нет:

Элемент textarea по-прежнему скрыт, потому что селектор типа элемента недостаточно специфичен, чтобы переопределить CSS браузера. Однако элемент абзаца отображается, потому что я использую селектор классов, который переопределяет селектор атрибутов браузера.

Атрибут hidden поддерживается во всех современных браузерах и даже в IE11, поэтому его можно использовать в большинстве проектов.

Автор: Louis Lazaris

Источник: https://www.impressivewebs.com/

Редакция: Команда webformyself.

Глобальный атрибут HTML5 hidden

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Глобальный атрибут HTML5 hidden

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *