什么是HTML隐藏元素？

HTML隐藏属性表示元素尚未或不再相关。 如果你将一个元素标记为"隐藏"，你就告诉浏览器不要向用户显示它。 即使他们使用的是屏幕阅读器。

隐藏属性如下所示:

在上面的例子中，浏览器不会显示第一行文本。 但它会显示第二行。

HTML hide属性允许开发人员控制页面上元素的可见性。 这可以帮助简化用户体验，防止不相关的内容干扰网页，直到该内容变得相关。 或者直到用户与页面的特定部分进行交互。

例如，如果用户单击按钮或下拉菜单切换。 此操作可能会触发JavaScript的代码来移除隐藏属性并揭示内容。

如何使用HTML隐藏属性

您可以在组件的HTML标记中应用HTML hide元素，使其在网页上不可见。

为此，请将"隐藏"添加到要隐藏的元素。 以下是如何查找要隐藏的标题和段落:

此属性适用于主要浏览器，包括Chrome，Edge，Firefox和Safari。

HTML Hide属性的工作原理

HTML hide属性使任何网页元素对用户不可见，而不会将其从HTML文档中删除。 让您控制页面上内容的可见性。

将hidden属性添加到元素会导致浏览器应用以下CSS属性:

页面呈现为元素不存在，使元素对查看器不可见。

但是，该元素仍然存在于DOM中（文档对象模型），这意味着您可以使用JavaScript的访问和操作它。

假设您有一个带有"阅读更多"按钮的网页。 您可以使用隐藏属性标记详细内容部分，使其不可见。

然后，当用户单击"阅读更多"按钮时，JavaScript的函数可以从详细内容部分中删除隐藏属性，使其对用户可见并可访问。

为什么要隐藏HTML元素？

学习如何隐藏HTML元素可以让你:

• Declutter接口
• 优先考虑内容
• 创建响应式设计

隐藏元素允许您最大限度地减少页面上的干扰，以便仅向用户呈现最重要的信息。 例如，您可以在可点击的链接或按钮后面隐藏高级设置或其他信息。

这使用户能够选择是否想要了解更多信息，而无需离开页面。 喜欢Semrush主页的这一部分，允许用户选择工具套件的不同方面以了解更多信息:

您还可以通过隐藏不太重要的元素来提请注意您希望用户采取的关键信息或操作。 例如突出显示注册按钮，同时隐藏下拉切换下的详细常见问题解答。

把重点放在你的行动呼吁上（Cta). 用户仍然可以通过单击下拉菜单了解更多信息。

您还可以隐藏可能出现在桌面上但可能在移动设备上创建混乱体验的HTML元素。 如侧边栏或额外的菜单。

HTML hide属性是一种简单的语义方式，用于指示浏览器不应显示元素。 但其他技术可能会在隐藏元素以及它们如何影响网页布局和可见性时提供更多控制。

在网页设计中隐藏元素的其他技术

在网页设计中隐藏元素的不同技术包括使用CSS和JavaScript的。 每种方法都提供适合特定用例的独特优势。

在这些方法之间进行选择取决于您的首选项，包括元素应如何与布局交互，可访问性是否值得关注，以及是否需要动画。

使用CSS显示

您可以使用值为"none"的"display"属性来使用CSS隐藏元素。 此方法从文档流中删除元素，这意味着它不会占用空间，并且对用户不可见。

有两种方法可以使用CSS显示。 第一种是通过内联CSS，在HTML元素中添加带有"display:none;"的"style"属性。

例如:

第二种方法是使用外部或内部CSS。 在你的CSS文件或

例如:

然后，在你的HTML中，对你想要隐藏的任何元素使用类"hidden-text:

当您将元素设置为"display:none;"时，您将删除它通常占用的空间，其他元素可能会移动以填充间隙。

具有"display:none;"属性的元素不会出现在屏幕阅读器和其他辅助技术中。 因此，依赖这些技术的用户无法访问内容。 考虑使用此属性的影响，以确保您不会隐藏所有用户都可以访问的内容。

可见性：隐藏和不透明

"Visibility:visible;"属性保存文档流中的元素（占用空间），但使其不可见。 用户无法与之交互。

但是，"opacity:0;"属性使元素完全透明但仍然具有交互性，并且它仍然占用空间。

