HTML Review Workshop - Structure, Semantics
Learning Goals
- How to plan your HTML structure
- How to incorporate semantic HTML elements
Overview
Writing HTML can seem extremely simple (maybe even boring), but how you structure your HTML impacts how you’ll have to write your CSS and even how you use Javascript. It is also the first line of defense when building accessible digital products – writing semantic HTML is the foundation for all other accessibility best practices. Being thoughtful about how you approach writing HTML can set you on a much smoother path as you build out the rest of your product.
Practice: Layout Structure and Semantic Elements
HTML5 has a variety of semantic tags, or HTML tags that provide additional meaning through descriptive naming, available for us to use. These tags are an easy way to not only make our code more understandable and clear to other developers (and our future selves), but they are also a great way to incorporate basic accessibility into your HTML for users who may need to access your website in non-traditional ways.
Challenge 1
In groups, use the following semantic HTML tags to create the basic structure of this newspaper on your chart paper. Click the links below to read the docs for each HTML element (notice they all send you to the MDN docs).
We saw this layout in week 1: Now that you’ve built a few more things, how has your approach to HTML changed? Think about which elements are most fitting and how it could be used to create the basic structure of the page.
Challenge 2
This time, take a look at the semantic HTML tags you have access to and see if there are others you might use. Again, sketch out the boxes you’ll need (aka draw a quick wireframe) and then write out your HTML on your chart paper.
Challenge 3
Let’s try this with a layout that has a little bit more going on. As you tackle this one, think about how you can use elements as containers for groups of elements – what are the “biggest boxes” on the page? Once you figure that out you can work your way in to the “smaller boxes”. Remember, sketching a quick wireframe of the boxes will help you think through your plan for the HTML.
