Kevin Powell - Community•15mo ago

hgroup tag & utility class use case

Hey, I have two questions. With the hgroup tag, am i able to group a header tag and a paragraph tag acting as a description together or would that be bad practice? Is it also recommended to use this tag? For example-

<hgroup>
  <h1>A website header</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa ducimus aliquid provident quo nam.</p>
</hgroup>

<hgroup>
  <h1>A website header</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa ducimus aliquid provident quo nam.</p>
</hgroup>

Moving on to utility class use cases, i've learnt that the direct styling of an element should be within it's styles and not a utility class. So for something like flex and grid, would it be appropriate to have a utility class for them? I've seen kevin do this so i just wanted to check. For example-

<div class="flex">
  <button>Flex item 1</button>
  <button>Flex item 2</button>
</div>

<div class="flex">
  <button>Flex item 1</button>
  <button>Flex item 2</button>
</div>

.flex {
  display: flex;
  gap: var(--flex-gap, 1em);
}

.flex {
  display: flex;
  gap: var(--flex-gap, 1em);
}

I'd appreciate any insight, many thanks!

6 Replies

b1mind•15mo ago

just use <header> <hgroup> is older and not really needed with <header> I've even made a PR for someone cause <hgroup> was preventing from the <article> being seen for Reader Mode. So I'm assuming other tech maybe assistive tech will not anymore either.

<article>
  <header>
    <h1>
    <p>

<article>
  <header>
    <h1>
    <p>

snxxwyyOP•15mo ago

Ah gotcha, so I’m able to use header for those things and it’s semantic? And I can have more than one header on the site without it affecting things the same way a double h1 does?

b1mind•15mo ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

- HTML: HyperText Markup Language | MDN

The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

snxxwyyOP•15mo ago

thank you 👍🏻 Do you have any insight about the other question?

b1mind•15mo ago

that is a you do you question I don't tend to make util classes with just one declaration though. so if I were to have a "grid" util class it would be for like auto-fit or something It also depends how often you use it ig too Util classes just like utilities for code in general are a nice abstraction to repeat yourself.

snxxwyyOP•15mo ago

Ah I see, I saw Andy bell’s auto grid class with the auto fit so that makes a ton of sense now you say that, I also remember Kevin saying he makes the classes only when they’re used a significant amount throughout the css. Thank you, I get that now

Gaming

Programming

hgroup tag & utility class use case