Learn HTML Complete for Beginners [Panduan Terbaru]

Nowadays, almost anyone can create a website without understanding coding. In fact, it’s also important to learn HTML in order to understand the foundations that make up a website.

Now, try to imagine your website is still plain. Then, you install the theme. Unfortunately, the layout of the website looks far from expectations. The header is too big, the menu position can only be in the middle, the content display is not suitable. Even when you try to modify it with a plugin, the results are still not optimal.

So so that doesn’t happen, you need to learn HTML. So, your abilities are not limited by the features and templates that are already available. So, you can create functionality that neighboring websites don’t have. Interesting right?

Well, you’ve come to the right place! Here, we will help you learn HTML for beginners in a simple way. In one read, you will understand:

1. What is HTML?
2. What Are Tags, Elements, and Attributes?
3. HTML Core Framework
4. Learn HTML with HTML Editor
5. Choosing the Best Browser
6. Creating the First Website Page
7. Completing Website Pages
8. Setting the Website Page Template
9. HTML Color Code


further ado, let’s start this beginner’s HTML learning journey!

What is HTML?

HTML (Hypertext Markup Language) is a combination of two terms: hypertext and markup language. What the heck is that?

Hypertext is a document containing links that allow users to link to other pages.

While markup language is a computer language that consists of a set of codes to organize the structure and present information.

So, HTML is a markup language for creating website page structures.

illustration of what is html

id="h-apa-itu-tag-elemen-dan-atribut">What Are Tags, Elements, and Attributes?

To make learning basic HTML easier, you should get acquainted with tags, elements, and attributes. They are the three friends that make up HTML’s atoms.

The following is an explanation of each.

  • Tags, is used as a prefix for instructions or commands that the web browser will read. For example:
    This tag will prompt the browser to display text in bold format;
  • Element, is the entire code consisting of the opening tag (<>) to the closing tag (). Example: <'h1> Element Example . However, not all HTML tags have closing pairs;
  • Attribute, i.e. additional information or commands contained within the element. For example: ”Baron's This element uses the tag with the image source (src) and alt text (alt) attributes.

After understanding the components that make up HTML, please learn basic HTML coding. By knowing basic HTML coding, you will be better prepared to use more challenging HTML tags.

learn HTML

HTML Core Framework

By now, you already know what the atoms make up HTML. When these atoms are collected, an HTML document is formed.


let’s dispel the shadow of an HTML document filled with hundreds of tags. We will explore the simplest form of HTML documents and become the core framework that composes every HTML document in the world.

  • serves to declare to the computer that you will write commands in HTML code;
  • is a tag that indicates that you start and end a document in HTML code;
  • filled with metadata from the HTML document. Such as tab title, description, and others;
  • filled with web page content.

After pocketing the HTML core framework, you can complete it according to the purpose and needs of your website pages.

Bonus info, if you are curious to see the HTML document of a website page, please do the following trick: right click on the mouse and select ‘View page sources’. Or simply by pressing Ctrl + U.

Illustration View Page Source

Learn HTML with HTML Editor

From earlier, we have studied the theory of learning basic HTML. Surely, you can’t wait to put it into practice.

Then it’s time for you to set up your HTML editor. The HTML editor is a worksheet for creating and editing HTML documents.


are various HTML editors that you can use for free. Such as Notepad++, Atom, Bracket, and many more. But before choosing an HTML editor, make sure your computer’s OS is compatible.

Now, after installing the HTML editor, you can learn HTML more easily. Because the features offered by the HTML editor will speed up your work process.

illustration of learning html with html editor

Choosing the Best Browser

After creating an HTML document, you’ll want to see the results, right? Therefore, make sure you already have a web browser. A web browser is an application for accessing and displaying web pages.

By a web browser, the computer language that you have created in the HTML editor will be translated into a view that is understood by humans.

So just in case, you should prepare at least two web browsers. Even though there is HTML standardization, errors can occur so that the display between one web browser and another is different.

illustration of choosing the best browser

Creating the First Website Page

Now, you can create and view HTML syntax execution in your browser. Unfortunately, your HTML page is not yet publicly accessible. The reason, HTML files are still stored in your computer directory only.

Therefore, it is necessary to online the project. The fastest way is to create a website through a web hosting service.

Not only fast, how to operate is also easy, you know. You can immediately upload the HTML file to WordPress or directly customize it through the WordPress Editor.

learn to make the first web page

Completing Website Pages

So that your basic HTML learning knowledge is getting to the top, try making additional components on web pages. Add complementary spices to make your website pages more delicious and informative.

You can insert images, tables, forms, or other complementary components. Guaranteed, the website pages that you present will be easier to understand, attract more fans, and bring benefits that you didn’t expect.

learn to complete web pages

Learn to Set Website Page Templates with HTML

Even though you can create complete web pages, this journey of learning basic HTML is not over. Because, you also need to set the website page template so that the project looks cooler.

To set a website page template, you can create your own HTML theme or use a ready-made HTML template. Both of these methods will both beautify the layout of your website pages.

learn to set website page templates with html

Learn HTML Color Code

Knowing HTML color codes is important, especially when learning HTML for beginners. That way, you can modify the color of text, borders, and other media in HTML documents.

Why does it have to be in color coded form?

Say you are sitting in a restaurant. After reading the menu, you order fried rice. By the waiter, the order paper will be brought to the kitchen to be executed by the chef so that the dish can be served quickly. This means, you’re not the one directly involved in frying the rice, right?

Well, that’s roughly how the HTML color code works. We need a server or intermediary so that our request can be served or appear in the browser.

Since computers speak mark-up languages, they don’t understand if you direct commands in human language. Therefore, you must give the command a color code. After the color code is processed, the browser will display the color you want.

learn html color code


Needless to say, we have arrived at the end of the article. However, your journey to learning HTML still continues.

Don’t worry, because we will continue to assist you in learning. If you are full of learning HTML for beginners, please upgrade your knowledge by understanding what CSS is and how it works and the Javascript Learning Guide for Beginners.

Why CSS and Javascript (JS)?

The reason is that CSS and JS are closely related to HTML. By applying CSS, your HTML will look more beautiful. While JS serves to make web pages interactive so that they can be used.

But, if you want to learn other programming languages, we have also prepared this article for you → 15+ Programming Languages ​​Developers Must Learn.

Finally, never get bored to learn, OK! Good luck!

Create by Ipadguides in category of Blog