HTML tags

Meow! I’m just sooo frustrated. The design is lost, and the images are gone!

This is Muffin — a cat, developer and entrepreneur all in one. And he’s the one we’ll make this page for.

The thing that you deleted on one of his websites turned out to be the “styles.” In short, you disabled the design. To fix this, let’s pretend that we are working on a long-awaited update to the design of the webpage. While we fix things, we will also learn our way around HTML and CSS.

HTML is responsible for the content of the page. It consists of tags. Each tag consists of a name enclosed between the “less than” and “greater than” signs. Tags look like this: <h1>, <p>, <ul>.

Tags come in two varieties: paired and single. Paired tags can enclose text, as well as other tags. Paired tags, in contrast to single tags, have a second half: the closing tag. The character / (a forward slash) is written before the name in closing tags:

<h1>Heading text</h1>

Another useful part of HTML is comments. Text, including code, that is enclosed between the characters <!-- and --> will be ignored and is considered “commented out.” The code will only work if you delete these special characters, which is called “uncommenting.” Comments are typically used to temporarily disable some code, or leave hints and explanations for the next developer (who might be you!).

You have now learned enough to start fixing the website. Use the new styles that are already waiting for you, commented out in the code.