Which HTML tag will be the best for the red part in HTML case?

AFAIK the summary tag has another concept - it consists from the short text and details which could be hidden (collapsed). In the case of the article, basically it is nothing required to hide./

CodePudding user response：

Basic HTML and ARIA do not express much of the semantics of scholarly publications.

But the W3C recommendation "Digital Publishing WAI-ARIA Module 1.0" includes a "doc-abstract" ARIA role that represents abstracts like the one in your example. There is also a proposal for using this and other standards in scholarly publications. Starting with conventional HTML as proposed by Ilan Edri and adding such specialized markup can improve discovery and interpretation of your content by users of current and future technologies.

CodePudding user response：

You can use <h> tag for the "Abstract" word, and <p> tag for the text.

CodePudding user response：

Based on Jonathan’s interesting answer and some research, I’d would recommend <aside> and <meta name="description"> in the head.

<aside aria-labelledby="h-abstract">
  <h2 id="h-abstract">Abstract</h2>

<aside> has the complementary ARIA role. Its definition says

[…] The contents of a complementary landmark would be expected to remain meaningful if it were to be separated from the main content it is relevant to.

That compares very well to what Abstract on Wikipedia, states:

An abstract may act as a stand-alone entity instead of a full paper.

And finally, <meta name="description"> will be used instead of the full paper on search engines or when sharing the page.

ARIA Digital Publishing’s doc-abstract role naturally has the most appropriate definition.

A short summary of the principle ideas, concepts and conclusions of the work, or of a section or excerpt within it.

In the publishing standard, it’s a subclass of section, just as complementary is.