in

Learn HTML For Beginner (Part 2: Basic Structure of HTML)

In this tutorial, we will discuss how to write HTML. We will start by learning the meaning of tags, elements, and attributes in HTML, looking at the basic structure of HTML code, getting to know HTML writing rules, and validating HTML code to meet W3C standards.

Definition of HTML Tags, Attributes and Elements

Tags, attributes and elements are the 3 core parts that makeup HTML. Let’s discuss briefly the understanding of these three aspects.

Definition of Tags

From the hello_world.html file that we ran in the previous chapter, surely you already know that HTML files are written using signs like <html>, <head>, <body> or <p>. These signs are known as HTML tags.

The tags in HTML function to tell the web browser what and how a text should be displayed. As we have learned, an HTML file is just an ordinary text file. The web browser will process the file and display the results.

Most HTML tags are written in pairs, consisting of opening tags and closing tags. Opening tags are written using square brackets, like <p>. While the closing tag is written by adding a slash or slash like </p>.

The p sign here means a paragraph, where we tell the web browser that all text that is between the opening tag <p> and closing tag </p> is a paragraph.

For example, if I want to create a text structure consisting of 2 paragraphs, then I write it as follows:

<p> This is the first paragraph </p>
<p> This is the second paragraph </p>

When the web browser reads the code above, the text between the <p> tag and the </p> tag will be displayed as a separate paragraph.

Each tag has its function and role. In total, there are about a hundred tags in HTML. Although HTML has many tags, not all of them must be used. For example, the <p> tag will be encountered very often, but the <kbr> tag is relatively rare.

In this tutorial, I will discuss most of the tags that are in HTML, but we will focus on tags that are often used and have an important role to make the structure of the page.

In carrying out their duties, HTML tags require attributes.

Definition of Attributes

Attributes are additional information written in the opening tag. The function of this attribute varies depending on the value and on which tag it is placed. Some attributes are general and can be used in all tags (known as global attributes), but most only work for certain tags.

Attributes consist of pairs of attribute names and attribute values. For example, to add the class attribute with the first value into the <p> tag, the method of writing is as follows:

<p class=’first’> This is the first paragraph </p>

In HTML, writing attribute values between quotation marks is optional (may not be written). The above example can also be made as follows:

<p class=’first’> This is the first paragraph </p>

Writing attribute values without quotes like this is not wrong and remains valid in HTML. However, if the attribute value consists of 2 or more words, then we must use quotation marks, as the following example:

<p class = "first important"> This is the first and important paragraph </p>
The use of quotes for attribute values comes from the XHTML format, where each attribute must be enclosed in quotation marks. HTML5 does not require how to write these quotes. Even so, most programmers keep adding them.

Definition of Element

The third term that is still related to tags and attributes is the element. In HTML, an element is an intact part consisting of tags, attributes, and all text that is between the opening and closing tags. For clarity, the concept of this element can be seen in the image below.

Hasil gambar untuk tag attribute element
Learn HTML For Beginner

From the picture above we can see that the element includes tags, attributes and the entire contents of the tag, including if there are also other tags.

Tags, attributes and elements are the core of HTML. We will study it throughout this tutorial.

Basic Structure of HTML

The hello_world.html file that we ran before actually fulfills the basic structure of an HTML file. Let’s look at the HTML code again:

hello_world.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn HTML</title>
</head>
<body>
	<h1>Learn HTML</h1>
	<p class=first> This is the first paragraph </p>
	<p>Hello World…</p>
</body>
</html>

If you notice, most of the tags above are in pairs, except for the <! DOCTYPE html> and <meta charset = “UTF-8”> tags. Some tags are also inside other tags. Let’s discuss starting from the first line.

DTD: Document Type Declaration

In the first line of the hello_world.html file, there is a tag. This special tag is known as DTD (Document Type Declaration) or doctype. DTD functions to inform the web browser about the rules of writing a document

DTD comes from the SGML system (the markup language where HTML originated). In SGML, each document must contain an explanation of the type and type and must be written in the first line.

Before HTML5, writing DTD in HTML was very long and almost impossible to memorize. For example, here is a DTD for HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML5 tries to change this to make it more practical. The developers of HTML5 (the WHATWG organization) decided that HTML5 would be completely independent of SMGL rules. In other words, HTML5 is no longer a part of SMGL and is a fully independent markup language. Therefore, writing DTD is no longer needed.

However, the deletion of DTD from HTML is constrained by a mechanism in the web browser called quirks mode.

Quirks mode is a display model that web browsers use when displaying non-standard HTML code. Generally, these non-standard HTML pages come from “old” websites that were created decades ago.

To distinguish whether a web page is standard or not, the web browser will see whether the document contains a DTD or not. If not found, the web browser will appear in quirks mode.

When a document is processed in quirks mode, the web browser will make some special treatment. For example, displaying the web with a different look. This will be a problem because web design that has been designed can be messy. As web developers, we must avoid this as far as possible.

The WHATWG then sought a solution by making the DTD as short as possible so that the web browser did not enter into quirks mode. The trick is to use DTD writing: <! DOCTYPE html>. Thus, the web browser still uses the normal mode called Standards Compliance Mode.

The DTD position must also be written in the earliest line. Some web browsers (especially early IE) will enter quirks mode if another character is found before writing DTD (even if it is a space).

Writing DTD in HTML5 may be written in lowercase, like <!doctype html> . But you will often find writing that uses capital letters, such as: <!DOCTYPE html>.

Tag <html>

After writing the DTD, the structure of the HTML page is then followed by the <html> tag. You can note that the <html> tag will ‘wrap’ all other HTML code.

The opening tag <html> is on the top line after <! DOCTYPE html>, and the closing tag </html> is on the last line of the HTML code. All other HTML tags must be inside this tag.

Inside the <html> tag, you can put the lang attribute. This attribute is filled with a two-digit language code that will be used to fill the website. For example, if we create a website in English, we can write the tag <html lang = “en”>.

The lang attribute is completely optional (may or may not be written). But you will often find this attribute. A complete list of two-digit country codes can be found on Wikipedia.

The HTML structure in the hello_world.html file will be discussed again in detail in the next chapters. Here we only discuss briefly so that you can understand a complete HTML document.

Tag <head>

The <head> tag functions as a ‘container’ various tags which generally will not be seen in a web browser. The tags in the <head> section function to provide additional information about the page being processed, or provide references to other files (such as CSS or JavaScript files).

Some other HTML tags commonly found in the <head> section are: <meta>, <title>, and <link>.

Tag <meta>

The <meta> tag is an abbreviation of metadata. Metadata is data that contains information about a document. The <meta> tag contains information / instructions about the HTML page being run.

One of the <meta> tags contained in the above structure is <meta charset = “UTF-8”>. This tag will instruct the web browser to use the UTF-8 character set in processing HTML pages.

Tag <title>

The <title> tag is one of the few tags that can be seen in a web browser located in the <head> section.

As the name implies, this tag serves to make the title of a page. The title is the text displayed at the top of the web browser window. Besides, if we bookmark a page, this title will be the name of the bookmark.

Tag <body>

The <body> tag functions as a container of all HTML code that appears in the web browser. Here lies 90% of HTML tags that we will write later. 

Tag <h1> and <p>

The <h1> tag is an abbreviation of “header1”, which is used to structure the title in HTML. HTML provides 6 types of headers, ranging from <h1>, <h2>, to <h6>.

The <p> tag is an abbreviation of “paragraph” used to create paragraphs. I will discuss the <h1> tag and <p> tag in more detail in the next chapter.

Get to know HTML Tree / Document Object Model (DOM)

If you pay attention, the tags in HTML have their structure. This structure is commonly called the HTML tree or the cool term Document Object Model (DOM).

Learn HTML For Beginner

By the term, HTML codes can be likened to a tree, where each tag is connected. To be more easily understood, consider the diagram below.

The diagram above is the DOM structure of the HTML code of the hello_world.html page that we discussed earlier. The topmost tag, which is called a tag (root) because all other HTML code must be inside this tag. The concept of DOM structure is very important to understand, especially as a basis when learning JavaScript.

Apart from being a “tree”, the diagram above can also be read like a family diagram. For example, the <head> tag and the <body> tag are directly under the <html> tag. Therefore, the <head> tag and the <body> tag are called (child) of the <html> tag, and the <html> tag is called (parent). Likewise with the <h1> and <p> tags which are children of the <body> tag.

The example DOM diagram that we are discussing here is a simplified version of the actual HTML code. For more complex pages, the diagram above can reach 10 or more levels.

Basic Rules for Writing HTML

After discussing the basic structure of HTML, we will enter into the basic rules of writing HTML. Because we use HTML5, the rules are a little different when compared to XHTML (especially if you’ve learned it).

XHTML is the ‘predecessor’ of HTML5. XHTML was originally designed as a successor to HTML 4.01 which was considered ‘too free’, and because of that XHTML is known for its stricter writing rules.

When XHTML development stopped and was not continued, HTML5 was present as its successor. HTML5 makes these writing rules ‘back loose’. For example, if in XHTML writing tags and attributes must use lowercase letters, in HTML5 this is not a problem.

Case Sensitivity

Case Sensitivity is a term that discusses whether a programming language differentiates between lowercase and uppercase writing.

In XHTML, all tags, attribute names and attribute values must be written in lowercase letters. However, in HTML5, writing uppercase and lowercase letters will be considered the same. Both the <P> tag and the <p> tag are both allowed in HTML5.

However, due to habitual factors and to make it look more presentable, I suggest you use lowercase letters for writing all tags, attributes, and attribute values.

The exception is DTD writing, which is written in capital letters: <!DOCTYPE html>. Although we can also write using lowercase letters, like <!Doctype html>, but the majority of web programmers use uppercase letters for writing DTD.

Self Closing Tag

Some tags in HTML do not have a pair of opening tags and closing tags, for example, the tags <meta>, <br> and <img>. These tags are also called void elements.

In XHTML, a stand-alone tag must be closed by adding a forward slash forward / ‘(forward slash) before the closing bracket.

For example, the <br> tag used to create a new line, in XHTML, is written as <br />. Writing like this is also called the self-closing tag.

In HTML5, this rule is no longer required. Writing <br> and <br /> are both considered “valid”.

There are some programmers who continue to use the ‘writing style’ XHTML like: <br /> because it seems more presentable. But some argue that this is the ‘old-fashioned’ way, and just write it with: <br>. You may follow any method of writing, as long as it is consistent throughout the HTML code so as not to be confused.

Closing Tag Pair

Because most tags are written in pairs, we must be careful not to forget to write the closing tag pair. This error can result in a messy web page display.

For example, the <em> tag and the <strong> tag are used to emphasize a word or sentence. The <em> tag will be displayed in italics, and the <strong> tag will be displayed in bold. These two tags are widely used in paragraphs.

If we ‘forget’ to close the <em> tag or the <strong> display of the entire page tag it can become corrupted. For example, consider the following HTML code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Belajar HTML</title>
</head>
<body>
	<h1>Belajar HTML</h1>
	<p>One of the unique things about <strong> HTML </strong> 
	(and also <em> CSS & JavaScript <em>) is that we can freely
	see the codes used to create a web page.</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part2\1.png
Learn HTML For Beginner

If you run the HTML code above, all text from ‘CSS & JavaScript’ to ‘web pages.’ Is displayed in italics. Though what I want to appear italic is only the text ‘CSS & JavaScript’.

The error location in the code above is in the <em> tag, where I forgot to add a closing mark “</em>”. The above page should be written as follows:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn HTML</title>
</head>
<body>
	<h1>Learn HTML</h1>
	<p>One of the unique things about <strong> HTML </strong> 
	(and also <em> CSS & JavaScript </em>) is that we can freely
	see the codes used to create a web page.</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part2\2.png
Learn HTML For Beginner

This time the final appearance is what we want.

Whitespace

Whitespace is a term that refers to the character ‘space’ that does not appear on the screen, for example, are spaces, tabs, and enter characters (also known as carriage returns characters).