下面是一个同时具有可见性和不透明度属性的CSS代码示例:

这两个元素对用户都是不可见的。 用户无法与之交互。隐藏可见性元素,但它们可以与.透明-不透明度元素。

对于网页设计，"visibility:visible;"非常适合在隐藏元素的同时保持布局结构，因为它保留了元素的空间。

在创建到不可见性的平滑过渡时，您可以使用"不透明度：0;"属性。

您可以使用"不透明度：0;"隐藏元素以进行设计创意，但如果您不仔细实施，这可能会让用户感到困惑。 例如，用户可能会意外地单击完全透明的按钮并转到他们无意的页面。

搜索引擎也可以考虑使用"不透明度：0;"来隐藏内容作为滥发电邮实务，特别是如果它试图操纵排名。 这可能会对您网站的排名产生负面影响或导致处罚，例如搜索引擎将您的网页从搜索结果中完全删除。

进一步阅读: 如何识别和修复谷歌罚款

动态内容隐藏的JavaScript的技术

JavaScript的提供了一种灵活的方式来根据需要显示元素。 允许您根据用户交互或特定条件显示网页内容。

JavaScript的通过更改html元素的样式或属性来操作它们。 对于隐藏元素，您可以将display style属性调整为"none"以隐藏元素，并将其设置回"block"或"inline"（取决于元素的默认显示值）以显示它。

动态隐藏或揭示的一些用例包括:

• 用户交互：如点击一个按钮，将鼠标悬停在一个元素上或提交一个表单。 例如，在提交后隐藏表单以显示成功消息。
• 页面加载条件：根据页面加载时的情况设置元素显示或消失。 像一天中的时间或用户的位置。
• 对数据的回应：更改内容可见性，以响应在等待数据时显示加载动画。 一旦数据出现，您就可以隐藏它们。

隐藏浏览器的内容，但不隐藏屏幕阅读器

在大多数标准情况下，您在浏览器上向用户显示的内容应该可供使用屏幕阅读器等设备的用户使用。 这通常是一个无障碍网页最佳实践。

但是，如果您想为浏览器隐藏内容而不是为屏幕阅读器隐藏内容，一种选择是将内容定位在屏幕外。 您不应该对任何可导航元素（如链接）执行此操作。

要做到这一点，首先创建一个像这样的CSS类:

如果需要，您可以将".sr-only"类命名为其他类。

您将使用它来定位要隐藏在屏幕外的HTML元素，如下所示:

屏幕阅读器将阅读此内容，就好像它仍然是页面内容的一部分。 但是，它将被放置在远离屏幕左侧的位置，因此有视力的用户不会在浏览器中看到它。

隐藏HTML元素的风险

错误地隐藏网站上的元素可能会对您在搜索结果中的可见性产生负面影响。

搜索引擎可能会将隐藏内容视为试图通过向用户隐藏内容但将其呈现给搜索引擎来操纵搜索结果。

放置大量的关键字-填充屏幕外的文本或使用CSS使文本与背景颜色相同是垃圾邮件发送者在谷歌早期使用的技术。

但现在搜索引擎可以将这些做法视为操纵排名的企图，可能导致处罚。

所以，隐藏HTML元素时要小心。 此外，在尝试隐藏元素时错误地使用代码可能会导致您的网站出现技术问题。

通过网站审核解决技术SEO问题

定期的网站审核可以帮助您识别和解决搜索引擎优化问题. 包括那些可能出现的，如果你试图隐藏HTML元素时出错。

塞姆鲁什氏现场审核工具帮助发现问题与您的网站的搜索引擎优化，并提供建议如何解决这些问题。

转到该工具，输入您的域名，然后点击"开始审核"按钮。

您将看到一个菜单，您可以在其中配置审核设置。

当你准备好了，点击"开始现场审核.”

审核完成后，您将看到网站整体运行状况的详细报告。 如欲了解更多详情，请按"问题"tab。

此选项卡将显示您的网站的问题。 您可以点击"为什么以及如何解决它"每个问题旁边的文字，以了解它以及如何解决它。

通过尝试解决您网站的技术问题现场审核工具是免费的。

这篇文章在2024年更新。 康纳*拉希（Connor Lahey）的原始文章摘录可能会保留下来。