Browsers
Windows 10home

What is the html language.

Social network

Before we start learning CSS, let's remember what the hypertext markup language HTML is actually for and decide how we will use it in the future.

How HTML was used before CSS

The main purpose of HTML (HyperText Markup Language) is to structure information on web pages. Initially, this language was invented precisely for these purposes. But as the popularity of the Internet began to increase, so did the desire of users to somehow diversify and decorate their sites.

Web designers began to look for ways to present information beautifully. Some HTML tags were used for purposes other than their intended purpose, e.g.

. The method of layout of web documents using this tag has become so popular that it even received a separate name - tabular layout. Previously, this was the only way to accurately position elements on a page.

With tabular layout, the web page design was created directly inside the HTML document. Other tags were also used for styling and formatting. What problems did this lead to? Firstly, the HTML code became incredibly large in length, which negatively affected both the weight of the document and its indexing by search robots. Secondly, in order to change, for example, the color of h1 headings on each page of the site, I had to work through each of them manually. All this took a lot of time and effort.

Why do we need HTML now?

Today, thanks to the existence of CSS, it is possible to separate the design of a page from its content, as well as speed up the work process and significantly reduce the size of the HTML document. Those who have been creating websites for a very long time will have to get rid of old habits and learn to perceive HTML only as a markup language intended for structuring and organizing data. It will be easier for beginners to learn new principles of creating web pages due to the lack of views on HTML as a tool for making pages look attractive. CSS is now responsible for this. When creating an HTML document, think only about how to organize the content, not about how to decorate it. Forget about tags that don't structure the page in any way and only change the design, because with CSS you will achieve the same visual effects, but at the same time keep the HTML code clean and free of unnecessary things.

Here are some HTML tags that can (and should) be safely replaced with CSS styles:

  • “decorating”, alignment attributes to tags (color, bgcolor, align, etc.);
  • tag
