Start with Semantic HTML

Each of the 4 job listings mentions this – even the Senior role:

  1. SASS / CSS, HTML5 and CSS3
  2. Experience hand-coding standards-compliant, accessible, and semantically correct HTML
  3. Professional non-internship experience with front end, web or mobile software development using JavaScript, HTML and CSS
  4. Expert understanding of web markup, including HTML5 and CSS3

From my heuristic reviews, I know that the majority of sites are still very much ‘div soup’ – with the faithful <div> continuing to be used as the basic container tag for most elements.

Learning Semantic HTML

Thinking back on my own existing experience with HTML, semantics never really came into it.

I don’t remember learning about it at university.

There wasn’t much semantic markup in use in previous codebases that I’ve worked on.

I can’t recall it being a requirement when creating interfaces since then.

I guess I need to do some reading on what semantic HTML actually is, why it’s important and how to do it!

Practice Plan – Semantic HTML

For this first step in the FrontendFolio process, my plan is to use a couple of different resources in the form of online courses and books.

After completing some theory and practical tasks from the course material/s the aim is to then find some content of my own to practice the same approach on some fresh content. No guidance from the course/book, it’s all down to me.

By taking this approach, I can start to build the body of work that should come from learning in public like this.

Resources

I’ve fortunately got access to a number of paid resources and books that I’ve bought online over the last few months.

Whilst there are a number of free resources available, I’ve often been dissatisfied with the depth that they go into or I’ve just had to work too hard to find the information I wanted.

To start with Semantic HTML I will be using the following resources:

  1. Crafting Meaningful HTML – Jen Kramer, LinkedIn Learning [course]
  2. Responsive Web Design with HTML5 and CSS – Ben Frain [book]
  3. Semantic Structure and Navigation – Deque University [course]
Tags: