Testimonial grid section

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  Hello, I'm going to list out html problems in this for you in the hope that it helps you understand how to better translate a designs content into appropriate meaningful elements.

  • you mustn't ever have repeating alt text on images. Alt descriptions are important content when used on images that communicate meaning/value on a page. In this case I would consider these images as decorative because they bring no extra value to the page. It would be the same content without them. That means the alt should be left empty on purpose.
  • there is no point using header elements inside these cards. They are acting just like divs so theres no value in using headers there.
  • what you have as h2s is not appropriate heading content. Those are just part of the testimonials. They're paragraphs. The two paragraphs for each testimonial should be placed inside a blockquote element.
  • what does make sense as headings is the people's names. Make those into h2s instead. They act as headings for each testimonial.
  • if you wanted to add in some extra meaningful structure to each card it's really not necessary beyond what I've outlined here. But it would make sense to use figure elements for each card, and wrap the img, heading (person's name) and verified paragraph all inside a figcaption as the first element in each figure. Like I said, that's optional though, not essential.
  • last thing, and this IS important: link the stylesheet in the html head, do not import it with javascript!

  0

  ---

  

  Luka•180

  @zmora2622Posted about 2 months ago

  • you mustn't ever have repeating alt text on images. Alt descriptions are important content when used on images that communicate meaning/value on a page. In this case I would consider these images as decorative because they bring no extra value to the page. It would be the same content without them. That means the alt should be left empty on purpose.

  That's right. I wrote this 2 weeks ago and yesterday I just had a quick look before posting 😉.

  • there is no point using header elements inside these cards. They are acting just like divs so theres no value in using headers there. what you have as h2s is not appropriate heading content. Those are just part of the testimonials. They're paragraphs. The two paragraphs for each testimonial should be placed inside a blockquote element.
  • what you have as h2s is not appropriate heading content. Those are just part of the testimonials. They're paragraphs. The two paragraphs for each testimonial should be placed inside a blockquote element.
  • what does make sense as headings is the people's names. Make those into h2s instead. They act as headings for each testimonial.

  I don't quite agree with that. When you buy a book, you read the title, and if you like the book, you remember the author. In the same way, you have to look at the page - like a book. In these cards, the author as h2 doesn't make sense, while the title does. Alternatively, one thing I would change is to put everything img, name and title in <header>, and the content in <blackquote> as you suggest. Then it would make more sense. It seems to me that the code is more readable if you use <header> tags, etc. We shouldn't just look at the fact that it works as a div or should only be used in the body (I've heard such statements too).

  • last thing, and this IS important: link the stylesheet in the html head, do not import it with javascript!

  There you have me😜 . I was playing with vite before I started doing anything and it was my oversight in reviewing before posting 😆.

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @zmora2622 I'm afraid disagree still with your conclusion about the headings And use of the header.

  Header tags arent interpreted as headers when used inside the main like this.

  And Headings make no sense as sentences. Headings on a page need to read like a table of contents in a document. They are relied on heavily by assistive tech users to navigate around a Web page and used in SEO for summarising page content, so it's important they are only used in places where they are acting as genuine headings (like topics) for the content below them. For example "Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy." — That is two whole sentences. It's a paragraph, it doesn't work as a heading. Take your example of a book too — that wouldn't have chapters titled by sentences, the chapter titles would only be a few words, or even character names as is the case with this content.

  0