Help with my html code!

HTML & CSS
1

Hello, i am still newbie on html and css, so maybe this is an stupid question, but i will try anyway :slight_smile:

My big probleem is understanding the difference between ‘class’ and ‘id’ and when to use it? I’ve read a lot of tutorials about it, but i still can’t understand! i notice that you only can use the same ‘ID’ one time and ‘class’ more times, but my question is can i only use one time my ‘ID’ at the same element or the for whole document?

I made one website with only “classes”, is this bad?

For example, I have divided my website into different sections:
this is my exemple for services!



<section class="green">
   <div class="grid960">
      <div class="services">    <!--I think this needs to be "ID" or not!-->
         <div class="col White">
            <a href="/services.html"><img alt="service 1" height="110" src=
            "../images/ico.png" width="110"></a>

            <h3 class="red">Service 1</h3>

            <p class="lightgray"> <p class="lightgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in quam urna. Duis malesuada malesuada ultricies.
            Praesent sollicitudin purus sed mi pellentesque vehicula.
                       </p><a class="btn btn-rounded Red" href="#">read more</a></p><a class="btn btn-rounded Red" href=
            "#">read more</a>
         </div>

         <div class="col item2 White">
            <a href="/services.html"><img alt="service 1" height="110" src=
            "../images/ico2.png" width="110"></a>

            <h3 class="red">service 2</h3>

            <p class="lightgray"> <p class="lightgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in quam urna. Duis malesuada malesuada ultricies.
            Praesent sollicitudin purus sed mi pellentesque vehicula.
                       </p><a class="btn btn-rounded Red" href="#">read more</a></p><a class="btn btn-rounded Red" href=
            "#">read more</a>
         </div>

         <div class="col item2 White">
            <a href="/services.html"><img alt="service 1" height="110" src=
            "../images/ico3.png" width="110"></a>

            <h3 class="red">service 3</h3>

            <p class="lightgray"> <p class="lightgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in quam urna. Duis malesuada malesuada ultricies.
            Praesent sollicitudin purus sed mi pellentesque vehicula.
                       </p><a class="btn btn-rounded Red" href="#">read more</a></p><a class="btn btn-rounded Red" href=
            "#">read more</a>
         </div>
      </div>
   </div>
</section>

<section class="blue">
   <div class="grid960">
             <!--This is an new section-->
    </div>
</section>

Where should i put my ID’s ?

Thanks in advance :slight_smile:

2

Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page. i think you just using classes as ids. using only class over id is not not bad but it will depends on how useful class are there.

<snip>

3

Crash course in class vs ID.

  • IDs can only be used ONCE. Classes may be used once or more.

  • an element can only have ONE ID, but it may have multiple classes. an element can have BOTH an ID and classes.

<div id=“OnlyMe” class=“class1 class2 class=3”>stuf…</div>

  • IDs hold more specificity.
    Example.

<ul id=“test”>
<li class=“targ”>test targ</li>
</ul>

#test li{ color:green;}
.targ{ color: red; }

tho BOTH rules target the SAME element , the one with the ID hold more specificity and thus will be followed other the one with the class.

  • IDs can serve as hooks for javascript

  • IDs can be used as target for anchor tags <a href=“#test”>I go directly to the UL in the above example </a>

  • there is NOTHING wrong, functionally or programatically, with not using any IDs in your code.

Hope that clear things up for you.

BTW
i would validate your HTML, as you have several errors…even on quick inspection.

P tags cannot contain anything other than inline elements ( so you cant put a P inside a P)
tho it’s not necessary to close P tags, it makes code easier to read for debugging.

4

“per document”. I think this is important for someone very new. You may have the same ID for different elements on two different pages if you want to, however this would make CSS usually difficult. But I have done this sometimes when, with Javascript, I want to give the same event to two different things using the same ID: On the home page it might be a <button>, on the contact page it might be an anchor <a>.

Also, while you can’t list multiple IDs on an element, you certainly can with classes. It looks like most of your classes are meant to make a box look a certain way. You can add these all together if you want.


<section class="green">
   <div class="grid960">
      <div class="services">    <!--I think this needs to be "ID" or not!-->
         <div class="col White">

I wouldn’t know for certain without looking at all the stuff your pages do, but you can possibly just have


<section class="green grid960 services">
  <div class="col White">...</div>
  <div class="col White">...</div>
</section>

It depends on your CSS of course. You could also move col to the section and say in CSS something like, “divs inside .col get col styles” or similar.
<section class=“col”>
<div>…</div>
</section>
.col>div {col styles here;}

Hard to tell, you might be making something someone will be changing themselves, so then it does make total sense to keep stuff separate and very modular like you have now.

Even if “services” is unique, it doesn’t have to be an ID, adding to Dresden’s note that it’s totally okay to not have any IDs on a page if you don’t want.

It looks like your doubling of the p’s and read more anchors is an accidental/typo.
Your class names are very presentational, mostly referencing colours. This isn’t illegal but it’s not considered good practice since it means if you ever want to change colours, you now also have to dive into your HTML to change your class names too, lest you end up with something like class=“red” making something green. Makes a maintenence nightmare. :stuck_out_tongue:

I know your content is kind of just placeholder for now, but I do hope you get rid of the “read more” text and try something more useful. If you can’t because this is someone else’s design, then you can try putting an anchor in the <h3> going to the same place, so that users who call up all the links on the page get a link with some useful information on where the link will take them. A list of links saying just “read more” don’t mean anything without the surrounding text as context. Just be aware not all users will have that context all the time.