INIBLOG / blogpost / article/Intro
HTML5 Tutorial
CodeIgniter 4
Bootstrap Tutorial
Installation Guide
CSS Tutorial
JavaScript Tutorial

HTML5 Tutorial - Intro

Posted by Ridwan Fadilah on Jun 22, 2020 - 12:35 am

Intro

Introduce with HTML5. Learn the basic HTML5 tutorial and build your first web!

You might be familiar with a website. However, have you ever think about how to make a website? If so that, you're in the right place. In this tutorial, you'll learn about the basics of HTML5.


What is HTML?

  • HTML is standard markup language used for creating web pages
  • HTML stands for HyperText Markup Language
  • The HTML describes the structure of your web page
  • In its use, HTML consist of many elements that will tell the browser how to display the content

HTML5 Example

Here's an example of the simple HTML document:

<!DOCTYPE html>
<html>

<head>
??<title>Your page title<title>
</head>

<body>
??<h1>This is a heading</h1>
??<p>This is a paragraph</p>
</body>

</html>

and here is how the browser will display the code above:

simple html5 example

Example Explained

Here's the explanation of the simple HTML5 example:

  • The <!DOCTYPE html> is declaration define that this document is an HTML document
  • The <html> element is the root of an HTML document
  • The <head> element contains some meta information of your HTML document
  • As the name suggest, the <title> element is the title of your HTML document
  • The <body> element defines the document's body. Place your visible contents in this element such as headings, paragraphs, images, links, tables, etc
  • The <h1> element defines the heading, and the <p> element is a paragraph

What is an HTML Element?

The HTML element is everything from the open tag to the closing tag.

See this image illustration:

HTML element

Code Editors

Before we start to learn more HTML5, you should have a code editor first. Let's get acquainted with the code editor.

I have some code editor recommendations here:

  • Atom
  • Sublime Text
  • Visual Studio Code (VSCode)
  • Notepad++
  • Coda
  • Brackets

Please install one of these editor on your computer.

You can also use the TextEdit on your Mac or Notepad on Windows if you can't install these for now.

First, Let's start with Notepad. If you are Mac user, use the TextEdit.

Open your Notepad or TextEdit

Notepad (Windows)

For now, let's start with a simple HTML document. You can write the code below or copy them.

Example:

<!DOCTYPE html>
<html>

<head>
??<title>My html document<title>
</head>

<body>
??<h1>My first heading</h1>
??<p>My first paragraph</p>
</body>

</html>

The title not shown on your page. But that will display on the browser tab. It is because the head element is the element that only used to place some meta-information. In this case, the title is also one of the meta-information.

All contained in this body element is what will display by the browser. However, you can still set what content you want to show or hide. You'll learn about that in the next chapter.

Okay, now save your HTML page. Select file, and then save as.

Save HTML Document

Named the file with 'htm' or 'html' extension. There is no difference, it up to you.

Set the encoding to UTF-8. Which is the preferred encoding for HTML files.

Save and Set Encoding For HTML5

Now open saved HTML file in your browser. To open the HTML document, just double click or right-click and select open with a browser (Chrome, Mozilla, IE, etc.)

The HTML file will display by the browser like this:

Result For HTML5 Document

Okay, that's a little tutorial of the basic HTML5. If you want to learn more about the basic HTML5 tutorial, you can find it in the next chapter.

You can see the complete 'HTML5 Tutorial - Intro' on our YouTube Channel. You can also find the full source code of these examples on our GitHub.

Thanks for reading this tutorial.

Related Articles