HTML is, without a doubt, the main Internet language that originated with it. One way or another, he is involved in the creation and operation of each web page on the World Wide Web. Without understanding what HTML is and how it works, it is impossible to turn a continuous stream of text, which is any document, into a structured, beautiful and user-friendly site.
HTML and the World Wide Web
The abbreviation is derived from the English phrase HyperText Markup Language. The translation fully explains what HTML is, a hypertext markup language. It appeared at the dawn of the development of the Internet and was intended for the design of web pages containing scientific and technical documentation, which especially needs proper design.
Tim Berners-Lee, the creator of the language, suggested that with its help it would be easy to create simple but understandable documents for exchange between scientists from different cities and countries. He developed a set of descriptors - elements that format text. Now we know them under the name "tags".
For HTML text to display correctly, it needs to be processed. This is done by special programs - browsers. They receive the marked-up page, interpret the tag tags and display the text in the form in which the user should see it.
A very important part of the language, which is clear even from its name, is the support of hypertext. This means that some HTML pages may contain links to others. The cross-reference system was of particular importance for scientific articles, allowing you not to delve into the explanation of a complex term, but simply send the reader to the appropriate chapter if necessary.
Language development
As time went on, the simple set of tags that HTML was at the beginning of its existence has grown and grown. Now you can embed multimedia content in a page, create tables, and manage the location of images.
The spontaneous expansion of the language should have been curbed and taken under control; certain standards were needed.
1995 - the time of adoption of the third version of the specification and a turning point in the fate of coders. Modern browsers at that time could no longer ensure the implementation of accepted standards, improvisation and stratification began. Each Internet browser had an opinion about what HTML is and how to handle specific descriptors.
Fortunately, at present, the main contradictions between browsers have been smoothed out, saving front-end developers a lot of energy and nerves.
HTML5
Actual for 2018 is the fifth HTML standard, a draft of which appeared at the end of 2007. He introduced many new elements and attributes, placed a special emphasis on the semantics of web pages and their accessibility for users with disabilities.
The language continues to actively develop and improve.
HTML basics
The main HTML structures are descriptors, or tags, and entities. Plain text processed with their help turns into a web document.
Entities of the hypertext markup language are mnemonic codes for Unicode special characters that are not found on regular keyboards.
Entity examples:
| & lt; | opening angle bracket |
| & gt; | closing angle bracket |
| & larr; | thin left arrow |
| & uarr; | thin arrow pointing up |
HTML entities begin with an ampersand, end with a semicolon, and contain an easy-to-remember character code. They are important because they allow you to display characters that cannot be directly written in the HTML code.
Such signs include, for example, angle brackets. In the hypertext markup language, they serve as tag identifiers, surrounding the handle name on both sides.
HTML tags
Tags are the basic structural components of a web document. They are containers of opening and closing parts and the contents located between them.
Tag example:
<i>, </i>
This is the HTML descriptor i that defines the italic font style. Letter i is the first letter of the word italic. He has:
- opening part
<i>; - closing part
</i> , characterized by the presence of a slash; - content that after parsing by the browser will be displayed in italics.
Most descriptors have the same structure, but there is a small group of empty tags.
, <br> <br> .
The tag <br> after parsing will be replaced by line break. It has no content, so no cover is required.
The following tags are also empty:
<hr> , denoting a thin gray line separating blocks of text from each other;<input> , representing a whole family of interactive form elements;<img> attaching an image file;- a number of service tags -
<meta> , <link> .
Descriptors can be nested within any number of levels. The exception is only empty tags, which cannot contain content.
Tag attributes
Of great importance when creating web documents are attributes that are placed in the opening element of the tag. A descriptor may or may not have one or more properties.
In most cases, with the help of attributes, some aspects of the element’s behavior are clarified, and sometimes they can radically change the visual representation. A number of properties are used for official purposes, allowing you to manage HTML tags from CSS or JavaScript.
Setting Attribute:
: <input type="checkbox" name="red"> <input type="checkbox" name="yellow" checked> <input type="checkbox" name="green">
Here is a group of three interactive <input> elements. The type attribute determines their display in the form of checkboxes, name contains the name of a specific field, and the checked property, which has no value, makes the second input selected by default.
There are universal attributes that can be defined for any descriptor, and specific attributes specific to specific tags.
Universal properties include: id, class, title.
The specific ones are the aforementioned type, checked, as well as src, href and a number of others.
Syntax Features
When an HTML page is received, the browser analyzes it and throws away everything unnecessary. So, in most cases multiple spaces and line breaks will be ignored.
The two code snippets below are completely identical for the browser, although one of them contains many consecutive spaces and is divided into lines, and the second is not.
<p> Lorem ipsum <i>dolor sit </i> amet. </p> <p> <b>doloribus sunt,</b> ad provident. </p> <p>Lorem ipsum <i>dolor sit</i> amet.</p><p><b>doloribus sunt,</b> ad provident.</p>
Hyphenation and tabulation can be used to visually structure the code, but for the browser they have no meaning. For some cases, when it is necessary to preserve the original text format along with spaces and indents, there are tags that display their content without preliminary processing by the browser, for example, <pre> .
HTML is a case-insensitive language. This means that tags, names and attribute values can be written in lowercase or capital letters, and both options will be equally correctly processed by the browser. If desired, you can even use combinations of capital and small letters, but this interferes with the normal perception of the code.
Having familiarized yourself with tags, their properties and syntax, you can move from the basics of the HTML language to the structure of the HTML document as a whole.
HTML document building
Any web page must have a certain framework in order for the browser to display correctly.
The mandatory structure of an HTML document includes:
- Doctype ad to ensure proper browser handling
- html-wrapper of the whole page;
- dedicated
head part.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
The HTML5 standard does not require the presence of a body tag in a document, but it is recommended that you still use it to indicate a content area.
Important but optional service descriptors are:
- title containing the page title;
- meta tags that define the encoding, seo information, http headers and other important settings.
<head> <title> </title> <meta charset="utf-8"> <meta name="description" content=" "> </head>
Otherwise, the structure of the HTML page can be any. Its features depend on the specific project.
The main rule that must be observed in any web document is the correct nesting of tags. First, the handle is closed, located at the deepest level of nesting, and then alternately all the external ones.
<body> <main> <article> <p> </p> </article> </main> </body>
Semantic structure
As specifications evolve and become more complex and new descriptors appear, technologies for creating web documents have changed. Initially, the texts went in a continuous stream, dividing only into paragraphs. Then came the era of tabular layout, which allowed placing blocks on a page in any configuration, for example, columns.
With the development of CSS, the use of tables was gradually abandoned, because the styles made it possible to style the document as you like.
The new HTML standard welcomes semantics in the structure of an HTML document. This is achieved by using semantic tags such as header , footer , main , article , nav , section and others.
The main language of the Internet is very simple. Anyone is able to understand what HTML is and successfully apply this knowledge by creating their own web pages.