blog preview card

Community feedback

• 

  Yefree Valdez•840

  @yefreescodingPosted 5 months ago

  I believe that you did a really good job, everything is pixel perfect and identical to the original design.

  Maybe the only thing I can say to you is to try to learn about semantic html. Writing semantic HTML is essential for several reasons, each contributing to the overall effectiveness, accessibility, and maintainability of a website.

  Improved Accessibility

  • Screen Readers: Semantic elements (like <header>, <nav>, <article>, <section>, etc.) provide meaningful context to screen readers, helping visually impaired users navigate the content more effectively.

  Better SEO

  • Search Engine Crawlers: Search engines use semantic HTML to understand the structure and content of a webpage better. Properly used elements can enhance how search engines index and rank your site.
  • Rich Snippets: Elements like <article>, <time>, <address>, and others can contribute to rich snippets in search results, improving click-through rates.

  Enhanced Readability and Maintainability

  • Human Readability: Semantic tags clearly describe their purpose, making the HTML code easier to read and understand for developers.
  • Maintaining Code: With a clear structure provided by semantic tags, it’s easier to maintain and update code. This reduces the risk of introducing errors when making changes.

  Consistent Styling

  • CSS Targeting: Semantic elements can be targeted directly in CSS, leading to more organized and maintainable stylesheets. This helps in creating a consistent style across similar types of content.

  Enhanced User Experience

  • Navigability: Semantic elements can improve keyboard navigation, allowing users to tab through sections more logically.
  • Responsive Design: Clear structure aids in the implementation of responsive design techniques, making it easier to manage layouts for different screen sizes.

  Standards Compliance

  • Web Standards: Writing semantic HTML aligns with web standards and best practices recommended by the World Wide Web Consortium (W3C), ensuring that your site is future-proof and compatible with a wide range of devices and browsers.

  Example of Semantic HTML vs. Non-Semantic HTML

  • Non-Semantic HTML:

  <div id="header">
    <div class="nav">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </div>
  <div id="main-content">
    <div class="post">
      <div class="post-title">My First Post</div>
      <div class="post-body">This is the content of my first post.</div>
    </div>
  </div>
  

  • Semantic HTML:

  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1>My First Post</h1>
      <p>This is the content of my first post.</p>
    </article>
  </main>
  

  Marked as helpful

  1

  ---

  

  Abdelrhman Yasser Ali•60

  @Eng-Abdelrhman100Posted 5 months ago

  @yefreescoding

  Hi there!

  Thank you so much for your kind words and thoughtful feedback. I’m glad to hear that you found my work to be pixel perfect and identical to the original design.

  Your advice on learning semantic HTML is greatly appreciated. I understand the importance of semantic HTML for accessibility, SEO, readability, maintainability, and overall user experience. Your detailed explanation really highlights its benefits and has given me a clear understanding of why it’s crucial.

  I’ll definitely focus on improving this aspect of my coding. I appreciate you sharing your knowledge and taking the time to help me grow as a developer.

  Thanks again for your valuable input!

  1