Twitter Facebook Google+ LinkedIn Pinterest Tumblr Reddit

What is HTML and what are tags in HTML?

Tags: html doctype

Ftp Server Installation on Ubuntu Server

HTML is a text markup language that stands for Hyper Text Markup Language. It is a programming language used in the creation of websites, in order for this language to work, it must be compiled by browsers such as chrome, firefox, safari, edge, opera. In this article, we will take a look at the details and usage areas of the HTML language, we wish you all good reading.

History of HTML

HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in Switzerland. He designed a hyper-text system based on the Internet.

Tim Berners-Lee is designer of the hyper-text system based on the Internet.
Tim Berners-Lee

The meaning of hypertext is a text with references (links) to text that visitors can instantly access. The first version of HTML was published in 1991 and contained 18 HTML tags. Since then, each new version of HTML has brought new tags and attributes (tag editor).

There are currently 140 HTML tags in total, according to the Mozilla Developer Network's HTML Element Reference, but some of them are not used (not supported by modern browsers).

Due to the rapid increase in popularity, HTML is now considered an official web standard. HTML features are controlled and developed by the World Wide Web Consortium (W3C). You can check the latest innovations in HTML language on W3C's website.

One of the biggest updates recently was the HTML5 introduction in 2014. With this release, some new semantic tags have been added to the format, such as <article> </article>, <header> and <footer> that indicate the meaning of the content.

How Does HTML Work?

HTML files are documents that end with an .html or .html extension. You can view these files using any internet browser (Google Chrome, Safari or Mozilla Firefox). The browser reads the HTML file and converts it into content that internet users can see.

Generally, an average website contains a variety of different HTML pages. For example, different pages such as homepage, about pages, contact pages have different HTML documents.

Each HTML page has a set of tags (also called elements), which are the building blocks of web pages. These building blocks create a hierarchy that formats the content into sections, paragraphs, headings, and other content blocks.

Most Used HTML Tags

HTML codes are particles that make up the structure of a web page. Regardless of the code used, all begin with '<' and must end with '>'. You should always know some simple HTML code. You will need to use these codes in more than one place on the web pages you prepare. But first you need to know what a basic HTML document structure should look like.

What is doctype in HTML?

All HTML documents must begin with this code. This code actually indicates that the page is encoded according to HTML5 format.

DOCTYPE is used to inform the browser what type of document the pages you prepare are. In this way, the browser understands to which standard (which HTML version is used) it will interpret this page. If DOCTYPE is not used, browsers will not interpret pages according to the standard, so each browser will give you different results. One of the reasons the site looks different in browsers is that DOCTYPE is not used. So if you want your site to appear smooth in Chrome but not crooked in IE, you should use DOCTYPE.

DOCTYPE is used to inform the browser what type of document the pages you prepare are.
Doctype

Where Is DOCTYPE Defined?

The DOCTYPE definition must be one line above the "<html>" tag and nothing above the DOCTYPE definition. The DOCTYPE definition is not an HTML tag, so it cannot be used in place of the "<html>" tag. Below you will see a correct and incorrect DOCTYPE definition.

Correct DOCTYPE definition
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
Content..
</body>
</html>
Incorrect DOCTYPE definition
<!DOCTYPE html>
<head>
<title>Başlık</title>
</head>
<body>
Content..
</body>
</html>

DOCTYPE Versions

There are different DOCTYPE definitions for each HTML version. Below you will see the DOCTYPE definitions for all HTML versions.

HTML5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans">

There are different DOCTYPE definitions for each HTML version. Below you will see the DOCTYPE definitions for all HTML versions.

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.>
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

If you noticed, the latest version of HTML 5 is quite simple and short compared to other definitions. Click for more detailed information about HTML versions.

Click here to see which HTML tag is valid in which HTML version.

What are body and head tags in HTML?

Body is the area and HTML tag where all the content, tables, headlines and all other elements you can think of are displayed in HTML language. Everything with a comma from the point you see on this page and all other items on the site are included in the Body we define as an HTML tag. There are two most important tags when preparing an HTML page. One of them is Body and the other is Head. Head contains elements and information that will not appear about the page, while the Body tag contains the elements that should be visible on the page.

<head>Meta tags and scripts will be here..</head>
<body>Sir Node Content..</body>

What is Title tag in HTML?

