HTML is a markup language that lies at the heart of web development and helps organize the content of web pages. No site is complete without HTML, and yet it’s pretty easy to learn – you can get the basics down in just a couple of days.
In the article, we will analyze what HTML is used for, why popular editors will never replace HTML layout, and how knowledge of the basic principles of the markup language helps different specialists in their work.
What is HTML
HTML , hypertext markup language – hypertext markup language . Hypertext is a text that does not have to be read linearly from beginning to end, you can go to those fragments that are interesting and relevant in a particular situation. To do this, a set of documents are connected by hyperlinks, along which you move between fragments. A hyperlink can lead to another page or section of text, or to another document.
Hypertext in literature – a reference with internal and external links that lead from one section to another or mention sources
Hypertext on the Internet – a web page that allows you to navigate from one part of the page to another, search for keywords and is linked by links to other pages
That is, web pages are hypertext, and HTML is the markup language for web pages.
The markup language is used to write code that helps the browser understand how to display the loaded site. The program code can be written in a regular text editor and saved in the .htm or .html extension – this will be the HTML document
The HTML document is either on the server or on a local disk. The web browser opens this document and translates its code into the interface that we see on the monitor screen.
The page code is available to any user. To view it, press the ctrl + u key combination or right-click and select Show Page Source Code.
You will see a canvas of text and a repeating element – pieces of text enclosed in angle brackets: <>.
These tags are the main means of marking up content on a page: texts, images, tables, etc. Together with a piece of content to which they relate, tags form HTML elements – “bricks”, structural units of the site.
- <head> – contains service information about the page
- <link> – connects a document to an external resource
- <img> – carries an image
We’ll tell you more about how HTML works a little later, but for now we’ll figure out who needs it and why.
Why HTML is needed
Every time you search for information in a browser, you do not just navigate between pages, but download documents with their source code. This is how it works:
- You enter the site address or search term in the browser bar.
- Servers owned by Google or Yandex create a new document – a page with search results. This document is written in HTML.
- Your browser receives the document, parses the tags, and displays the search results.
- If you click on a link on a page, the browser will request a new document from another server, and an HTML document will be sent back in response.
HTML is the main language of the Internet and most documents are written in it. Almost every paragraph of text on web pages is wrapped in <p> … </p> tags, and every link is wrapped in <a> … </a> tags.
If there was no markup language, I had to come up with another way to exchange documents on the network. As a result, we would get the same HTML with a different name.
HTML allows you to create and edit web pages, borrow other people’s layouts and code snippets in your sites. Knowledge of the language is useful for layout designers, programmers and content managers.
HTML for content manager
Content managers manage the content of web pages – they publish notes on a blog, post photos of products, descriptions for them, etc. its readable. But even when using the visual editor, problems can arise.
Even minimal knowledge of HTML will help the content manager to see the error in time: when the text ran over the illustration, went off the screen, etc. Knowing the markup language, the content manager can find garbage characters that got into the code when copied from a text editor or google dock , and restore the structure of the page.
HTML for the programmer
In small companies, programmers can perform the duties of a content manager. In this case, having developed the site, they independently fill it with content. Basic knowledge of HTML will help you structure your content and make it easier to read.
But sometimes basic information is not enough. To create a responsive site with many elements, you will need more in-depth knowledge, so you will have to involve a layout designer in the project.
HTML for the layout designer
HTML is the main tool of the layout designer. The layout designer brings the layout into the code so that the browser can display what the designer came up with. This is true for custom designs that cannot be implemented with ready-made CMS templates.
To understand how a layout designer works with code, let’s figure out how the HTML language works.
How HTML works
Any HTML document consists of a tree of HTML elements. We already know that HTML elements include tags and the content they refer to. It’s time to figure out in more detail what tags are, how they work and what they are.
Tags:
Tags are control characters. They tell the browser where and what element to display on the screen, set the size, color and font of the text, add links, images, tables, etc.
A tag consists of angle brackets and an enclosed tag name:
<tag name>
Tags in HTML are divided into paired and single tags. Let’s take a closer look at their features.
Paired tags. Most of them are HTML tags. They consist of opening and closing tags, between which the piece of content they describe is enclosed. Thus, the paired tag forms a container. The browser will recognize and display this element as the tag name tells it.
- <title> title </title>,
- <body> HTML document body </body>,
- <b> bold </b>,
- <i> italic font </i>,
- <table> table </table>
Add a slash in front of the opening tag name and you get a closing tag.
Single tags. They do not have closing tags, they do not tell the browser the characteristics of the content, but they tell you what function to perform with it.
- <br> – move text to a new line,
- <hr> – insert a dividing line,
- <img> – insert an image
Tags are not case sensitive – you can write <STRONG> or <StRoNg>. But in practice, they always use lowercase letters – <strong>.
Artibuts
Attributes are used to add additional information about a tag or change its default behavior. In the document, it is written like this:
< tag attribute_name = ” attribute_value ” >
One tag can have multiple attributes.
In order for browsers to display web pages correctly, it is important to follow the principles of using tags when creating HTML documents.
Principles of using tags
For tags of any type, there are certain rules for their use.
Nesting tags . You can nest tags within each other so that they affect the same page element. This is useful when you want to set multiple properties for a single piece of content.
You can ask the browser to display text in bold and italic at the same time
<b> <i> bold italic </i> </b>
Please note that nested tags are like nesting dolls: a tag cannot be closed until another tag nested within it is open.
Correct: <tag1> <tag2> <tag3> … </ tag3> </ tag2> </ tag1>
Wrong: <tag1> <tag2> <tag3> … </ tag1> </ tag2> </ tag3>
Briefly about HTML
HTML is at the heart of web development; no website can do without it. The language allows you to organize the content of web pages, helps you get into programming smoothly and makes it easier to learn other languages.
You can learn the basics of markup language, which is enough to create simple pages, on your own in a couple of days. But when coding sites with a complex design and many elements, you need to be sure that everything is displayed correctly in different browsers on different devices. And many have problems with this, so employers appreciate layout designers who know how to write responsive sites.
