Building our Mood Board :: She Codes by the Beach

Headings

Mon, 01 Jan 0001 00:00:00 +0000

Let’s dive a little deeper into headings. So far we’ve just used an h1. This is what we would call the top level heading, and there is usually only one of these on the page. We use this tag to show the main title for the page. To break up the page into further sections, we can use the rest of the heading elements, h2, h3, h4, h5 and h6.

Comments

Mon, 01 Jan 0001 00:00:00 +0000

Quite often we want to leave a note in our code to explain what something does (especially if we are new to this). We can do this by writing comments. Comments are tags that appear in our code but not on the webpage. This lets us write notes to ourselves about what some code means and what it does. A comment looks like this: You’ll notice we already have one in your body section. Feel free to add more comments to youself as we move through this tutorial.

Images

Mon, 01 Jan 0001 00:00:00 +0000

All of the elements we have used so far have had an opening and a closing tag. There are a few elements that are self closing. For these tags, instead of having content between an open and close tag, they have content provided as an attribute. The image element is a self closing element, and has the tagname img.

Div

Mon, 01 Jan 0001 00:00:00 +0000

Great job, we’ve got a page with some content on it, some images and some links. But it’s a bit messy, we want to structure our content so it looks nice on our page. Unlike the header and body elements we used earlier, the div (divider) element does not inherently represent anything. Instead, this element is used to group other elements. Let’s wrap our 5 images and quote in a div tag:

Figures

Mon, 01 Jan 0001 00:00:00 +0000

The figure element is similar to a div in that its going to help give us some more structure on our page. The figure tag is used in HTML to group together content like an image, diagram, or code snippet with its caption. It helps keep things organised so the picture and its description always stay connected on the page. For now, let’s go through and add the figure tag around each of our image/quotes to pop them in boxes.

Bonus HTML Elements

Mon, 01 Jan 0001 00:00:00 +0000

There’s lots more in HTML that we could cover. We’ve included a few more common ones here. Element What it does Example

Adds a big heading to the page

Hello World

Creates a paragraph of text

This is a paragraph.

Makes a hyperlink to another page or website Visit Displays an image
Inserts a line break First line
Second line Makes text bold (for importance) Important! Emphasises text (usually italic) Note this
Starts an unordered (bulleted) list
Item

Starts an ordered (numbered) list
Item

Adds a list item inside
or

Milk

A container for grouping content
Content here
Styles or highlights small parts of text Highlight
Groups images or diagrams with captions
Caption
Challenge! Have a play around with your completed mood board page and see what other HTML elements you could include. We love looking at W3 Schools for a list of inspo to Google.