Do not select an element because its default browser style looks attractive. Choose the element based on meaning, then use CSS to control its appearance.
Mistake 9: Incorrect Heading Hierarchy
Do not choose a heading level simply because it produces the desired font size. Use heading levels that reflect the structure, then style them with CSS.
19. Practical Exercises
Exercise 1: Convert a Generic Layout
Convert a webpage built entirely with div elements into a semantic layout using header, nav, main and footer.
Exercise 2: Build a Blog Page
Create a blog page containing two independent articles. Each article should have a heading and introductory content. Include publication dates using time elements.
Exercise 3: Organize a Course Page
Create an HTML course page with sections for course overview, learning objectives and curriculum. Use appropriate heading levels and thematic sections.
Exercise 4: Create a Related Content Sidebar
Build a page with an article and an aside containing related tutorials. Give the aside an accessible name through a visible heading.
Exercise 5: Add Search
Create a course search region using search, form, label, input and button. Ensure that the label is correctly associated with the input.
Exercise 6: Add Contact Information
Create a page footer containing relevant contact information in an address element and links to the site's privacy and terms pages.
Exercise 7: Review a Semantic Structure
Inspect a website you have built or visited. Identify the page header, navigation, main content, independent articles, complementary information and footer. Decide whether each element communicates the intended meaning.
20. Section 11 Quiz: Test Your Understanding
Answer the following 10 questions before checking the answer key. Each question tests a different aspect of semantic HTML5.
Question 1: Meaning of Semantic HTML
What is the main purpose of semantic HTML?
- To make every element display with a different color
- To communicate the meaning and structure of content
- To replace CSS completely
- To make JavaScript unnecessary