What is the difference between <li> class="selected"</li> and <li class="selected"></li>?

LaQuin,

You would actually never want to use the first method that you put above, as it is not a viable means of adding an attribute to an element.

Any and all attributes that you want to add to an element, whether it be class, id, style, data, etc (depending on the element, of course) always need to be INSIDE the opening tag. Anything you put in between the opening and closing tags is registered as that element's content.

Below are two lists of shapes. I'll show you the HTML structure of each and describe what would be visible on the front-end of your site:

<!-- the proper way to declare a class (or any other attribute on an element) -->
<ul>
<li>Square</li>
<li class="selected">Circle</li>
<li>Triangle</li>
</ul>

The above list would output an unordered list to the front-end of your website, which would say "Square", "Circle", and then finally "Triangle". Now, let's see what would happen if we instead wrote the structure with the class declaration in between the opening and closing brackets of our "Circle" li:

<ul>
<li>Square</li>
<li>class="selected"Circle</li>
<li>Triangle</li>
</ul>

This would display an unordered list to the front-end of your website, same as before, with the following two exceptions: 1) the li with the class of "selected" would not have any of the appropriate "selected" styles applied to it, because the element does not properly have that class associated with it, and 2) your list would now read "Square", "class="selected"Circle", and then finally "Triangle."

This is just the law of the land. All attributes go within the opening tag. Anything in between the opening and closing tags is content that will be rendered to the front-end of your website.

Erik

There are rules how to structure you HTML, which are set by the W3C. These standards and important so that browsers can know what to expect from a website and render it correctly, so that devs could work on multiple projects and know what to expect for code, and so on.

Your first example, should just make a stock list item that had the content class="selected" as if it was just text. The second way, follows the W3C's guidelines, and creates a class attribute on that list item, and the value of that attribute is the class of selected. Whenever you want to give an element an attribute, that attribute will be inside of the <> brackets. That's just the way you have to do it.

Thanks!