Article preview component using Vue and Headless UI

Community feedback

• 

  P

  MAGENE Sem Joel•320

  @JomagenePosted 3 months ago

  Hey @MichaHuhn!

  Great job on the pixel-perfect implementation! The precision in your layout is truly impressive, and it's inspiring to see such attention to detail.

  One area for further improvement is the use of semantic HTML tags. Semantic elements not only improve accessibility but also enhance the readability and maintainability of your code. Here are a few specific suggestions to make your HTML more semantically meaningful:

  1. Use <figure> and <figcaption> for images with captions:

     • Instead of using a <div> for the profile picture and its description, wrap them in a <figure> tag and use <figcaption> for the text. This approach better associates the image with its caption.
     • For example:

       <figure class="profile-picture-wrapper">
         <img src="@/assets/images/avatar-michelle.jpg" alt="Profile picture of Michelle Appleton" class="profile-picture">
         <figcaption>
           <p class="name">Michelle Appleton</p>
           <p class="date">28 Jun 2020</p>
         </figcaption>
       </figure>
       

  2. Replace the <div> wrapping the top image with a <figure> tag:

     • This change adds semantic meaning to the image, especially when paired with a descriptive alt text.
     • For example:

       <figure class="top-image-wrapper">
         <img src="@/assets/images/drawers.jpg" alt="Furniture drawers">
       </figure>
       

  3. Consider using <hgroup> to group related headings and subheadings:

     • If your <h1> and the introductory paragraph are conceptually connected, wrapping them in an <hgroup> can clarify their relationship.
     • For example:

       <hgroup class="text-content">
         <h1>Shift the overall look and feel by adding these wonderful touches to furniture in your home</h1>
         <p>Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.</p>
       </hgroup>
       

  These adjustments will improve the semantic structure of the HTML, making it more accessible and easier to maintain. For more insights on semantic HTML, you might find this guide helpful.

  Additionally, I want to commend you on your well-organized folder structure and meticulous attention to detail. Keep up the great work—your approach is sure to lead to even better projects in the future.

  Marked as helpful

  1

  ---

  

  P

  Micha Huhn•200

  @MichaHuhnPosted 3 months ago

  @Jomagene Thank you very much for your detailed feedback, appreciate it!

  Ah right, I always forget to use <figure>. Will implemented it. Should <figure> be used for every image or is it not needed for certain images like decorative images for example?

  I didn't know <hgroup> exists. Thanks for sharing it.

  0

  

  P

  MAGENE Sem Joel•320

  @JomagenePosted 3 months ago

  Hey @MichaHuhn,

  I'm glad the feedback was helpful! 😊

  To be back to your question, the <figure> element is great for images that need captions or add context to your content. If an image is purely decorative, just use an <img> tag with an empty alt attribute (alt="").

  In other words, a tip for recognizing when to use <figure>: consider whether the image needs a description or adds context to the surrounding content. If it does, wrap it in <figure>; if not, a simple <img> will do the job.

  Regarding <hgroup>, it’s a handy tag when you have a main heading and a subheading(which can be a paragraph) that are closely related. It keeps your content structured and clear. Did you ake a look at this guide?

  Thanks again!

  1