In short, it is the title for a Web site. It is a title that can be given differently for each page belonging to that page that appears to the users and search engines defined within the website. The feature of this title is that it is entered in a certain character length and it is a meta tag that you can get serious return when using SEO, search engine optimization.

Meta Title Usage Example

The use of meta titles is actually quite simple. I also shared some information about how to use this meta title tag below. You can add the code to your site by guiding yourself.

<head>
  ..
  <title>What is HTML and what are tags in HTML? - Sir Node</title>
  ..
</head>

Meta Title Terms of Use

I would like to share with you the general spelling rules related to the use of Meta Title as a list below. For this, I will give you the tips on what you need to do and how to produce content.

  • Meta Title to be written: It should be set to have a minimum of 60 - a maximum of 70 characters in length.
  • It has to be a unique original title that has not been written anywhere before, and produced by you.
  • Spelling mistakes should not be made. Search engines are very sensitive in this regard.
  • The title you write should be directly related to the content you produce. You should not enter the title that has no subject on the page.
  • You can separate some keywords with these characters(: , | , > , – , /) while writing the title.
  • Meta title tag in the website Html codes must be written in the Head tag.

What is Heading Label? How to use?

Heading tags allow us to organize the content on our pages in hierarchical order. One of the criteria that search engines look for in textual content is the heading tag layout.

In an article, the title can be the subtitle, the subtitle subtitle, and the repeat subtitle. We can show this to search engines with heading tags so they can understand what is how important.

Heading Tags Usage Example

<h1>What is HTML and what are tags in HTML?</h1>
    <h2>History of HTML</h2>
    <h2>How Does HTML Work?</h2>
    <h2>Most Used HTML Tags</h2>
        <h3>What is doctype in HTML?</h3>
            <h4>Where Is DOCTYPE Defined?</h4>
                <h5>Correct DOCTYPE definition</h5>
        <h3>What are body and head tags in HTML?</h3>

The example above shows how to use heading tags, hopefully understood.

What is p tag in HTML?

It is the code that allows you to create paragraphs within the text. Although text paragraphs can be created by adding <br> code between them when separating content sections, it is recommended to use the <p> code. It informs search engines and crawlers about the page structure.

What is br tag in HTML?

It is HTML code that is used to split text on a web page horizontally. Where it is used, the text continues on the bottom line. In other words, when <br/> is used, all subsequent words continue from the bottom line.

What is img tag in HTML?

The <img> code is used to add images to the web page. When you want to add a picture to a web page, first upload it to the web server. You can then use an <img> tag to reference the file name of the uploaded image.

What is button tag in HTML?

HTML button code is used to make your pages interesting and create interactive content. This code, which becomes more powerful with JavaScript and HTML color codes, allows you to interact with users in your content.

What is a tag in HTML?

You can also create links between the <a> code, one of the important HTML linking codes, and your other content. To create a link, you must wrap the <a> and </a> tags around the content you want to link to.

What is hr tag in HTML?

Horizontal line codes are used to visually separate page sections. This code creates a line between the current position on the page and the right margin. Thus, groups of words or sentences are separated by a horizontal line.

HTML Pros

  • Ability to work naturally in all internet browsers,
  • Easy learning,
  • Open source code,
  • Being completely free,
  • Providing a huge choice of languages with a large number of resources,
  • Ability to be controlled by official web standards such as the World Wide Web Consortium (W3C),
  • Stable and smooth formatting serving,
  • Ability to work in harmony with backend languages such as Node.js and PHP

HTML Cons

  • Some browsers may be slow to recognize new features added to the HTML code system.
  • HTML does not allow the user to add logic. For this reason, even if you have the same elements (such as footers and headers), all websites are created separately.
  • Since it is frequently used for static web pages, it is used for dynamic operations such as PHP, CSS or JavaScript. backend language must be used.

Summary

  • HTML is not a programming language, but a markup language.
  • HTML file extensions must be written as .html or .htm.
  • Notepad, Notepad ++ for writing HTML codes. or editors such as Sublime Text can be used.
  • Another program that should be known after HTML is learned well should be CSS. CSS program is mostly used to style HTML codes to be read in the relevant browser.
  • Web sites can be designed with HTML, CSS and JS. However, languages such as ASP.net, JAVA should also be used to make it dynamic and better quality.

As a result, in this article we learned what is HTML and what are tags in HTML?. If you want to learn more, keep in touch with sirnode.

You can find the other Sir Node JavaScript Tutorials here…

If you want to learn more details about HTML, you can go here.