Basic Elements

Although there are a large number of available tags, you can build surprisingly good looking and functional websites with just a few. We look at the most important here:

Paragraphs

Although you can write text without tags, if is best practice to enclose text in a paragraph tag <p></p>. This allows you to style text more easily and separates out chunks of text for screen readers (used by the blind).

The the following placeholder text on your site

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua</p>

Links

The bread and butter of the internet is linking to your own pages or other sites. A link (more properly known as a hyperlink) uses the <a></a> tag and requires you to include a parameter that tells the browser where to link to.

<a href="https://www.bbc.co.uk/">Visit the BBC!</a>

You can also include a target parameter that determines where the link is opened:

<a href="https://www.bbc.co.uk/" target="_blank">Visit the BBC!</a>

The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was clicked

• _blank - Opens the document in a new window or tab

• _parent - Opens the document in the parent frame

• _top - Opens the document in the full body of the window

Headers

Headers should be used to give titles to sections of your website. They are important for search engine crawlers as they outline the importance and structure of parts of your website.

The most important headers a rendered as the largest by default and go up to a maximum of level 6. Try the following on your site:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Images

Almost every website includes images and we can use the <img> tag to display one on our page.

Note that the image tag does not require a closing tag

The image tag gives us parameters to define the source (this can be on our server or somewhere else on the internet), width and height in pixels.

<img src="img_girl.jpg" width="500" height="600">

Google images is a good source of pictures. If we open the image and right click, we can copy the image address for use on our own site.

Modify your site to include text, headers and images

Further Reading

HTML Reference