gistfile1.txt

<nav>Nav goes here</nav>

<div class="hero>
  <img src="images/hero-10x10.jpg" class="hero__img" alt="" data-src="original-hero.jpg" data-webp="original-hero.webp">
  <section class="hero__section">
    <div class="hero__content">
      <h1>Title goes here</h1>
      <p>Description goes here</p>
      <a href="#">CTA button</a>
    </div>
  </section>
</div>

<div>Main container starts here</div>

@brucel

Thanks a lot for taking a look at this.

First of all, the hero design may look something like:
https://dribbble.com/shots/1284318-Focus-3-0

My questions are:

1. should <div class="hero"> be more like <section>?
2. if so, should <section class="hero__section"> be more like <div> as having a <section> right underneath <section> doesn't look correct?
3. in <section>, there should be heading in the child element. Should it be a direct child or can it be like above (<h1> is a grandchild of <section>).
4. can styles be added to <section> element? Like adding display: flexbox to <section>? Or should it be <div>?
5. do you have any other suggestions to improve the markup above?

If this is for a hero header, I would do

[header]
nav] (nav can be before the header rather than inside it, if that makes it easier to style) [/nav]
[img]
[h1]Title[/h1]
[p]Description[/p]
[button]
[/header]

[main]Main container starts here[/main]

This way, you don't need classes to target your CSS at; just use the elements. The semantics of header and main also have "built-in" landmark roles for assistive tech users; you don't need to add aria-* attributes with these (you would with divs). Of course, you can have [div]s etc inside the [header] if you need extra hooks for styling.

I chose [button] because you wrote [a href="#"]CTA button[/a] and if it's going to be styled and scripted to act like a button, you might as well use the [button] markup - thus it's keyboard accessible and announces to screenreaders etc correctly. But, of course, I don't know your intentions.

I'm curious about [img src="images/hero-10x10.jpg" class="hero__img" alt="" data-src="original-hero.jpg" data-webp="original-hero.webp"] - are you doing some sort of JavaScript to swap different source images in or out depending on browser support for webP, screensize etc? If so, be aware that the [picture] element is in all modern browsers (including mobile Safari: see https://mikebabb.com/responsive-images-smaller-page-sizes-with-the-picture-element-and-webp/)

Hope this helps.