HTML stands for HyperText Markup Language. HyperText is text displayed on a computer or device that provides access to other text through links. A markup language is a computer language that defines the structure and presentation of raw text.
HTML provides structure to the content appearing on a website, such as images, text, or videos.
It is composed of elements
The body tag defines the documents body. The content inside the body element is what is displayed to the screen. This is how a body element looks like:
< body >
"Content here"
< /body >
Content such as images, text and buttons are added here.
Headings are used to describe content such as titling and sections. There are 6 differnet headings where h1 is the largest and h6 is the smallest.
This is an example of h1:
< h1 > Heading element H1 < /h1 >
which results in:
This is an example of h6:
< h6 > Heading element H6 < /h6 >
which results in:
The div element is short for “division” or a container that divides the page into sections which is useful for grouping elemnts in HTML together and providing structure.
They don't contribute anything visually to the site but is useful when providing custom styles (css) as you can style specific divs.
Can also be used for navigation as you can choose to go to a specific part of the page using the div id.
< body >
< div >
"Introduction"
< /div >
< div >
"Main"
< /div >
< div >
"End"
< /div >
< /body >
Attributes are content added to the opening tag of an element. Made up of two parts: name of the attribute and value of the attribute
One example of an attribute is id which is used to specify differnet contents such as divs. So the updated div would look like this:
< body >
< div id="intro">
"Introduction"
< /div >
< div id="main">
"Main"
< /div >
< div id="end">
"End"
< /div >
< /body >
To display text in HTML, you can use paragraph or span.
Paragraphs (< p >) contain a block of plain text.
< span > contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.
< p > Test paragraph with the word < span > key < /span > targeted.< /p >
which results in:
Test paragraph with the word key targeted.
To style texts using html tags, you can use the em tag or strong tag
The < em > tag is used to emphasis text and will render the text as italic.
The < strong > tag is used to highlight important text and will render the text as bold.
The following example will show you how to use these tags:
< p > < strong > The Nile River < /strong > is the < em > longest< /em > river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).< /p >
which results in:
The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).
To modify the spacing of content in the browser you will use the line break element < br >
The line break element is unique as you will only need to use one starting tag.
The following example will show you how to use a line break:
< p > This is a sentence. < br >How would I make it a new line? < br > You use line break.< /p >
which results in:
This is a sentence.
How would I make it a new line?
You use line break.
In addition to organising text in paragraph form, you can also display content in an easy-to-read list. There are two types of lists: unordered and ordered.
In HTML, you can use an unordered list tag (< ul >) to create a list of items in no particular order. It outlines individual list items with a bullet point.
Individual list items must be added to the unordered list using the < li > tag. The < li > or list item tag is used to describe an item in a list.
The following example will show you how to make an unordered list:
< ul >
< li > Red < /li >
< li > Blue < /li >
< li > Green < /li >
< /ul >
which results in:
Ordered lists are like unordered lists but instead of bullet points it will be numbered.
Instead of ul tag you use ol tag (< ol >) and then the indiviual list items you use < li > tag.
The following example will show you how to make an ordered list:
< ol >
< li > First you get two slices of bread. < /li >
< li > Then you get a cheese slice. < /li >
< li > Finally you place the cheese inbetween the bread and you have a cheese sandwich! < /li >
< /ol >
which results in:
The < img > tag allows you to add an image to a web page. It is a self-closing tag.
It has a required attribute called src which must be set to the source or the location of the image so the URL of the image.
The following example will show you how to use to insert an image
< img src="html5icon.png" />
which results in:
As you can see the image is very big so to make it smaller you can use the attibutes height and width.
The alt attribute is used to bring meaning to the images. Its used to give a short description of the image.
Its useful when the image fails to load on a web page as the user can mouse over the area and it will show the text description, also good for Search Engine Optimisation.
The following example will show you the updated img tag
< img src="html5icon.png" height = "300" width = "300" alt= "The logo of HTML5" />
which results in:
The < video > tag allows you to display a video to a web page. Requires an opening and closing tag.
It also has a required attribute called src which must be set to the source or the location of the video.
There is also an attribute called controls which will instruct the browser to include basic video controls such as pausing and playing.
The following example will show you how to use to insert an video
< video src="https://youtu.be/ok-plXXHlWw" width="320" height="240" controls>
Video not supported
< /video >
which results in: