When to use a semicolon in HTML

Web Development Front-End
1

Hello!
I have noticed in progressing through my HTML course that sometimes you need to use a semicolon in the element (i.e. <style =“color: #fff; text-transform: uppercase;”>) but other times you don’t. I have struggling to figure out when a semicolon is needed and when it is not. Is this only needed when there are multiple properties within the same attribute? Pls help haha.

2

The style attribute is HTML, but the rules in the value are not; they are CSS and it is those syntax rules that apply.

The above is not a valid HTML element, so would never be written with left and right carats (< & >). We would use them to denote an embedded style sheet in the HEAD.

<style>
  h2 {
    color: #fff;
    text-transform: uppercase;
  }
</style>

As for semi-colons, they are required in CSS syntax, and are nowhere required in HTML.

Let’s review one last example of inline style sheet:

<h2 style="color: #fff; text-transform: uppercase;">

Notice that the carats belong to the HTML element, not the style attribute.

Aside

There is one small exception that permits omission of the semi-colon: If the property is last in the ruleset and is followed immediately by a closing brace we may omit it.

  h2 {
    color: #fff;
    font-family: "Palatino Linotype", serif;
    text-transform: uppercase
  }

We can also relax the syntax rule on inline styles

<h2 style="color: #fff; font-family: 'Palatino Linotype', serif; text-transform: uppercase">

Notice how that last property looks incomplete? Bottom line, set this exception to the side and forget we even mentioned it. Always use the semi-colon at the end of every property declaration.

3 Likes
4

Thank you! In my job, we use inline CSS and a lot and I guess I was confusing the two. This is very clear and helpful.

1 Like