Semantic DOM Feedback! - Githubissues

rijkvanzanten commented 3 weeks ago

[ ] I believe you're using the <hr> elements for exclusively stylistic purposes. From MDN: The <hr> element represents a thematic break between paragraph-level elements. I don't think that's at play in your html
[x] #2
[x] Great use of the inline quote element 👏🏻
[x] Although I'm wondering if this one should just an emphasized word instead
[x] You can only have 1 <body> in your HTML. I'd probably structure this as:


...
<body>
    <article>
        <header>...</header>
        ...
    </article>
    <article>
        <header>...</header>
        ...
    </article>
</body>
...

hyelynnsuh commented 3 weeks ago

For the authors/small print, is there a different way I should structure them? Or should I have them as regular print, but have different semantic meaning?

hyelynnsuh commented 3 weeks ago

Same question for the

element ^; should I then use a
as a break instead? Would that show better hierarchy?

rijkvanzanten commented 3 weeks ago

For the authors/small print, is there a different way I should structure them? Or should I have them as regular print, but have different semantic meaning?

It's a question of semantics vs style. You can have different semantic meaning for text without having it visually presented differently, and vice versa.

From MDN:

The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

And:

The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Neither of those descriptions to me feel like they fit an articles author.

Looking at the description for <address> though:

The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization. [...] or indicating the author of an article by including an <address> element within the <article>.

So in this case, to me it feels like a <address> is the right tool for the job to convey the semantic meaning of the article of an author, even though visually it's identical to plain text. You can then make it bold or italic or style it however you want it to look in your design in CSS.

rijkvanzanten commented 3 weeks ago

Similarly, an hr in markup conveys a semantic break in the content itself. I believe what you're looking for is a CSS border, which doesn't have any semantic meaning of its own

hyelynnsuh / manuscript

Semantic DOM Feedback! #1