John Prine Tribute Page - Feedback request

https://codepen.io/Dewie/pen/qBayWem

Hello all.
So I’ve just finished my tribute page and I would love some feedback.

One thing I’m specifically interested in is my use of sections within sections. I’ve seen this before in another class but I ran the project through the w3 HTML code validator and it gave me a warning about having a section without a header. Admittedly, unlike my page, the application of this I’ve seen had a header for the first section tag and then headers for each additional section.
Is there a better tag than section to use before all the sub sections? Or vise versa?

Of course any other thoughts are welcome as well. Thanks! Hope you like the page.
Stephen

Yes, I would use a <div> instead of a <section> to wrap all of the other <section>s. Or just get rid of it completely (you’re only setting three CSS properties on #tribute-info and those can easily be moved elsewhere or removed completely). Each of your subsections are perfectly fine to stand on their own. You don’t need a parent <section> to wrap them all.

As for other things:

  • You have a max-width of 1200px set on your content. I think you should use ems instead so that it scales with the font size. I think anywhere between 45-55em would be good.
  • There is a time element you can use to mark up the years in the timelines.
  • You might consider using a <blockquote> for the quote in the figure caption.
  • Move both the <header> and <footer> out of <main>.
  • The link text color at the bottom is too light to be accessible on that background. Use the WebAIM Contrast Checker to make sure your contrast levels are accessible.

Overall this is very nicely done. Very responsive, looks good, and good content.

The tribute page looks great to me.
@bbsmooth has given some great suggestions, so follow them.
Overall, I think you have done a great job with your project.
Happy Coding!

Thank you for the notes.

I’ve updated the site to reflect your suggestions. I did have some follow up questions and wondered about some of my original choice of HTML elements. My questions are mostly an effort to try and gain a better understanding of when to use which element.

  • Was it not semantically correct to have the title and link sentence as <header> and <footer> respectively? In the example page for the project they’re not labeled that way and since they’re both part of the subject content should they be something else entirely? I changed them to be a <div> and an <aside>. I looked at the source code of some news stories online and watched a few videos and it seemed like that might be right… Would love your thoughts on it.

  • I didn’t change this, but would it make sense to wrap the whole thing in an <article> tag instead of a <main> tag? Or in both?

  • Why is it that I should use <blockquote> over <q>? Is it because it’s a stand-alone quote? Even though it’s within a <figcaption> element? Just trying to understand. And should I use <cite> for the name of the person who said the quote?

Thanks again.

Thanks for taking a look at it!

I think maybe I wasn’t as clear as I could have been. There was nothing wrong with using <header> and <footer>, I just suggested you move them out of <main> (so they come before/after <main>). The <header> and <footer> aren’t usually considered part of the main content.

You should have a <main> tag wrapping the main content on the page, so you want to keep this.

Sometimes it’s a close call as to which one to use but in general <q> is used as an inline quote, such as if the quote occurs in a sentence with dialog. <blockquote> is generally used for quotes that stand on their own, especially if they have an author cited like you do.

Thanks, that all makes sense.

Sorry, no, you were totally clear about the <header> and <footer> being outside of <main>. The thing is when I moved them my project failed the test script, it requires you to have an element with id=“main” that “contains all other elements”. I wasn’t sure how to handle that and it seemed like it would be odd to have <body id="main">. That’s when I started looking into other elements as a solution. Maybe <body id="main"> is right though?

Ahh, my bad, I didn’t realize that everything needed to be inside of #main to pass the tests.

Ya, you could put the main id on the body (probably not what I would choose to do). Or you could wrap everything in a div and put the main id on that (maybe a little better solution). Or you could just leave the header/footer inside of main because that’s what you have to do to pass the tests (might be the best solution). I don’t think it’s too big of a deal at this point leaving them in there. You know you are doing that just to appease the tests. And I’ve learned to not make a big deal about this when I evaluate future projects!