Lesson 2: HTML Basics
HTML basics
HTML is not a programming language; it is a markup language. It describes to the web browser the layout and formatting of text, images, and video on the web page.
HTML Tags - tags give structure to our web page. They describe and assign formatting values to text and images. An example of a tag is the header tags.
Example:
<h1> This a H1 header tag. </h1> <h6> This is a H6 header tag. </h6>Output:
Note: Notice the difference in size of text. The header tags formatted the text by assigning different font sizes to the text.
- Tags are opened using two angle brackets tag goes inside the brackets. Tags are then closed with two angle brackets and a forward slash.
- All text inside tags is written in lowercase.
- Tags must have an opening and a closing tag. The closing tag being the tag with the slash inside tags.
Elements
Elements consist of an opening tag, the content you want to put inside it and a closing tag. There are several different types of elements which structure the content within the brackets differently, for example, header elements.
Void Elements
Void Elements are elements that do not have content to be placed in between tags and so there is only a need for one tag. For example, the image element is a void element and only requires one tag. Note that the forward slash is at the end of the tag.
Common elements:
| HTML element | Meaning |
|---|---|
| h1 | Header elements: These can vary from a h1 to a h6 and change the size of the font of the headers. |
| br | Line break: Skips a line and goes onto the next line in the content. This is a void element. |
| i | Italicised text. Makes content italicised |
| b | Bold text. Makes content bold. |
| u | Underlined text. Underlines content |
| p | Paragraph text |
| hr | Horizontal line across the web page |
The Div element
The div element is a common element that is used to divide up web pages in HTML. It is a simple element with opening and closing tags. The div tag helps break up a web page into several sections which can have different styles and formats.
Block Level Elements
Block level elements are elements that by default, continue onto a new line. For example, the header tags always start a new line on the web page.