in

Learn HTML For Beginner (Part 3: Head Element)

After discussing the structure of HTML and the basic rules of HTML writing in the previous chapter, in this chapter, I will discuss more the head element, which is what tags are generally present in the <head> section of an HTML page.

The <head> tag usually contains information about the page to be processed or the definition of a link to the files needed to process the page, such as CSS files or JavaScript files.

Where is this <head> tag?

The <head> tag is at the top after writing the <html> tag. For clarity, here is the HTML code in the index.html file that we created in the previous chapter:

<!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>

It appears that the <head> tag is immediately after the <html> tag. In this example, the <head> tag contains the <meta> and <title> tags. Besides these two tags, the <head> section can also be filled with various other HTML tags. We will study them one by one.

Meta Element

Generally, the first element inside the <head> tag is the meta element.

The <meta> tag functions to provide information about the HTML page that is currently being displayed. This tag is intended not for website visitors, but web browsers and ‘robots’ like search engines. Therefore the effect of the <meta> tag will not be visible to visitors.

All <meta> tags are optional and do not have to be in every HTML page. An exception to this is the <meta charset = “UTF-8”> tag which if not added, the HTML5 validator will issue an error.

Within the <meta> tag, the attribute will define the function of the <meta> tag. Attributes for meta tags are very diverse, and various new functions are continuously added (especially in HTML5).

Meta tags belong to the void element group, so they don’t have a closing tag pair.

Because the <meta> tag is present in a variety of functions, here I am only discussing the <meta> tags that are most commonly used:

Meta charset

Meta charset functions to give instructions to the web browser on how to translate characters in an HTML page.

The charset is a collection of computer bit codes with character pairs that must be displayed. Explanation of this charset is somewhat technical, but hopefully, you can understand it.

On a computer, each character such as letters and numbers are stored in a collection of bits consisting of numbers 1 and 0. For example, the letter “A” will be stored as bits 1000001 or “41” in hexadecimal. The process of translating the bit “1000001” to “A” refers to the ASCII table, or commonly called the ASCII charset.

The problem is, the ASCII charset table can only store Latin letters and numbers. For non-Latin characters (such as Arabic, Chinese, Japanese, etc.), special charsets are required.

During the development of the internet and HTML, many charsets appeared in each of these languages. For example, charset big5 is used for Chinese letters, x-euc-jp for Japanese letters, and iso-8859-7 for Greek letters. This fragmented charset makes it difficult for web browsers to translate a character.

In the XHTML era, UTF-8 (Unicode Transformation Format-8) charset was introduced which supports almost all characters in the world.

In further developments, HTML5 also uses UTF-8 as a standard charset. By using UTF-8, we don’t need to worry about what character or language to use. UTF-8 supports up to more than 10,000 characters for various languages in the world.

In HTML5, writing the charset meta tag for UTF-8 is as follows:

<meta charset="UTF-8">

For comparison, in HTML 4 and XHTML the writing is rather long, like this:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

From some references, there are those who say that it is completely optional for HTML5, so it may not be written. However, as you have seen, the HTML5 validator will issue an error if we do not include this tag.

Besides, in 2005 there was a bug in Internet Explorer called Google XSS. This happens because the google site doesn’t write the character set so it can be used to insert javascript code. Therefore, you should always add a charset meta tag to every HTML page.

Some text editors that provide HTML templates also always include this meta charset.

Meta Author, Keywords dan Description

These three meta tags are deliberately united because of their similar functions. All three are intended to make it easier for ‘robots’ search engines (such as Google) to find information.

This meta tag is written with the name attribute for the type of information, and the content attribute for the contents of the information.

For example, because the laikie site was written under the name “Laikie”, I created the following meta tag author:

<meta name="author" content="Laikie">

Furthermore, laikie site is a tutorial site for web programming languages such as HTML, CSS, JavaScript, PHP ,and MySQL. Therefore I decided to use all five in the keyword meta tag:

<meta name="keywords" content="Tutorial HTML, Tutorial CSS, Tutorial JavaScript, Tutorial PHP, Tutorial MySQL">

Finally, for the meta tag description I write an explanation about the laikie site:

<meta name="description" content=" Web Programming Learning Site ">

At the beginning of its appearance, the three meta tags were used to simplify search engines, but at present, the effectiveness of the three is not very influential. This happens because all three are widely used by spam blogs to cheat search results (by writing as many keywords as possible).

However, there is no harm in including this meta tag on every HTML page that you create, as long as the keywords and descriptions that are used by the content, and not too much to be considered spam.

About SEO

How to be able to appear at the top of search results is the goal of SEO (Search Engine Optimization). SEO is a ‘science’ that discusses ways, tips and tricks to be able to appear top in the results of search engines like Google, which ultimately aims to increase visitors to a site.

SEO is now a fertile field that is ‘very tempting’. If you are a site/blog owner and want to appear top on Google, you must know the concept of SEO.

Various parties also provide SEO services along with tips and tricks with 1 goal: your site appears on Google. A few years ago, enough to create hundreds of keywords in the meta tag keywords, as well as dozens of backlinks (links that lead to our site) will increase ranking on Google. But now this method is no longer effective. And until now SEO experts continue to look for new ways to be able to ‘outsmart’ Google search results.

But one thing is certain, Google also continues to update the algorithm that determines whether a site is eligible to appear on the start page of the search or not (one of them by no longer assessing metatag keywords). Creating a site with useful and useful content is the best way for SEO.

Meta Refresh

This meta tag is quite powerful, it is used to make web pages refresh automatically every few seconds. This meta tag requires the http-equiv attribute with the value “refresh”, and a content attribute that contains numbers in seconds.

If you want a web page that refreshes every 1 minute, then use the following meta tag:

<meta http-equiv="refresh" content="60">

Generally, this feature is added to web pages whose content is updated very quickly (in minutes or seconds) like a news site. Thus, the news that the end sees is always the latest.

But it should also be noted that in each refresh cycle, the web browser will reload the entire page. This means it will reduce the bandwidth quota for the webserver (the place where the site is located) and also the bandwidth of web visitors.

Other Meta Tags

In addition to the meta tags that I discuss here, there are still some other meta tags that you will encounter, some related to handling CSS, JavaScript or a feature called microdata.

Because this meta tag is in the ‘advanced’ category and requires technical knowledge, I will only discuss it briefly.

Meta tag X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

The X-UA-Compatible meta tag is used to handle problems related to the Internet Explorer web browser. IE has a compatibility view mode that is active when a web page is accessed from a local computer or accessed from inside the intranet. This feature makes it different in handling web pages (similar to quirks mode). The meta tag above will force IE not to enter compatibility view mode.

Meta tag Viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

The meta tags above are usually used on responsive web designs. Broadly speaking, the meta tag viewport is added so that the responsive design can appear perfectly on a small screen (such as a tablet or smartphone).

Meta tag Robots

<meta name="robots" content="index, follow">

The robots meta tag is used to give messages to search engines how the web page will be processed, if the value of the content attribute is “index, follow”, then the search engine will index the page (entered into search results).

But if the value of the content attribute is “noindex, nofollow”, then web content will not be included in search results (maybe web pages are confidential and you don’t want someone accessing them from google).

Summarizing all the meta tags, here is a sample index.html page code that uses the meta tags we have learned:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="author" content="Laikie">
	<meta name="keywords" content="Tutorial HTML, Tutorial CSS,
	Tutorial JavaScript, Tutorial PHP, Tutorial MySQL">
	<meta name="description" content="Web Programming Learning Site">
	<meta http-equiv="refresh" content="60">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="index, follow">
	<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>

If we run the above code, nothing will change. Because the tag will not appear in a web browser, but only for complementary information for a web browser.

The <link> tag is used to make a ‘relationship’ between an HTML page and another file, although currently, the most useful is to input CSS files into HTML pages.

Link elements have several attributes, the most commonly used are the href attribute, and the rail attribute. The href attribute (an abbreviation of hypertext references) is used to write the address of the intended external file location, while the rel attribute (an abbreviation of relationship) contains the type of ‘relationship’ with the file.

For example, to input a CSS file: style.css into a web page, here’s how to write it:

<link href="style.css" rel="stylesheet">

Another attribute for the <link> tag is type. Type functions to inform the type of file to be linked. If the file is CSS, the value of the type attribute is: “text / css”, like this:

<link href="style.css" type="text/css" rel="stylesheet">

Still related to CSS, media attributes can be added to determine which media the CSS file will display, whether screen (computer screen), print (when printed), or all (all media). Here is an example:

<link href="style.css" type="text/css" rel="stylesheet" media="all" >

If the media attribute is not written, the default value is media = “all”, which means that all CSS code will be applied to all media.

Get to know MIME Type

The type attribute of the tag (and also all HTML tags that have the type attribute) requires a value in the form ‘MIME type’. MIME-type is an internet standard for distinguishing document types and types.

In the example of writing type = “text /css”, we tell the web browser that the linked file is text document type and in CSS format. If the file being linked is JavaScript, the MIME value of type is type = “text/javascript”.

In learning web programming, you will often be associated with MIME types. MIME writing consists of 2 parts, namely the type of application and type of format, where the writing is: type of application/type of format.

For example, for an image file (image) in the GIF format, the MIME value type is image/gif. For music files (audio) in mp3 format, MIME types are audio/mpeg.

For further explanation about MIME types and types, you can learn them on wikipedia.

Make a Favicon

In addition to inputting CSS files, the <link> tag can also be used to input favicons to HTML pages. A favicon is a small image that you can see on the left side of a web page, like in the image below.

D:\Website\Harus serius\Laikie Berita\HTML\part3\1.png
Learn HTML For Beginner

To display this image, prepare a small image (usually 16 × 16 pixels), you can make it in Photoshop or search for it on the internet. This image file may be in .ico, .gif, .jpg, or .png format.

After that, place the image in the learn_html folder, and change its name to favicon.ico, or favicon.jpg (depending on image format). The name of this picture also does not have to be “favicon”, but this name has become an unofficial standard in making a web.

The last step, please open the index.html page, and add the following tags to the <head> section:

<link rel="icon" href="favicon.ico" type="image/x-icon">

In the example above, I used the ico image format. For the type = “image / x-icon” attribute is the MIME type of the .ico file, this attribute may or may not be written (the web browser will determine the MIME file type image itself). If you use .jpg or .png images, the writing is as follows:

<link rel="icon" href="favicon.jpg" type="image/jpeg">
<link rel="icon" href="favicon.png" type="image/png">

By adding the favicon code, the index.html file can be revised to:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<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>

Please open in a web browser, a thumbnail image will appear as a page (favicon).

Script Element

The <script> tag is used to input the script program code into an HTML page. Generally, the scripting programming language used is JavaScript, and this is the default language if you don’t specify the type of language in the type attribute.

Following is an example of using the <script> tag:

<script type="text/javascript">
// JavaScript code here ...
// JavaScript code here ...
// JavaScript code here ...
</script>

In HTML5, writing the type = “text / javascript” attribute is completely optional, so we can ignore it if the language used is JavaScript (which is 99% likely to use JavaScript), like the following example:

<script>
// JavaScript code here ...
// JavaScript code here ...
// JavaScript code here ...
</script>

In addition to directly entering the script code into the page, the <script> tag is also used to input an external JavaScript file (created separately) into an HTML page. For this we add the src attribute. The value of the src attribute is the location where the script file is located. Here is an example of the writing:

<script src="javascript.js"> </script>

The code above will input the javascript.js file which is in a folder with the current file into an HTML page.

Although I am discussing the <script> tag inside the head element, the use of this tag does not have to be only in the <head> section. The <script> tag can be placed anywhere along with the HTML page.

Style Element

The <style> tag is used to input style code into an HTML page. The most commonly used style code (and still the only one) is CSS. CSS also becomes the default style if we don’t write the type = “text / css” attribute.

Following is an example of using the <style> tag:

<style type="text/css">
// CSS code here
// CSS code here
</style>

Like the <script> tag, the type attribute is also optional in HTML5. You may not write this attribute, like the following example:

<style>
// CSS code here
// CSS code here
</style>

The <style> tag also supports media attributes. This attribute serves to create CSS styles that only work if the media is written accordingly. Is it screen (computer screen), print (when printed), or all (all media). Here is an example:

<style media="all">
// CSS code here
// CSS code here
</style>

If the media attribute is not written, the default value is “all”, which means that all CSS code will be applied to all media.

Just like the <script> tag, the <style> tag can also be placed anywhere in the HTML page (not necessarily in the head section).

Title Element

The <title> tag is probably the most important tag in the <head> section. This tag works to display the title of the page in the ‘top frame’ of the web browser.

Generally, search engines use the value of this tag to display the title of the search results. So making the right <title> tag contents will increase the chances of appearing on Google.

In Google search results, only the first 50-60 characters will be displayed. Therefore you should not use titles that are too long.

If there are web visitors who share (sharing) to social media sites like Facebook, the article title from the sharing is taken from the value of this <title> tag.

Here is an example of writing the <title> tag:

<title> Learning HTML for beginners | Laikie </title>

In addition to making the page title, I also added the name of the site at the end using the “|” delimiter. This type of writing is common, provided the page title does not exceed 50-60 characters.

Here’s an example of the complete HTML code:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<title>Learning HTML for beginners | Laikie</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>

Closing : Head Element

In this chapter we have discussed several things related to HTML elements or tags that are often contained in parts of a web page.

In closing, I will display the index.html file with all the tags we have learned so far. Here is the complete HTML code:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="author" content="Laikie">
	<meta name="keywords" content="Tutorial HTML, Tutorial CSS,
	Tutorial JavaScript, Tutorial PHP, Tutorial MySQL">
	<meta name="description" content="Web Programming Learning Site">
	<meta http-equiv="refresh" content="60">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="index, follow">
	<link href="style.css" type="text/css" rel="stylesheet" media="all">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<script src="javascript.js"></script>
	<title>Learn Head Element HTML</title>
	<style media="all">
	/* CSS code here
	CSS code here */
	</style>
</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>

Until here we have covered most of the tags along with the attributes that often appear in the <head> section of an HTML file.

Even though you feel the information I describe here is quite long, but this is still a small part of what can be put in the <head> tag. For comparison and case studies, you can go to popular websites like buzzfeed.com and see the source code (especially in the <head> section).

D:\Website\Harus serius\Laikie Berita\HTML\part3\2.png
Learn HTML For Beginner

Some things you might encounter are special attributes such as property = “twitter: account_-id”, or property = “fb: app_id”. This is a special metatag used for social media like Twitter and Facebook.

Some other attributes that you might encounter such as item prop = “title” or property = “og: site_-name”. These attributes are known as microdata. Microdata is usually used to guide search engines to translate some information.

As an introductory HTML tutorial for beginners, I think the discussion about microdata is not too ‘urgent’, but if you are interested in learning it, you can visit wikipedia or schema.org.

We leave the <head> section and enter the <body> section of the HTML page. In the discussion in the next chapter, we will discuss Text Formatting Elements, which are tags used to format text or paragraphs in HTML.

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 2: Basic Structure of HTML)

Learn HTML For Beginner (Part 4: Text Formatting Element)