In this tutorial, we will cover the HTML basics tag to help you to get started. If you want to understand more about HTML structure and the fundamental of HTML tags. This course is for you.
P/S: If you came through my other HTML tutorial from Introduction To HTML, then this will be the absolutely next tutorial for you.
The HTML Page Structure
As our previous blog mentioned about the structure of HTML page must consist with <! DOCTYPE html>, <html>, <head> and <body> tags to be considered as a proper HTML page as followings.
<!DOCTYPE html>
<html>
<head>
<title>This is Page Title.</title>
</head>
<body>
<h1>Jorcus - My First Heading.</h1>
<p>Welcome to my site, this is my first paragraph.</p>
</body>
</html>Without any of them, the web browser might not display it properly. But wait… What are they? Who are they?
Explanation of the structure of an HTML document
On the code above, we have the followings HTML tags. Let’s see what are them and what do they do.
<!DOCTYPE html> : The DOCTYPE, It tells the web browser the document type to helps the web browser display the web page correctly. You don’t need to end the tag, but you need to make sure it placed before all others HTML tag. It should be at the start of all HTML code and only appear once.
Fun Fact: In the past, it use for automatic error checking and other useful things for HTML page, without having the Doctype, it never considered a good HTML. In old days, It looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML Web Page
<html></html> : This is the root element that required to wrap all the content of your HTML code. You should wrap all your HTML code all the time, it used by all the websites today.
HTML Head
<head></head> : The <head> generally contains about general information like title, keywords, page descriptions, character set declarations, style sheet for your content with CSS and many more. In most case, the content in <head> won’t display directly to the web page. It mostly display on the search results like the title, keywords and the page descriptions.
HTML Page Title
<title></title>: The <title> is used to set your web page title on your browser tab.
HTML Page Body
<body></body>: At this element, it will contain all the contents you want to display on your website to the visitors. For example, in the code above, you have place the <h1> and <p> element on this page. It will be displayed it. (Refer the code above.)
HTML Page Headings
<h1></h1>: This is the biggest heading of your website. There are smaller headings from <h2></h2> until <h6></h6>
HTML Page Paragraph
<p></p>: This is for you to insert the paragraph to your web page. If you insert another <p> in next line, you will see there will have some margin in from the next <p> element by default.
You’ve just learned about some HTML tags. Want to try it? Let’s create your own HTML page and test it out!
If you’d like to create your own HTML web page, but do not understand how. Check out my previous blog how to create a simple HTML web page to get started. With this quick start tutorial, I guarantee you can create your first HTML page in just one minute.