This Appendix contains information about all the tags used in the HTML tutorials.
Saying that a tag encloses text, implies that the tag is opened, the enclosed text then follows, then the tag is closed.
Tags needed on all HTML pages
<!doctype HTML>
Instructs a web browser to interpret the page as ordinary HTML code. This is required at the top of every HTML file.
<html>
Appears just below the <!doctype HTML> tag and encloses all the HTML and should always be used alongside <!doctype HTML>. It cannot be enclosed by any other HTML tag.
<head>
It separates the non-visual the parts of the web page . This tag is enclosed by only the <html> tag.
<meta charset=”UTF-8″>
Instructs the browser how to interpret the binary (storage mechanism) as characters on the page. The most common interpretation is UTF-8. Always save your HTML pages with the UTF-8 encoding. This is enclosed by the <head> tag.
<title>
Sets the title for the web page, it is enclosed by the <head> tag and can only be used once.
<body>
Contains the visual elements of the web page (text, images, …). This tag is enclosed only by the <html> tag.
Other HTML tags
<em>
Indicates emphasis of the text enclosed in it. Commonly done by italicising the text.
<strong>
The indicates that its enclosed text is important. Commonly done by emboldening the text.
<a>
The hyperlink tag. It encloses the text/image that will be the hyperlink (item to click). The href attribute of it is set on it to indicate the webpage load when it is clicked.
<a href="go_to.html">My link</a>
To link to a file in another directory/folder on a website please see here.
To link to another website, ensure the website’s address with is prefixed with http:// , otherwise the address will be interpreted as a like to another file in the HTML file’s directory.
<a href="http://www.invincitech.com">Website link</a>
<p>
Encloses all text in a single paragraph. It is is padded with larger line spacing above an below it to distinguish it from a previous paragraph. See here for more information.
<br>
Causes a new line of text to be started early, as opposed to when the text reaches the end of the screen. It is used because HTML ignores newlines in the .html file, and it needs to be told where to start a new line.
It should not be used to create paragraphs, use the <p> tag.
<h1> – <h6>
The header tags, when one of them encloses text it makes it into a header, by increasing the text’s boldness and font size.
There are several variations of it (from 1-6).
<h1>My large heading</h1> <h2>My smaller heading</h2> <h3>My even smaller heading</h3> <h4>My fourth largest heading</h4> <h5>My second smallest heading</h5> <h6>My smallest heading</h6>
With 1 being the biggest and most important header, and 6 being the least important and smallest.
<span>
Does nothing and represents nothing. It is used to group elements for styling with CSS when there is no other tag already doing so.
<span class="obscure">Obscure text</span> in a sentence.
If there was already, e.g. <strong> about “Obscure text” the class should be applied to <strong> and a <span> should not be added.
<img>
Displays an image.
Example
<img src="dog.jpg" alt="A dog standing on grass">
Attributes
src(required) – location of the image to display.alt(required) – description of the image.height– displayed height of the image, in pixels.width– displayed width of the image, in pixels.
<video>
Embeds a video into the page. Must be closed, see here.
Example
<video src="dog.mp4" controls></video>
Attributes
src(required) – location of the video to display.height– displayed height of the video, in pixels.width– displayed width of the video, in pixels.autoplay– starts the video playing as soon as it is loaded.loop– play the video continuously, looping back to the beginning.controls– show play/pause/fullscreen video controls.
<audio>
Embeds audio into a page. If it has no controls it may be invisible. Must be closed, see here.
Example
<audio src="dog.mp3" autoplay loop></audio>
Attributes
src(required) – location of the audio to play.autoplay– starts the audio playing as soon as it is loaded.loop– play the audio continuously, looping back to the beginning.controls– show play/pause/fullscreen audio controls.