HTML Basics for Beginners

This article is not intended to be an exhaustive guide to the HTML markup language. It describes the basics of HTML – the basic principles, concepts and definitions of this technology, having mastered which, you can easily move on in the study of HTML coding.



HTML Basics for Beginners – Video TutorialWatch a Tutorial on YouTube
Creating a content site on Jekyll from A to Z
To study the lesson, download the archive with the necessary files.

HTML is a document markup language. Correct pronunciation – H T Em El.

Have you ever worked in a Word document editor or similar office applications? You probably know that this type of editors has rich capabilities for editing text, positioning elements, inserting pictures, etc.

Why, you ask, write an HTML article about word processors? Here’s why. If you understand what is an office editor? It is an application for editing and displaying documents.

The key word here is document. That is, we create, edit and view a document in some program, in this case, in an office editor. If you open such a document in a simple text editor, for example, in Notepad, we will see a lot of strange symbols and signs. This mess of symbols is incomprehensible to mankind, but computers can understand it. Thanks to this internal language, the Word document acquires a certain structure and appearance in the editor itself, and the document appears before us in all its glory with formatted text and pictures in its place.

HTML is a document markup language for the browser. Word here is the browser, and the document is the HTML page. This is the very foundation of HTML technology, the understanding of which is necessary in order not to confuse the markup language of web documents with programming languages. The name speaks for itself – with the help of HTML we mark where the element, picture or text will be shown on the page, and in what order they will follow each other.

Yes, typing and formatting text in office applications has nothing to do with programming. But an observant reader will notice an important detail – in a word processor we type, edit and format text and images using visual buttons and menus, but why is HTML code written by hand? Why learn so many technical details of writing markup for a document?

In fact, there are many editors with which you can create and edit HTML pages by analogy with Word. That is, the source HTML code is hidden for us and we don’t go into it.

A sort of Word for HTML. Such visual editors are called:

WYSIWYG Editors – What You See Is What You Get. That is, if translated into Russian: what we see is what we get.
I call them “vuzivugi”. Although this is phonetically not correct, it clearly demonstrates the meaninglessness of this invention. Beginners very often use such editors to create their first sites. Of course, this is convenient – you do not need to delve into the study of tags, design styles and other, at first glance, unpleasant and complex things. The editor itself automatically converts our actions into HTML code.

But, as they say, nothing just happens. More specifically, this approach has very serious drawbacks. What prevents everyone from using visual editors for HTML pages design? The fact is that the pages formed in this way have, as a rule, a lot of superfluous code, a lot of errors from a semantic point of view. Now, of course, there are no problems with high-speed Internet connection and the difference in page size of 400 kb and 100 kb is not significant for speed, however, an optimized and correctly written HTML code eliminates many problems and gives a lot of advantages, namely:

Competent HTML code has a positive effect on search engine optimization, the speed of crawling a site by a search robot. The generated kilobytes of code are not acceptable here and even harmful;
The HTML code generated by the WYSIWYG editor has many semantic errors. That is, the tags generated by such an editor are used for other purposes, where it is necessary to use, for example, <ul> lists, the editor will generate another tag that we do not need. Depends, of course, on the editor, but here we mean complex solutions for creating sites, and not simple editing of text in the text area using WYSIWYG tools.
A lot of unnecessary tags are generated and the document structure is bloated. Let’s say you move an element in such a program first to the right, then to the left, then to the center – every action leaves a trace in the original HTML code. An editor is a program and it cannot know what exactly you want to get as a result, it generates tons of code taking into account all possible options for the document’s behavior in the browser.
As a rule, editors for visualizing HTML code quickly become outdated. And due to the lack of interest from professionals, they generally lose support.