3
\$\begingroup\$

I'm not really sure if I'm using id's and classes correctly. I'm unaware as well if I'm doing bad practices and I would like some help with that. I'm pretty sure my id's and classes names are terrible but I kinda don't know what to use.

I've been doing some research on the web and downloaded some HTML5 templates so I could see their code. So I'm kinda trying to copy their indentation structure, id's and classes names and things like that. It seems to me that people are using id's for the main containers (like sections, headers) and using classes on smaller ones and on main containers if necessary. Is that correct?

    <!DOCTYPE html>
<!--
 By Luciano Infanti.
 For study purposes only.
-->
<html lang="en">
     <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="stylesheet.css" />
    </head>
<body>
    <!-- Header -->
      <header id="header">
        <span class="logo"><img src="#" alt="" /></span>

    <!-- Nav -->
        <nav id="nav">
             <ul>
                  <li><a href="#" class="active">Home</a></li>
                  <li><a href="#">About us</a></li>
                  <li><a href="#">Products</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#"><span class="button donate">Donate</span></a></li>
            </ul>
        </nav>

    <!-- Banner -->
        <h1>Lorem ipsum dolor?</h1>
        <p class="bold">Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl.</p>
        <ul class="button special">
            <li><a href="#">Register now</a></li>
        </ul>
        <span class="banner-image"><img src="#" alt=""></span>
      </header>

    <!-- Main -->
      <main id="main">
        <!-- Small Banner Section -->
            <section id="spotlight">
                <header class="header"> <!-- I don't know a good name for this class -->
                    <h2>Lorem ipsum dolor.</h2>
                    <p class="text bold">Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl. </p>
                </header>
                <footer>
                    <ul class="button">
                        <li><a href="#">Learn more</a></li>
                    </ul>
                </footer>
            </section>

        <!-- Fatured -->
            <section id="first" class="content">
                <header class="major">
                    <h2>Featured Content</h2>
                </header>
                    <article class="title featured">
                        <header class="header">
                            <h3>Quisque consequat tellus enim.</h3>
                            <p class="text">Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus.</p>
                        </header>
                        <span class="featured-img"><img src="#" alt=""></span>
                        <footer>
                            <a href="#" class="button">Read more</a>
                        </footer>
                    </article>

                    <article class="title regular">
                        <header class="header">
                            <h3>Quisque consequat tellus enim.</h3>
                            <p class="text">Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus.</p>
                        </header>
                        <span class="regular-img"><img src="#" alt=""></span>
                        <footer>
                            <a href="#" class="button">Read more</a>
                        </footer>
                    </article>

                    <article class="title regular">
                        <header class="header">
                            <h3>Quisque consequat tellus enim.</h3>
                            <p class="text">Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus.</p>
                        </header>
                        <span class="regular-img"><img src="#" alt=""></span>
                        <footer>
                            <a href="#" class="button">Read more</a>
                        </footer>
                    </article>
            </section>

        <!-- Second section -->
            <section id="second" class="content">
                <header class="major">
                    <h2>Sed lorem ipsum dolor sit amet</h2>
                </header>
                <article class="regular">
                    <header>
                        <h3>Tempus nisl et nullam</h3>
                        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus, tincidunt turpis.</p>
                    </header>
                    <span class="regular-img"><img src="#" alt=""></span>
                    <footer>
                        <a href="#" class="button">Learn more</a>
                    </footer>
                </article>

                <article class="regular">
                    <header>
                        <h3>Tempus nisl et nullam</h3>
                        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus, tincidunt turpis.</p>
                    </header>
                    <span class="regular-img"><img src="#" alt=""></span>
                    <footer>
                        <a href="#" class="button">Learn more legal</a>
                    </footer>
                </article>
            </section>

        <!-- Third Section -->
            <section id="third" class="content">
                <header class="major">
                    <h2>Lorem ipsum dolor sit amet</h2>
                </header>
                <p class="text">Consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus <a href="#" class="link">Click here</a>. consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus. </p>
            </section>

        <!-- Fourth Section -->
            <section id="fourth" class="content">
                <header class="major">
                    <h2>Consectetur adipiscing elit.</h2>
                </header>
                <p class="text">Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Find more using the <a href="#" class="mini-cta">Learn more link</a>.</p>
            </section>

      </main>

    <!-- Footer -->
         <footer id="footer" class="content">

        </footer>
     </body>
</html>
|improve this question
\$\endgroup\$
6
\$\begingroup\$