In HTML, whitespace will be ignored, including if written in text. For example, the two HTML codes below will produce the same appearance:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Learn HTML</title>
</head><body><h1>Learn HTML</h1><p>Learn HTML For Beginner</p>
</body></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn HTML</title>
</head>
<body>
<h1> Learn HTML</h1>
<p>Learn HTML For Beginner</p>
</body>
</html>

Although whitespace will not be processed, inserting spaces and tabs into the HTML code will make it easier to read.

Regarding whitespace, in HTML there are tags <br> that can be used instead of ‘Enter’. Tag <br> stands for the break, will make the text afterward appear on a new line. This tag is one of the tags that you encounter very often.

In addition, HTML also has a <hr> (Horizontal Line) tag for creating horizontal lines. Here is an example of its use:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn HTML</title>
</head>
<body>
	Here are some web browser applications that you can use: <br>
	<hr>
	Google Chrome <br>
	Mozilla Firefox <br>
	Microsoft Internet Explorer <br>
	Opera <br>
	Apple Safari <br>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part2\3.png
Learn HTML For Beginner
The above example is more suitable when using a list, we will learn about the List Element in a separate chapter later.

Make a comment

In making HTML code (and also program code in general), sometimes we need to add some information in the program code, whether it is a small note about the date and time the program was made or information for what we wrote the code.

This information is usually called a comment. In HTML, comments are made using the opening tag <! – and closing tag ->. All text that exists between these two tags will be considered as a comment so that it will not be processed and not displayed by the web browser.

Here is an example of writing comments in HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn HTML</title>
</head>
<body>
	<!-- This is a comment, and will not be displayed on the web browser -->
	<h1>Learn HTML</h1>
	<p>HTML is fun!</p>
</body>
</html>

Apart from being a note, comments are also often used to make a description of who the program code maker is, or to limit a block of HTML code. Here is an example of its use:

<!DOCTYPE html>
<!--
Author: Laikie
Author URL: https://laikie.site/
Version: 1.1
License: GNU General Public License v2 or later
-->
<html>
<!-- start head section -->
<head>
	<meta charset="UTF-8">
	<title>Learn HTML</title>
</head>
<!-- start body section -->
<body>
<!-- main article -->
	<h1>Learn HTML</h1>
	<p>HTML is fun!</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part2\4.png
Learn HTML For Beginner

In the HTML code example above, I used several comments to create an HTML file identity and mark certain parts of the page. Writing methods like this will make it easier to read the page structure especially for long HTML code.

Note that to create an opening comment, we need 5 characters, which are: <,! , -, -, and space. To close a comment, use 4 characters: space, -, -, and>. This space character is often ignored, but some web browsers need this.

HTML Standard & Validation

As long as we create web pages, as far as possible to follow the rules of writing HTML by W3C standards. If a web page can perform well, this is not necessarily the case for the next few years. A web page that follows the standards is also called standards-complaints.

In web programming, standards refer to official documents on how to write and how to use tags and / or attributes. Because we will use HTML5, the standard we will use must be in accordance with what was designed by W3C.

You can learn HTML5 standards at http://www.w3.org/TR/html5/ . But this document is very technical, and to understand it you should understand HTML in general.

Following the W3C standard will make our code ‘future-proof’, i.e. the look and structure of our website will still be relevant in the future.

Although there are already standards regarding tags and attribute, web browsers sometimes also add tags and attributes to their versions. These tags and attributes are called non-standard tags and attributes.

For example, the <blink> and <marquee> tags are non-standard tags that were present in the ‘browser war’ era between Netscape and Internet Explorer. Because they are non-standard, several web browsers do not support these two tags.

The <blink> tag will be ignored by Google Chrome and Mozilla Firefox, while the <marquee> tag is still supported by most web browsers.

How to Check HTML Validation

To check whether the HTML code that we made is by the standard or not, you can visit the site http://validator.w3.org . This site is managed directly by W3C as the body that makes HTML standards.

The validator.w3.org site provides 3 options for checking validation: using the site address, uploading an HTML file, or by copying and pasting HTML code (direct input).

