Codelab: Converting to Semantic HTML
Replace generic divs with semantic landmarks and headings to create an accessible page structure in a real code editor.
Set up your project
In this codelab, you are going to take a page built entirely from divs — "div soup" — and convert it to semantic HTML. By the end, you will have a page that screen readers can navigate by landmarks and headings, while looking exactly the same visually. This is one of the most common real-world accessibility tasks: you inherit existing code and need to make it accessible without changing the design.
Open a terminal by pressing Ctrl + Alt + T on Linux, then type the following commands one at a time, pressing Enter after each:
- mkdir ~/semantic-lab — This creates a new folder called semantic-lab in your home directory. mkdir stands for "make directory." The ~ symbol is a shortcut that means "my home folder."
- cd ~/semantic-lab — This moves you into the folder you just created. cd stands for "change directory." Any files you create from now on will land in this folder.
- touch index.html style.css — This creates two empty files. touch creates a file if it does not already exist. We need index.html for our HTML structure and style.css for our CSS styles.
- code . — This opens VS Code with the current folder loaded. The . (dot) means "this folder." If you do not have VS Code, use any plain-text editor — gedit, nano, Kate, or Mousepad all work fine.
Your project is ready. In the next step, we will write the inaccessible "before" version so you can see what div soup looks like.