将作为CSS网格布局子项的HTML标记放入<；第节>；标签将更为WCAG友好

在网页布局中使用CSS网格，当语义分组中的项目是网格容器的直接子项时，是否可以在不破坏网格布局的情况下对标签（如

）进行语义分组

我想通过将内容分成连贯的单元（）来进行语义分组，从而迫使自己遵守WCAG规范；我面临的问题是，我看不出如何在维护布局的同时将标题分组为

，布局部分由专用于徽标的网格单元组成

HTML标记

测试
收割台h1







测试权限内容
测试页脚

CSS样式

/*整个*/
身体{
保证金：0；
高度：100vh；
溢出：隐藏；
}
#包装纸{
高度：100vh；
宽度：100vw；
显示：网格；
网格模板柱：1fr 8fr；
网格模板行：2fr 17fr 1fr；
网格间距：2px2px；
}
/*标题*/
#标志{
网格柱：1/2；
网格行：1/2；
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：1em；
}
img{
最大宽度：150px；
最大高度：90px；
}
#标题{
网格柱：2/4；
网格行：1/2；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
h1{
文本对齐：居中；
}
/*内容*/
#左撇子{
背景：黄色；
网格柱：1/2；
网格行：2/3；
}
#右内容{
背景：黑色；
颜色：白色；
网格柱：2/4；
网格行：2/3；
}
/*页脚*/
页脚{
背景：橙色；
网格柱：1/4；
网格行：3/4；
}

我必须说，我在这里感到相当困惑，因为大多数建议基本上都说，支持网格而不是语义分组是应该避免的：

若要使用一组

元素，则可以将该元素设置为容器的直接子元素，并将其设置为

显示：网格

。请意识到这种诱惑，并找到在不剥离标记的情况下开发设计的方法。从一个结构良好的文档开始是避免问题的一个很好的方法，因为您会意识到，如果您实际上必须进入文档并这样做，那么您正在删除语义元素以使布局工作正常

---

恐怕我还没有找到正确的结构或示例来解决我的问题

分配添加的分组元素

是否显示：内容

满足您的需要？像这样：

/*整个*/
身体{
保证金：0；
高度：100vh；
溢出：隐藏；
}
#包装纸{
高度：100vh；
宽度：100vw；
显示：网格；
网格模板柱：1fr 8fr；
网格模板行：2fr 17fr 1fr；
网格间距：2px2px；
}
部分{
显示：内容；
}
/*标题*/
#标志{
网格柱：1/2；
网格行：1/2；
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：1em；
}
img{
最大宽度：150px；
最大高度：90px；
}
#标题{
网格柱：2/4；
网格行：1/2；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
h1{
文本对齐：居中；
}
/*内容*/
#左撇子{
背景：黄色；
网格柱：1/2；
网格行：2/3；
}
#右内容{
背景：黑色；
颜色：白色；
网格柱：2/4；
网格行：2/3；
}
/*页脚*/
页脚{
背景：橙色；
网格柱：1/4；
网格行：3/4；
}

收割台h1







测试权限内容
测试页脚

基于@Alochi所说的内容和我们在评论中的讨论，我将更改您使用的HTML标记，使其更具语义。然后，您可以根据需要使用CSS

display:contents

来“隐藏”语义容器，以实现所需的布局

测试权限内容

Mozilla引用的话基本上是说HTML

是语义的。布局不会改变从语义开始的HTML。但是，您可能会试图删除一些语义元素以实现所需的布局。确实，有没有解决方法或技术来协调语义和视觉分组？我这样问是因为我不知道^^^我想重点是，任何关心语义HTML的东西都不知道CSS对视觉布局有什么影响。因此，将徽标作为

h1

或

引用比视觉上位于内容旁边或上方更为重要。至少这是我的解释。在您的情况下，我建议使用语义HTML5标记而不是div<代码>，

，等等，这很有道理；我们可以说标记的意义可能比它在标记中的位置更重要。。。再说一次，语言学专业人士会说，表达式的上下文与它的实际含义一样重要（如果不是更重要的话）。对，上下文很重要，即使在HTML中，但你可以