(when used to layout a web page);
  • tag .

    • HTML tags for structuring

    Use the following tags to structure your pages:

    H1-H6 (heading) The h1-h6 tags are intended to indicate headings. These tags make it very convenient to separate text. To better understand, imagine a book that has chapters and subchapters. The title of a book chapter is h1, subchapters are h2, parts of subchapters are h3, etc. It is better to place title tags sequentially.

    P (paragraph) Tag

      ,
        Used to indicate paragraphs of text.
        OL, UL (ordered list, unordered list) Tags
        ,
        – a convenient tool for marking lists (navigation links, points in the text, sequential list, etc.).
        DL (definition list) Tag
        in conjunction with tags
        used when creating a list of definitions, where
        – name of the definition (definition term), – definition description.
        DIV (division) DIV is a block element that can be used to highlight a fragment of a document, as well as to logically combine several elements. Using CSS you can give a block
        necessary appearance and positioning, but in itself does not change the appearance of the document in any way.

        SPAN (span) Tag its role is similar to

        . But
        ,
    for document layout.

    For browsers to display a web page correctly, you must use the elementin the first line of code.

    In the next chapter, we will get acquainted with CSS syntax and connecting tables to HTML, and also write the first style.

    HTML- stands for HyperText Markup Language, which is the most widely used language for writing web pages.

    • Hypertext refers to the way web pages (HTML documents) are linked. Thus, a link available on a web page is called hypertext.
    • As the name suggests, HTML is a markup language, which means that you use HTML to simply "mark up" a text document with tags that tell the web browser how to structure it for display.

    HTML was originally developed to define the structure of documents, such as headings, lists, paragraphs, and so on, to facilitate the exchange of scientific information among researchers.

    HTML is now widely used to format web pages using various tags available in the HTML language.

    HTML document

    The following example shows an HTML document in its simplest form:

    Document title

    Heading

    Here's the contents of the document...

    Let's save the code in an HTML file document.html using your favorite text editor. And open the file using a web browser like Internet Explorer, Google Chrome or Firefox etc. It should show the following result:

    Tags for creating an HTML document

    As mentioned earlier, HTML is a markup language and uses various tags to format content. These tags are enclosed in angle brackets. Most tags have corresponding closing tags, with the exception of a few tags. For example, tag has a closing tag and tag has a closing tag and others.

    The example above uses the following tags to create an HTML document:

    TagDescription
    This tag specifies the document type and HTML version.
    This tag covers the entire HTML document and mainly consists of the document title, which is represented by the tags ... and the body of the document, which is represented by tags ... .
    This tag represents the title of the document, which may contain other html tags such as , <link>etc.</td> </tr><tr><td><title> </td><td>Tag <b><title> </b> used inside a tag <head>to specify the title of the document.</td> </tr><tr><td><body> </td><td>This tag represents the body of the document, which stores other html tags such as <h1>, <div>, <p>And others.</td> </tr><tr><td><h1> </td><td>This tag represents the title.</td> </tr><tr><td><p> </td><td>This tag represents a paragraph.</td> </tr></table><p>Knowledge of these tags is quite enough to create an HTML document (html page).</p> <p>To learn HTML, you need to know the various tags and understand how they behave when formatting a text document. Learning HTML is easy as users only need to learn the use of different tags to format text or images, thereby making a beautiful web page.</p> <h2>HTML Document Structure</h2> <p>The structure of a typical HTML document will look like this:</p><p>Document declaration tag <html> <head> <title>Tags associated with the document title Tags associated with the document body

    We will learn all the head and body tags in subsequent lessons, now let's see what a document declaration tag is.

    Declaration

    Tag declarationused by the web browser to understand the version of HTML used in the document. The current version of HTML is 5 and it uses the following declaration:

    There are many other types of declarations that can be used in an HTML document depending on which version of HTML is used. We will see more details about this when discussing the tagalong with other HTML tags.

    In this article we will look at the question of what html is and look at the history of its development. Let's talk about how to create a website and whether it is difficult at all. So, let's begin

    1. HTML code - what is it in simple words

    HTML(English: "hyper text markup language" - hypertext markup language) is a special markup language that is used when creating websites on the Internet.

    Browsers understand html perfectly and can interpret it in an understandable way. In general, any page of a site is an html code that the browser translates into a user-friendly form. By the way, the code of any page is accessible to everyone. To view it, right-click and select view source code or press CTRL+U on your keyboard:

    The HTML markup language has gained wide popularity. At the moment, this is the only language with which site markup is created. I want to emphasize the fact that it is markup. The so-called “engine” is created in another programming language (most often PHP), which allows you to create interactive pages (html does not allow this).

    Note

    The attentive reader will note that not all pages on the Internet have the .html extension at the end. For example, there are pages /catalog/list (without any extension at all). This is incorrect, but the browser will be able to understand that this is a web document and display it correctly.

    2. Example and structure of html code

    Below is an example with the structure of a typical html page. Please note that the html code is divided into two areas: the header and the body of the page.

    <span>Page title</span> ... Heading tags (connecting styles, scripts) ... ...
    Site header
    ...
    Left column
    ...
    ...The main part of the site...
    ...
    Right column
    ...
    Bottom of page
    ...

    This code can be edited in any text editor. Most often, notepad++ is used to develop an html website (an advanced editor that highlights tags and shows errors). But it is better to use more advanced editors for working with HTML markup.

    Markup consists of html tags (sometimes written "tag").

    3. What is an HTML tag

    HTML tag- this is one of the html layout elements that is needed for structure. Tags have an opening sign< и закрывающий > .

    For example, . Almost every tag is paired and requires a closing tag. If the webmaster forgets to put the closing tag or does it incorrectly, then the layout will not be valid (see site validation). If this tag is one that holds the “frame” of the site, then the site may “float” (the side column will move down, etc.).

    It is forbidden to close tags out of order in which they were opened. For example

    Read the article for more details about creating an HTML page.

    Hi all!. We will devote the second lesson to the question of what HTML is and how to work with it. In it you will learn about the features of the most popular web programming language and clearly understand its main essence.

    Once you have mastered it, it will be easier for you to move forward and then you can easily (although no, you will still have to work hard) to take on more complex website creation languages, for example PHP. So let's get down to business.

    What is HTML

    HTML (hypertext markup language) is a hypertext markup language in everyday life. The standard markup language for Internet documents on the World Wide Web. This is one of the most popular languages ​​for creating websites. It is also considered the easiest to load in browsers.

    It doesn’t have any complicated tricks like PHP, which, before displaying the page in the browser, first makes a request to the MySql database, and then only displays the content to the user. I won’t go into long verbal preludes about how it was created, because it’s long and not interesting.

    For all these points, the great Wikipedia will help you. We want to learn how to quickly create websites, right? Great! Then let's move on and understand all the intricacies of this web science.

    Basics of the HTML language. Tag concept

    Without knowledge of a solid base you can’t get anywhere; the “material part” (“foundation” of any subject) has not yet been canceled. And we will not deviate from traditions and rules.

    The basics of the HTML language are tags, or to be more precise, a set of tags. They are designated like this<тег>. Tags are always paired and are displayed like this

    <тег>.

    < тег> < / тег> .

    Each of them performs a strictly defined function for display in browsers.

    Some display a picture on the screen, others a link, others are responsible for paragraphs, others make a table, and so on. We can write any text inside them. I like to call them containers, for clarity, so to speak. But there are also single ones, we will study them in the following lessons.

    And also understand one important point. This language uses the Pareto principle, i.e., as in any area of ​​life, activity, or anywhere else, there is the 80/20 rule.

    What does this mean? This tells us that 20% (in our case that's html) of the language does 80% of the work. The logic is that it is not necessary to learn all the tags, since many of them are simply not used or are used very rarely. So in our lessons we focus on the most frequent and important ones. And you did a great job with this!

    HTML Document Structure

    The structure of any html document looks like this:

    Untitled document

    < ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

    < html >

    < head >

    < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" >

    < title >Untitled document< / title >

    < / head >

    < body >

    < / body >

    < / html >

    Now let's describe each point in more detail:

    What is Doctype and its meanings

    The doctype element is used to indicate the type of our web page. This is the so-called “document type declaration” or Document Type Declaration.

    This tag should always appear first on every page. It is a key component of web pages that claim to comply with standards: without it, your code will not pass the validator.

    A web document validator is a computer program that checks the compliance of a document, data stream, or piece of code with a specific format, and checks the syntactic correctness of the document or file (according to Wikipedia).

    There are several Doctype values:

    1. Strict
    2. Transitional
    3. Frameset (with frames)

    I'm using the second option. It is the most convenient to work with because it does not limit the developer. It is confusing for the reader, so what is the difference between them and which is the best one to use?

    I'll explain the difference between them. The transitional version does not strictly comply with W3C validation standards (or in Russian, verification), i.e. the browser will display the contents of a web document the same way, even if it contains outdated, non-recommended and other non-standard code variations. But the Strict version strictly adheres to all standards, that is, in practice, if you forgot to put the corresponding symbol somewhere in the code (for example, a slash /), then when checking you will be given a warning.

    This is what a web document using the strict version looks like:

    Strict compliance with language standards

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    < html xmlns = "http://www.w3.org/1999/xhtml">

    < head >

    < title >Strict compliance with language standards< / title >

    < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

    < / head >

    < body >

    < p > . . . < / p >

    < / body >

    < / html >

    I advise you to use the second option and not worry, as it is the most convenient. Now we will look at the other components of our page.

    - or “head” tag, it contains the most important tags that explain to the browser what needs to be done on the page and what mechanisms to launch. It defines a web document and its content. It often contains various scripts that launch various features on the page and there is also an important “container” for SEO promotion - a tag

    When creating a website, the first thing you need to imagine is how the web page is formed. This is a kind of “foundation” in website building. Therefore, before delving into more complex website creation technologies, it is recommended to have at least basic knowledge of HTML. In this lesson we will get acquainted with HTML, let's sort it out HTML document structure and use practical examples to consolidate the knowledge gained.

    What is HTML?

    HTML stands for HyperText Markup Language. This language is responsible for exactly how hypertext will be displayed on site pages. Now let's figure out what hypertext is? It's no secret that a single web page can contain a lot of different types of information, be it text, some tables, graphs, videos, audio, etc. So, all this information can be called in one word - hypertext.

    Note that HTML is a markup language, not a programming language. This language does not have any logical functions and it is impossible to perform any mathematical calculations in it. HTML pages have extension .html or .htm and are processed by browsers - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera, etc.

    Now let's figure out how the browser understands what and how to display on a web page? It's very simple. The hypertext markup language HTML has built-in commands called tags. It is by them that the browser is oriented.

    HTML Document Structure

    Any HTML document (web page) must have a certain structure. This will avoid possible problems when opening pages in browsers. As an example, let's look at a page that contains the following HTML code:

    HTML Document Structure ...

    Let's look at what is included in this structure in order:

    1. The first thing that goes in an HTML document is the version indication (first line). For correct operation, this line should be specified when laying out the web page.

    3. Then comes the area for the top of the site (header). The tag is used for this . In the header we indicate the name of our page by placing the page title between the tags And. Next, the encoding of the HTML document is indicated (fifth line). This is done to display the Cyrillic alphabet correctly. Closing the header area with a tag.

    4. Meta tag “description” - a summary of the page, intended for search engines. This tag is important for search engine optimization and must be filled out.

    5. Meta tag “keywords” - keywords that may appear on the page. This tag is also intended for search engines. This tag is rarely used nowadays.

    6. The body of the page opens with a tag and closes, accordingly, with the tag. The body of a web page usually contains the main content - text, video, audio and other information.

    Thus, we have answered the question of what is HTML and studied the structure of an HTML document. The information received in this lesson are basic concepts, you cannot do without them. We will talk about more complex things in other lessons.