- How to plan your HTML structure
- How to incorporate semantic HTML elements
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.
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.
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.
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.