Hypertext Markup Language the HTML – a markup language documents on the World Wide Web.
I want to immediately draw your attention to the fact that HTML is a markup language, not programming, as many mistakenly believe. Its main task is to create a skeleton for describing the various components of a document, such as paragraphs , headings , lists , tables , links to other pages, and so on.
HTML documents are described by special names of HTML elements ( tags ), each tag describes a different content of the document. Tags are commands that tell the browser how to display a web page (document).
The goal of any web browser is to read an HTML document and display it correctly. The browser does not display HTML tags, but uses them to determine how to display a particular document.
There are two types of tags: paired and single (empty). The HTML-tags are the first tag in a pair is the start ( opening ) tag and the second tag is the end ( closing ) tag. The main function of the start tag is to tell the browser where the command starts, and with the end tag to determine where it ends.
Let’s take a look at how paired tags differ from single tags.
Type (syntax) of a paired tag:
<tag> Tag content </ tag>
Please note that all tags are enclosed in angle brackets < and > , and the closing tag must always contain a forward slash before the tag name – </ tag> , this tells the browser that our “command” is finished at this point.
Most of the errors in the layout ( creating the structure of the HTML code ) can occur for the reason that the closing tag is not specified or it is specified without a forward slash / . If you do not specify a forward slash, then the browser perceives the tag as opening, not closing. In the event that you did not specify the closing tag at all, then the browser will not know where your command ends, in order to stop it, which can lead to serious errors, be careful. Fortunately, modern HTML editors make it easier to track down errors of this kind. Proper HTML Structure also helps for SEO.
View (syntax) of a single tag:
<tag> Content
In the modern HTML 5 standard, single tags are written like the start tags for paired tags (the tag name is enclosed in angle brackets < and > ).
I draw your attention to the fact that before the release of the modern standard, single tags required a forward slash in front of the tag name (they were written by analogy with closing tags). Using forward slashes in single tags will not be considered an error, but it is not necessary – shorter code, faster loading.
The main difference between single tags and paired tags is that single tags do not require an end tag after the element’s content. They add single objects to the page, such as an image, or perform some single action, such as a line feed. In HTML, there are significantly fewer single tags than paired tags; by the end of the tutorial, you will know all of them.
Although HTML 5 tags are not case sensitive, I recommend that you write them in lower case. With the help of tags, the browser recognizes the structure and meaning of the text, they tell the browser which part of the document is a heading, where a new paragraph begins, where a list begins, or a table is placed, what needs to be highlighted, what should be moved to the next line, and so on. By analyzing this information, the browser displays each element as we told it.
An example of a simple HTML document:
And so, you and I realized that HTML is the cornerstone, thanks to which any user’s browser will display the page. But what does HTML look like? Let’s take a look at the simple code that makes up almost any information page:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
I want to immediately draw your attention to the fact that browsers ignore tabs and spaces in the document (unless they explicitly indicate this, but more on that later). To make it easier for you to perceive the HTML code in the examples, we will separate tags nested in other tags with tabs (as shown in the example) above.
Now let’s take a closer look at what any HTML page consists of:
DOCTYPE is a declaration that defines the type of a document. The declaration is not an HTML tag, it is only an instruction to the web browser about which version of HTML the document is using. The ! DOCTYPE declaration helps the browser display the web page correctly by knowing both the type and the version of the document.
The <! DOCTYPE html> declaration states that this document uses the fifth version of the Hypertext Markup Language , HTML 5 .
I draw your attention to the fact that the declaration must be indicated as the very first one in your HTML document, before the <html> tag . The <! DOCTYPE> declaration is not case sensitive, but it is accepted to write it in uppercase.
Chronology of HTML versions:
| Version | Html | HTML 2.0 | HTML 3.2 | HTML 4.01 | XHTML | HTML 5 |
|---|---|---|---|---|---|---|
| Year | 1991 | 1995 | 1997 | 1999 | 2000 | 2014 |
The text between the <html> and </html> tags tells the browser to read the document as code written in Hypertext Markup Language. It is the root element of the HTML document and all other elements must be its descendants (nested in it).
The text between <head> and </head> contains information about the document (information about the document that is not visible to the user). The HTML <title> tag must be nested inside this element .
The text between <title> and </title> provides a title for the document. The title of the document must contain important keywords so that search engines can include your page in search results (for specific user queries).
The text between <body> and </body> describes the visible content of the page!
The text between <h2> and </h2> ( heading level 2 ) describes the heading of the second level. Search engines use your titles to index the structure and content of your web pages. Therefore, it is important to use headings to show the structure of the document. How to properly use headings from the first to the sixth level on your pages, we will discuss later in the tutorial in the article ” Basic HTML “.
The text between <p> and </p> defines a paragraph. The content of an element always starts on a new line.
Below is how the above example is displayed in the browser:
