We use cookies
This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..
Master SEO vocabulary with all essential terms and meanings here.
HTML: Definition and The Examples
Last updated: Aug 14, 2024
https://cmlabs.co/en-il/seo-terms/html
Link copied!
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
cmlabs
WDYT, you like my article?
Latest Update
Last updated: Dec 11, 2024
Last updated: Nov 21, 2024
Last updated: Nov 08, 2024
Explore Other Terms
Subscribe to Our Newsletter
Enter your email to receive news from us
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
