We use cookies

This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..

Where might you have seen our work?
Small places create combinations, but crosses that occur cannot provide many combinations. So be careful in making justifications, especially SEO.

HTML: Definition and The Examples

Last updated: Aug 01, 2022

Hypertext Markup Language or abbreviated as HTML is a standard markup language to create a web page. HTML was originally developed at CERN (Conseil Européen pour la Recherche Nucléaire; European Organization for Nuclear Research) by Tim Berners-Lee around 1990.

In a simple simulation, a browser receives an HTML document from the web server or local storage, then it will run a document rendering to the multimedia web

HTML will portray the web page structure in a semantic way and account for the early “sign” for the document interface.

It is important for a beginner to know that the HTML element is a block for the HTML page builder. What is an HTML page builder?

With the construction of an HTML block, images, text, and other HTML objects can be inserted into a page. These elements also supply a facility to create documents or structured text such as post, paragraph, list, link, cite, or other tags.

Sample of HTML code

<!DOCTYPE html>
<html>

-- Header --
<head>
<title>This is a title</title>
</head>

-- Body --
<body>
<p>Hello world!</p>
</body>
</html>

cmlabs

HTML Version

HTML 2 - November 24, 1995
HTML 3 - Januari 14, 1997
HTML 4 - Desember 18, 1997
HTML 5 - Oktober 28, 2014

Note: each version of the HTML above has more sub-versions, such as 4.0 and 4.1. We only provide a summary of the significant versions.

HTML Components

In general, HTML components are divided into three points namely tags, elements, and attributes.

Tags

The HTML tag is a sign that becomes the prefix and suffix in HTML commands. Each tag has a different use. Writing tags begin and end with brackets <..> and there is a tag name in it. In HTML, tags are used in pairs including the opening <..> tag and the closing </..> tag.

Until now there are about 250 HTML tags, some HTML tags that you need to know are:

Tag Tag's Function
<html> </html>to initiate the creation of an HTML page containing content and elements
<head> </head>to create a head section containing titles, resources, and meta tags
<title> </title>to make the website title displayed at the top of the browser window
<body> </body>to write the body
<p> </p>to create a paragraph in an HTML page
<h1> to <h6>to create heading tags
<!-- -->to create comments

Table 1: Examples of some HTML tags and their functions.

Element

Elements are the components that make up an HTML page. An HTML element can consist of an opening tag, a body tag, and a closing tag. Sometimes it also has attributes. For example, an element may consist of an opening <p> tag indicating the paragraph element, an attribute such as align="center", a body or text tag of "Hello World", and a closing </p> tag to end the paragraph element.

An element can also contain other HTML elements or commonly called nested elements. Consider the following example of writing nested HTML elements:

<html>
<body>
<p align="center">Hello world!</p>
</body>
</html>

cmlabs

Attribute

Attributes are additional information contained in HTML elements. Attributes function to clarify the command tag in the element. A tag can have more than one attribute, although not all attributes can be used in the same tag. Look at the following HTML code.

<img src="bunga-mawar.jpg” alt="10 tangkai bunga mawar berwarna merah"></img>

cmlabs

From the example above, it can be seen that the <img> tag has two attributes, namely src, and alt. This shows a command so that the browser displays an image from the rose-flower.jpg file with the alt text containing "10 red roses".

HTML Tags for Website Optimization

Some HTML tags that you can use to optimize your website include:

Title Tags

Title tags are the title text that will be displayed at the top of the browser window. Make sure the title tags contain keywords that are relevant to the content of the page. Note the writing of the following title tags.

<head>
<title>HTML Tags untuk Optimasi Website</title>
</head>

cmlabs

Meta Tags

One of the most important meta tags is the meta description which contains a brief description of the information presented on a web page. The meta description must be attractive and contain keywords. The recommended length is around 400 – 750 pixels only.

An example of writing meta tags in HTML is as follows.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="HTML adalah markup standar untuk membuat halaman web.
  Dalam artikel ini kami akan membahas pengertian, komponen, serta HTML tags untuk
  optimasi web.">
  <meta name="keywords" content="HTML, SEO, Website">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

cmlabs

Heading Tags (H1, H2, H3, etc.)

Heading tags show the structure of the content that making it easier for readers and search engines to understand the information in the content. HTML tags have 6 categories of heading tags ranging from H1 to mark the most important things, to H6 for the least important things. Consider the following code example heading tags.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

cmlabs

Image and Alt tags

To attach images to a page, you can use images and alt tags. It makes it easier for search engines to understand the multimedia on your page. That way, your content can be indexed well by search engines so that the performance of the website will get better.

<img src="kucing.jpg” alt="gambar seekor kucing yang sedang mengejar bola"></img>

cmlabs

Hyperlink

Hyperlink or anchor text is usually used to add text that contains a link to a particular page. To optimize the website, make sure the words you use in the anchor text are relevant to the intended web page. Example of a hyperlink:

<a href="https://cmlabs.co/id-id/seo-guidelines/seo-on-page">Panduan SEO On-Page</a>

cmlabs

No Follow Link

No follow is a tag in HTML used to prevent Google from following pages that are linked in an anchor text. This attribute can avoid Google penalties when linking low-quality links. Consider writing the link rel="no follow" attribute below:

<a href="https://cmlabs.co/id-id/seo-guidelines/seo-on-page" rel="nofollow">Panduan SEO On-Page</a>

cmlabs
Our valued partner
These strategic alliances allow us to offer our clients a wider range of SEO innovative solutions and exceptional service. Learn More
cmlabs

cmlabs

WDYT, you like my article?

Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.

Free on all Chromium-based web browsers

Install it on your browser now? Explore Now cmlabs chrome extension pattern cmlabs chrome extension pattern

Need help?

Tell us your SEO needs, our marketing team will help you find the best solution

Here is the officially recognized list of our team members. Please caution against scam activities and irresponsible individuals who falsely claim affiliation with PT cmlabs Indonesia Digital (cmlabs). Read more
Marketing Teams

Agita

Marketing

Ask Me
Marketing Teams

Irsa

Marketing

Ask Me
Marketing Teams

Yuliana

Business & Partnership

Ask Me
Marketing Teams

Thalia

Business Development Global

Ask Me
Marketing Teams

Robby

Business Development ID

Ask Me
Marketing Teams

Dwiyan

Partnership

Ask Me
Marketing Teams

Rochman

Product & Dev

Ask Me
Marketing Teams

Said

Career & Internship

Ask Me

We regret to inform you that the Mobile Friendly Test is currently unavailable due to system maintenance until further notice.

Check

Stay informed with our new tool, cmlabs Surge. Discover popular trends and events!

Check

Your Opinion Matters! Share your feedback in our Plagiarism Checker Survey?

Check

Discover your business trends effortlessly! The traffic projection calculator is the perfect tool to help you understand demand in your industry sector. Choose your sector and see its traffic projections now!

Check

There is no current notification..