Learn Basic HTML Part 2 – Types of HTML Tags

Continuing the previous article on learning HTML basics. this time we will discuss the types of tags in html, especially in element tags <head>. Before learning the types of tags in html, there is nothing wrong with getting to know elements and attributes first. Element is the content of the tag that is between the opening tag and closing tag, including the tag itself and the attributes it has (if any), while the attribute is additional information provided to the tag. This information can be in the form of instructions for the color of the text, the font size of the text, etc. Each attribute has a name and value pair which is written as name = “value”. Value enclosed in quotation marks, may use one (‘) or two (“) quotes.

Example: below are paragraph tags <p> which is given the color attribute by giving it a value red and the font-size attribute giving it a value of 50px, the set of rows is called an element

Immediately, we start discussing the types of tags in html which are written in the tags <head></head> and its functions:

Types of tags in html

  1. Tag <meta> : are elements or tags in the HTML or XHTML programming language that function as metadata information providers from a web page. The writing of this tag is between the tags <head>…</head>. Below are some examples of tag <meta>
  • <meta charset=”utf-8″> : gives instructions to the web browser to translate characters in HTML pages as UTF-8. Although it is optional, almost every HTML5 page uses this meta tag.
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> : Meta viewports are usually used on the web with responsive designs. Broadly speaking, the viewport meta tag is added so that responsive designs can appear perfectly on small screens (such as tablets or smartphones)
  • <meta name=”description” content=”Blog Seputar Teknologi”> This line serves to provide information about the HTML page that is currently being displayed, in this case the information provided on the website is about technology.
  • <meta name=”keywords” content=”teknologi, gadget, computer, dst”> : This line has the meaning of telling the web browser the keywords of the created website pages, in this case the keywords are technology, gadgets, computers and so on.
  1. Tag <title> : This tag serves to enclose the sentence which is the title of the web page, this tag will display the website title that is displayed in the top tab bar of the browser.
  1. Tag <style> : This tag is used to insert style code or CSS into a web document (HTML). placed between the tags <head>, and usually this writing model is called internal CSS. below is the result of styling the paragraph color to blue using tags <style>
  1. Tag <script> : This tag serves to write javascript code in html. Basically, you are free to put JavaScript code anywhere in the HTML, as long as it is inside the tag (or via event handlers, although this is not recommended). Tags can be placed at the beginning of HTML (inside tags <head>), in the middle of the HTML (inside the tag <body>), or at the end of HTML (before the closing tag </html>). This placement position will affect how the JavaScript code is executed.
  1. Tag <link> : This tag shows a link between the document (HTML) and the source file from outside (external). an example here is connecting a separate css file into the html file so that the functions of the external css file can function in the html file.

Those are the types of html tags contained in the tag <head>, in the next article we will learn about the types of tags that are in the html / tag body <body>…</body> which is probably a lot more than the tag above.

Leave a Reply

Your email address will not be published. Required fields are marked *