Learn Semantic HTML by marking up these documents.
This is a directory of text documents that you can mark up for practice learning HTML. The documents contain the typical types of things you might see in web sites on your phone and desktop. Only the text is included here! Your practice is to put add the HTML tags.
The documents are ordered by complexity, yeah, HTML can be more complex than it looks sometimes. There is an opportunity to use a range of different tags in each of these different documents.
As long your syntax is valid the documents will work in a browser. That said there are some answers that more right than others and other answers that confuse or muddle what the document is trying to express.
Your goal is to mark up the document with the tags that best describe the content text. You want the tags to best express the message and intent of the content of each document.
Don't worry about what the documents look like in the browser. This is a common beginner mistake. The default styles in the browser are only default choices provided when no other stylesheet has been included.
tl;dr fork this repo and start add HTML tags to each of the documents.
This repo contains a list of challenges and solutions. Each of the solution files is marked.
The challenge file contains only text, no markup, you will add markup.
The challenge solution contains a file with markup. This markup is only a suggested solution there will often more possible solutions that could be used. You can use the solutions to compare your work.
When comparing your work to the solutions ask yourself these questions:
- Why does the solution use a particular tag?
- Why does it nest one tag within another?
- What is the difference between your choices and what is in the solutions?
- With this last question, you'll find that there may be lesser or greater discrepancies. Some differences may be small, and others might be far, while others might be subtle.
Get started by
- Forking this repo.
- Open the first challenge file in your code editor and start adding markup.
- When you think you are done, compare your work to the solution.
- Move on to the next challenge.
Feel free to contribute! If you have ideas for a document that might make a good challenge feel free to contribute. See the contributing guide. If you have a particularly good solution feel free to contribute that also!