HTML Basics Tutorial 1 – Simple HTML Document
Notes from the video ‘HTML Course Singapore | Learn HTML Programming |HTML Tutorial 1 -HTML Simple Document’:
This is the structure of a simple HTML document:
A HTML document is made up of different elements like the <html> element, the <head> element, and the <title> element.
Let’s take a closer look at the <title> element.
Most elements consist of a pair of html tags. A start tag(e.g. <title>) and an end tag(</title>). The start tag indicates where the element begins while the end tag tells us where it ends.
Between the start and end tag, we have the element content(e.g. Title of Page).
Each HTML5 document begins with the document type declaration <!DOCTYPE html>. This declaration is not a html element but a declaration that specifies that this document is a HTML document.
The HTML document begins with the <html> element, which is the root element. A root element is the first element to appear and defines the type of the document. The HTML element contains all the other elements in the document.
Next, we have the <head> element. The <head> element contains all the metadata of the document. Metadata is data about the document and is not displayed on the webpage.
Inside the <head> element, we have the <title> element. The <title> element defines the title of the document. The title element is not displayed on the webpage, but it serves as the title of the page in search engine results and when the page is added to favourites.
After that, we have the <body> element. The <body> element contains the heading and paragraph elements and all the content of the HTML document that’s visible on the webpage.
We can see from the screenshot of the console here showing the content in the body displayed on the webpage.
Next, we have the <h1> element. The <h1> element defines the main heading of the webpage.
Lastly, we have the <paragraph> element. The <paragraph> element defines a paragraph. The start and end tags of the paragraph element do not contain the word ‘paragraph’. Instead, the start tag of the paragraph element is a single p enclosed in angle brackets <p> while the end tag is a forward slash and a p enclosed in angle brackets </p>.