什么 HTML 元素用于短文本？

Question

我正在研究 UI 内部管理 Web 应用程序，它使您能够管理不同类型的数据（在我们的示例中为人员）。一些屏幕由 header 组成，其中包含此人的基本信息，以及用于进行更改的表格。

示例标记（无样式）：

<header>
    <h1>John Doe</h1>
    <img src="johndoe.jpg" alt="Profile picture"/>
    <div>Group X</div>
    <div>London, UK</div>
    <div>01.01.1970</div>
    <div>some kind of ID (example: X920EDY)</div>
</header>

我想通过使用语义标记来提高我们应用程序的可访问性，但无法弄清楚 header 区域中应该使用哪些 HTML 标记。我会为标题（“John Doe”）使用 <h1>，为图像使用 <img>，但我不确定其余内容使用什么。

右边的文字（“Group X”）在视觉上看起来像一个标题，但在这里使用 <h2> 感觉不对，因为 <h> elements should represent headings of sections 并且没有分组属于该文本的内容。

标题下方的文字目前定义为<div>——感觉也不对，因为<div>s have no meaning on their own. I thought about using a <p> but the texts are not paragraphs. Another options I considered were <span> and <ul> but they also don’t seem right because the first one, like <div>, has no semantic value and the texts don't create a list of semantically similar items。

有没有人有更好的主意？

Answer 1

在我看来，这里的列表将是最好的解决方案。它不会传达语义相似的项目，但会聚集在一个引擎盖下，也就是说，关于 John Doe 的所有信息。
你可以做一个 <ul>，但如果出于某种原因你想保留你的 div，你可以这样做并为列表添加适当的 ARIA，如下所示。
还有一件事：据我所知（在视力正常的情况下），ID 与 X 组相关。即，数据如下：John Doe，伦敦，生日，x 组，ID。如果我是对的，您需要更改 divs 在代码 中的位置，因为大多数屏幕阅读器都会按照代码中的布局排序页面。
因此，除了为列表添加外部 div 之外，无需更改标记的最终解决方案：

<div role="list">
    <div role="listitem">London, UK</div>
    <div role="listitem">01.01.1970</div>
    <div role="listitem">Group X</div>
    <div role="listitem">some kind of ID (example: X920EDY)</div>
</div>

什么 HTML 元素用于短文本？

What HTML element to use for short pieces of text?

html

accessibility

semantic-markup