HTML comes with 6 different heading tags <h1>
to <h6>
. The most important headings on a page use <h1>
, the second most important headings use <h2>
and so on.
xxxxxxxxxx
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraphs are defined using the <p>
tag. Each paragraph will go onto a new line with some space above and below it.
xxxxxxxxxx
<p>This is the first paragraph. It has lots and lots and lots of text in it.</p>
<p>This is the second paragraph. Notice how it goes onto a new line.</p>
Breaks are defined using the <br>
tag. This tag puts a line break wherever it's included.
xxxxxxxxxx
<p>This is the first line.<br>This is the second line<br>This is the third line.</p>
<p>Lots<br><br>of<br><br><br>line breaks!</p>
Images are defined using the <img>
tag. For each <img>
tag we need to give some extra information for the location of the image file to show and the width and height. These are called attributes and they go inside the <img>
tag.
src
- this is the source or location of the image file to display.width
- we can say how wide the image should appear (in pixels or a percentage).height
- we can say how high the image should appear (in pixels or a percentage).xxxxxxxxxx
<img src="https://www.codingireland.ie/images/avatar/avatar-1.jpg" width="100" height="100">
<img src="https://www.codingireland.ie/images/avatar/avatar-2.jpg" width="200" height="200">
<br>
<img src="https://www.codingireland.ie/images/avatar/avatar-3.jpg" width="50%">
<img src="https://www.codingireland.ie/images/avatar/avatar-4.jpg" width="20%">
<img src="https://www.codingireland.ie/images/avatar/avatar-5.jpg" width="20%">
Links are used to 'link' to other web pages and they are defined using the <a>
(anchor) tag. For each <a>
tag we need to give some extra information for the location of where to link to as well whether to open a new tab or not. These are called attributes and they go inside the opening <a>
tag.
href
- this is the location of the web page we want to link to.target
- this says whether we open the link in the current tab or a new tab.Whatever we put inside the <a></a>
tags is what the browser will display as the link.
xxxxxxxxxx
<a href="https://www.codingireland.ie" target="_blank">Coding Ireland Website</a>
<br>
<a href="https://www.rte.ie" target="_blank">RTE Website</a>
<br><br>
<a href="https://www.wikipedia.org" target="_blank"><img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png"></a>