Div, Span & Comments

Aside from semantic elements like article, nav, header, footer and such, we have two elements that have no semantics but are super important for creating your website: div and span.

Div

The element <div> can be used to create a section which can be further styled with CSS or manipulated with Javascript. Read more.

Example 1: Wrapping groceries section under a div

HTML

<div>
  <h3>Groceries</h3>
  <ul><li></li></ul>
</div>

Example 2: Alert box

HTML

<div style="background: #ffb100; color: white; width: 50%; padding: 10px 20px; border-radius: 4px;">
  <h3>Hey man!</h3>
  <p>Better look out for yourself.</p>
</div>

Example Output

Hey man!

Better look out for yourself.

Span

The element <span> can be used to wrap around text or part of a document that you want to further style with CSS or manipulate using JavaScript. Read more

Example:

HTML

<p>I think that <span>I</span> should be styled further!</p>

Introducing two new attributes: class and id

There are two attributes that are largely used when styling or manipulating your elements with JavaScript: class and id. Aside from using them for styling, they can also be used to improve the semantics of your website. The largest difference between these two attributes is that id is unique and the same value should only occur once in the document where as class can occur multiple times in the same page.

HTML element can have both id and class defined. Each class or id can have multiple of them set, separated by spaces.

Example:

HTML

<div id="groceries-list-container" class="list-container">
  <h3>Groceries <span class="text-gray">List</span></h3>
  <ul class="groceries-list list">
    <li></li>
  </ul>
</div>

! note We will cover more of the div and span element once we get to CSS section of our course. For now it is just important that you know that they exist.

HTML Comments

You can also add comments inside your HTML to for example describe some parts of your site, create todo items or disable some element(s) from your page. Comments are not displayed by the browser but are always visible in the code. Basic syntax of a HTML comment is this:

HTML

<!-- Your comment -->

Exercise 1

Add few comments into the semantic_exercise.html file that you formatted in previous chapter.

Exercise 2

Add few comments to your main project to describe some parts of your website.