Html 标题的正确标记

我如何语义标记文章中的标题，如下图所示？我经常遇到这个问题；其中，我有一个标题是视觉第一，但是一个副标题，介绍标题或不太重要，然后是主标题。我可以把它放在主标题之后，然后用CSS将它移到上面，但这并不总是一个理想的解决方案

另一个问题：是否有任何特殊的方式标记引导段落

不允许？

新产品
推出我们的新x系列
Lorem ipsum door sit amet
整型静脉曲张，静脉曲张，静脉曲张

...

虽然你所做的是语法上允许的，但我认为这会给视力低下的用户带来困惑

这样做怎么样：

<div class="newproduct>New Product</div>
<div class="articletitle">Launching our new x-series</div>
Lorem ipsum....

---

不要在副标题中使用标题元素（
h1
-
h6
）。这在
hgroup
元素中曾经是可能的，但是它被删除了

现在HTML5规范中有一节是关于。在副标题中使用
p
元素，并在
标题
元素中对标题和副标题进行分组：

，你也可以把它放在
标题中。
不使用h1对搜索引擎优化不是很友好，而且通过使用文章（就像我一样），h1应该出现。你是问语义还是搜索引擎优化？你可以在文章中使用标题标签。每篇文章都应该是关于一个独立的“东西”（即新闻文章、博客条目、词典条目等）。我的回答是关于视力低下的人（盲人或近乎盲人）。我的问题是关于语义的，因此与搜索引擎优化直接相关。但主要是关于如何在标题上标记h1和h2（如果需要）。我将更新我的问题，使其更加精确，并使用多种验证工具（仅在线）进行测试。他们中没有人抱怨使用您的code.Perfect的标记无效。正是我想要的：）
<div class="newproduct>New Product</div>
<div class="articletitle">Launching our new x-series</div>
Lorem ipsum....