This is my personal advice.

  • When it comes do ID's and Classes, ID's should only be used on things that will ever be used once, this can be hard to know if something only will be used once since alot might happen during future development. So to make it simple - when working with html and css only use classes. And leave the ID's to be used when you/someone else writes the JavaScript for the website and needs to target specific elements.

  • You are indenting your code alot. Remember that not all of the code needs to be intented, but it is concidered good practice to indent nested elements. For example, you could skip indent most of the things within the head-tag but it is good to indent things like nested divs or list-items.

  • I would say you overuse comments to some degree. Comments are good, but no need to comment obvious things, in your case the navigation for example.

  • If you want to better understand CSS and how to use classes, then take a look at Sass and OOCSS, if you master these then they will help you write DRY CSS; when you understand how to write DRY css you will also know how classes should be used. OOCSS will also help you get a good idea about naming. OOCSS is a so called naming conveting and you can search SO or Google to find more information about naming conventing, BEM for example is example of another. But might be good to start with OOCSS since this one will help you to learn the structure of classes.

Edit: Here you can read about some more examples about whats considered beautiful HTML. https://css-tricks.com/what-beautiful-html-code-looks-like/ - Remember that all of this is opinon based and there it really no standard. It mostly about what you and the general developer thinks looks good. For example you can read here about what WordPress.org concider as good HTML: https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/

|improve this answer
\$\endgroup\$
1
\$\begingroup\$

Beside what Johan Gudmundsson has explained, I would add:

  • Spaces before DOCTYPE are strange, I hadn't seen it before. DOCTYPE is not usually indented. Official W3's specification says nothing about that (https://www.w3.org/TR/2014/REC-html5-20141028/syntax.html#the-doctype).

  • Clossing 'self-closing' tags (like in <img ... />, <meta ... />, ...) is correct in HTML5, but it is not useful. It does not improve your code.

  • I think that your use of comments is partially OK. That is, it is OK to use them to structure your webpage in different sections (Header, Nav, Featured, ...), but commenting i-th sections (<!-- Second section -->) says nothing.

  • Note that there are redundant classes. If your code is

    <X class = "x">
    <Y> ... </Y>
    <Z> ... </Z>
</X>

    then you can style "all the Y tags inside X elements with class x" with the CSS selector X.x Y. In your code, #spoiglight header, .title.featured header, and so on. This is a possible solution for your class = "header" problem.

  • (Almost) every p tag of your webpage is class = "text". Remove that class and, instead, format those "important" paragraphs: i.e. <p class='featured-message'>, or, even better: ps without any class or id, <p>...</p>, but formated in CSS with .title.featured header p or some similar expression. Remove also .regular-images. Apply the same idea.

  • Include the HTML5Shiv. It allows old browsers to "understand" new HTML5 tags (IE7 understands div and span, but doesn't understand article or header).

|improve this answer
\$\endgroup\$
1
\$\begingroup\$

Most of the improvements have been suggested by the other reviewers. Just to lay emphasis on some elements:

Meta element : From the description of HTML Meta Tags, Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The author's name and description of the document in the first comment can be encapsulated in the meta element as

<meta name="author" content="By Luciano Infanti">
<meta name="description" content="For study purposes only">

The meta element doesn't have a '/' to indicate it's closing. This is consistent in HTML 4.01 and HTML5

<meta name="viewport" content="width=device-width, initial-scale=1" />

should be 

<meta name="viewport" content="width=device-width, initial-scale=1">

Img element : In HTML 5 the <img> are used without the '/' to indicate it's closing e.g

<img src="#" alt="" />

should be

<img src="#" alt="" >

For good practice, you want to include an alternative text if the image doesn't show. The guidelines for alt from HTML alt Attribute

  • The text should describe the image if the image contains information
  • The text should explain where the link goes if the image is inside an element Although, in your example, it's logical to use alt="" as the image is only for decoration.

Media Queries : since you added the meta element with attribute name be sure to include media queries for your main element and the navigation links to ensure it renders the elements properly on different view ports.

I hope this helps.

|improve this answer
\$\endgroup\$
  • \$\begingroup\$ I remember being surprised to find out that img tags, and some others, should not have a closing tag or self-closer. A good thing to know to explain it is that the HTML5 spec diverged from XML, so it is definitely possible to write valid HTML5 that is invalid XML, and vice versa. \$\endgroup\$ – Katana314 Jul 27 '16 at 15:43
  • \$\begingroup\$ @Katana314 I know right. Most people find it difficult to comprehend that those tags don't need closing tags. \$\endgroup\$ – Siobhan Jul 27 '16 at 16:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.