Importance of Semantic HTML

I spent enough time on the Responsive Web Design certification at freeCodeCamp yesterday to complete the Basic HTML section. This meant reviewing everything I had learnt so far before taking a quiz. I really appreciated the review stage and will be taking notes from it in the future. I also passed the quiz first time, requiring 18 out of 20 answers to be correct - I was extremely happy about that!

The next section on Semantic HTML started with a series of theory lessons. The first set being on the Importance of Semantic HTML.

Beginning with Why Should You Care About Semantic HTML, the example below demonstrates that the semantic purpose of a p element is to represent a paragraph of text. Semantics refers to the meaning of words or phrases within a language:

<p>
  Let me tell you about my fantastic holiday in Paris.
  I saw the impressive Eiffel Tower up close!
</p>

Using proper semantic HTML improves accessibility for assistive technologies like screen readers and also boosts search engine optimization (SEO).

The next lesson, Why is it Important to Have Good Structural Hierarchy, explained the importance of using headings in the correct order. Headings range from h1 to h6, with h1 serving as the top-level heading and h2 used for subheadings.

In the final lesson, the difference between presentational and semantic HTML was addressed, helping learners understand when to use HTML for structure versus purely for visual presentation.

Presentational HTML focuses on the appearance and style of content, used in the early days of web development. Many of these elements, such as the font element, have now been deprecated. An example of this element is below:

<font size="5" color="blue">This text is blue and large.</font>

Remember that font size should always be set with CSS, so you should not use this element in modern HTML.

Semantic HTML is now recommended best practice, due to the fact that it describes the contents of the elements, so is easier to understand and maintain.

That wraps up the first set of theory lessons. Next, we will dive into the second set under Understanding Nuanced Semantic Elements, where we'll explore the subtler distinctions between HTML elements and learn how to use them effectively. Thanks so much for reading, and do keep coding!