This time we will try to validate the HTML code that is on the hello_world.html page:

  1. Open the site http://validator.w3.org .
  2. From the validation options, select Validate by Direct Input.
  3. Copy-paste the HTML code in the hello_world.html file into the input box.
  4. Click the Check button

The results of the validation look like the picture below. And, the result is: This document was successfully checked as HTML5 !, which means it is valid as HTML5.

If you ask why there is Result information: Passed, 2 warning (s), this warning (warning) appears because of the following:

  1. HTML5 validation is still under development, so the validator.w3.org site warns that there may be some invalid information.
  2. Because we use direct input, the character encoding validation process cannot be done. If we choose to upload an html file (not by copy-pasting the program code), this warning message will not appear. This is because we have included the <meta charset = “UTF-8”> tag.

Block Level Element and Inline Level Element

Before I close this chapter, let’s discuss a little about block-level elements and inline-level elements.

When viewed from the way a web browser displays an element (or tag), there are 2 types of views, namely block and inline.

Block-level elements (or block-level tags) are HTML tags that are a separate part of the page flow and are displayed in a new line. Examples of block-level elements are the <p> tag and the <h1> tag. Both of these tags will ‘close’ the previous tag and start a new line (start a new block). Generally, this tag is at the outermost part of the DOM structure.

Inline-level elements (or inline-level tags) are HTML tags that follow an existing view. This tag will not create a new line. Examples of inline-level elements are the <strong> and <em> tags. Both of these tags are used to make italics and bold letters in a text.

Inline-level elements generally do not stand alone but are inside block level elements. For example, and also as a template for HTML codes that we will use in the next chapter, save the following HTML code with the name index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn HTML</title>
</head>
<body>
	<h1>Learn HTML</h1>
	<p>One of the unique things about <strong> HTML </strong> 
	(and also <em> CSS & JavaScript </em>) is that we can freely
	see the codes used to create a web page.</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part2\5.png
Learn HTML For Beginner

From the above display, you can see the difference between block-level elements and inline-level elements.

index.html 

Files with the name “index” have a special role in HTML. This file is automatically run when we type the folder address only (without typing the file name).

For example, to run the hello_world.html file inside the learn_html folder, I must type the full address, namely: learn_html / hello_world.html.

However, to run the index.html file, I simply type the address: learn_html, and the web browser will directly display the index.html page.

Before you try this, I add that this only applies if the web page is inside a web server, such as the Apache web server. Because in the discussion in this tutorial we don’t use a webserver, this can’t be done.

Div and Element Span

In connection with the discussion of blocks and inline elements, there are 2 ‘special’ tags which are often discussed together, namely the <div> tag and the <span> tag. These two elements do not have a special role in HTML. But it becomes very useful when paired with CSS.

The <div> tag is a block-level element, while the <span> tag is an inline-level element. Both are often used to create structural elements with the help of CSS. We will again discuss these two tags in a special chapter on page structure.

In this chapter, we have discussed in depth the understanding of tags, attributes ,and elements in HTML.

We have also discussed the basic structure of writing HTML. For the next chapter, I will discuss in detail about the <head> tag, or head element, that is, what tags and attributes are usually placed in the <head> section of an HTML page.

HTML Tutorial List

  1. Learn HTML For Beginner (Part 1 : Introduction HTML)
  2. Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
  3. Learn HTML For Beginner (Part 3 : Head Element)
  4. Learn HTML For Beginner (Part 4 : Text Formatting Element)
  5. Learn HTML For Beginner (Part 5 : List Element)
  6. Learn HTML For Beginner (Part 6 : Image Related Element)
  7. Learn HTML For Beginner (Part 7 : Audio dan Video Element)
  8. Learn HTML For Beginner (Part 8 : Table Element)
  9. Learn HTML For Beginner (Part 9 : Form Element
  10. Learn HTML For Beginner (Part 10 : HTML5 Form Element)
  11. Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
  12. Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
  13. Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
  14. Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))

What do you think?

Learn HTML For Beginner (Part 1 : Introduction HTML)

Learn HTML For Beginner (Part 3: Head Element)