<aside> <img src="/icons/checklist_purple.svg" alt="/icons/checklist_purple.svg" width="40px" />
By the end of this chapter you should be re-familiarised with HTML and CSS concepts and terminology including:
HTML is a markup language. It uses tags to describe (or “mark up”) elements on a page. Nearly all HTML tags have an opening and a closing tag:
| Opening Tag | Closing Tag |
|---|---|
<body class="potatoes"> |
</body> |
(An element can be given extra information, such as the class attribute.) |
(Note the closing tag is indicated by a / before the tag name, and attributes are omitted.) |
… but there are also a few ‘self-closing’ tags such as:
| ✅ Yep! | ❌ Nope! |
|---|---|
<img> |
<img></img> |
<link> |
<link></link> |
| Code | Description |
|---|---|
<body> </body> |
Describes the content of a page. It is where all visible content is placed. All of the page’s content needs to go inside of the body section. (You should only have one set of <body> </body> tags per page.) |
<header> </header> |
| Describes an area of the page that contains the header content (e.g. a logo, text inside <h1> to <h6> tags, a table of contents, etc.).
N.B. The <header> should not be confused with the <head> </head> section, which is where document setup and non-visible content/metadata goes. |
| <p> </p> | Describes a paragraph. |
| <a href="fabric.html#sustainable"> </a> | Describes an anchor. When the href attribute is used an anchor creates a hyperlink to another web page or a specific place on the same page or another page. |
Nesting refers to the way that elements can enclose/contain other elements.
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
Here the h1 and p tags are nested inside header.
Given that HTML is used to describe the role an element plays on a page, sometimes it is unnecessary to nest tags. Consider for example:
<h1><p><strong>A Heading</strong></p></h1>
<aside> <img src="/icons/conversation_pink.svg" alt="/icons/conversation_pink.svg" width="40px" />
<h1> tag. Why?Well, the <strong> tag is unnecessary because the default font-weight of an <h1> is bold. And the <p> is unnecessary because the <h1> is already a block level element with a different semantic meaning. Using the <strong> tag to make an element’s entire content bold should also probably be done with CSS.
Aim to write as lean HTML as possible and lean into CSS to provide style definitions as much as possible.
</aside>