Bonus HTML Elements
There’s lots more in HTML that we could cover. We’ve included a few more common ones here.
| Element | What it does | Example |
|---|---|---|
<h1> |
Adds a big heading to the page | <h1>Hello World</h1> |
<p> |
Creates a paragraph of text | <p>This is a paragraph.</p> |
<a> |
Makes a hyperlink to another page or website | <a href="https://example.com">Visit</a> |
<img> |
Displays an image | <img src="cat.jpg" alt="Cat"> |
<br> |
Inserts a line break | First line<br>Second line |
<strong> |
Makes text bold (for importance) | <strong>Important!</strong> |
<em> |
Emphasises text (usually italic) | <em>Note this</em> |
<ul> |
Starts an unordered (bulleted) list | <ul><li>Item</li></ul> |
<ol> |
Starts an ordered (numbered) list | <ol><li>Item</li></ol> |
<li> |
Adds a list item inside <ul> or <ol> |
<li>Milk</li> |
<div> |
A container for grouping content | <div>Content here</div> |
<span> |
Styles or highlights small parts of text | <span>Highlight</span> |
<figure> |
Groups images or diagrams with captions | <figure><img src="pic.jpg"><figcaption>Caption</figcaption></figure> |
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.