What is HTML? HTML document structure. What tags determine the structure of an html page

Hello! You will NOT find anything useful in this lesson if you are ALREADY familiar with the formation of the structure of an HTML document. For those who are NOT familiar, I will show the correct (valid) structure of an HTML web document, including for a WordPress site.

General correct structure of an HTML document

First of all, without much preamble, the general structure of any HTML document should be like this:

If you remove the explanations that I showed after each tag, then the simple structure of the HTML document looks like this

Current DTD document type

Current document type ( Document Type Definition, DTD) is necessary for the browser to understand how to interpret the current web page, because HTML language exists in several versions.

In addition, there are other markup languages ​​other than HTML, such as XHTML.

Note: XHTML is EXtensible HyperText Markup Language, which we translate as an extended hypertext markup language.

XHTML is similar to HTML, but the syntax is different. To prevent the browser from getting confused between languages, you need to show it in the first line of code, the type of the current document is DOCTYPE.

The concept of a tag in HTML

Have you noticed that the entire structure of an HTML document is specified by certain tags - certain words enclosed in angle brackets.

The word enclosed in angle brackets in an HTML document is called a tag. Each tag has its own meaning, determined by markup rules.

• Tag means the title of the html document. Head tags store information for browsers and search engines. Including in the form of meta tags;
• The tag means the main content of the html document. It is text, images, Java scripts Script, etc.;
• The [p] tag is a block element and always starts with new line. It means the main content paragraph of an html document.

Important! All HTML markup tags must be paired. That is, the opening tag<тег>, must be closed by a closing tag, with a forward slash .

Heading and subheading tags h1-h6

To improve the structuring of document text, as well as improve the SEO of web pages, there are additional body content tags. They are called heading and subheading tags from h1 to h6, 6 in total.

They are just like [p]-paragraph tags, which allow you to highlight semantic sections of the text, and allow you to divide the text into semantic parts, giving each section its own title.

Tags h1—h6 have a subordinate dependency, the lower level of this subordination is a paragraph.

It is important to note that breaking the subordinate dependency of tags h1—h6—p will not disrupt the display and validity of the document, but will only worsen its optimization for search engines.

An example of a developed HTML document structure

Let me give you an academic example of a more developed HTML document structure:

Main title

Main title

First subtitle

Main title

Second subtitle

First minor subheading

HTML 5 structure

In HTML 5, the document structure should be like this:

This is a declaration that shows that this document is in HTML5;

this is root HTML element pages;

An element with meta tags about the document;

Website about cars.

Car classification

Passenger car;

Cargo;

SUV;

Buggy;

Pickup;

Sports;

Racing.

When opening this file it will look something like this:

For now, our page contains only paragraphs.

To align text in a paragraph tag

Supports attribute align. It can take one of four values:

• left— text alignment to the left;
• center— text alignment to the center;
• right— text alignment to the right;
• justify— width alignment, i.e. align text simultaneously to the right and left. To do this, the browser places spaces between words.

By default, the align attribute is left. An example of using the align attribute:

This text in a paragraph on an html page will be left aligned!

This text will appear in the center of the page in the browser!

This text will be right aligned!

And the browser will align this large piece of text in width, i.e. simultaneously on the right and left edge! To do this, the web browser will insert additional spaces between the words and the paragraph will take on a neat appearance that is easy to read!

And this is how it will be displayed in the browser:

Headings in HTML

Headings are used to highlight sections of text on a web page. There are six levels of headings in html. The most top level is level 1 - tag

, and the lowest is level 6, tag

. Tags

—

are block-level page elements. The contents of the first level heading are displayed in the largest bold font, and the last sixth level headings are displayed in the smallest font.

The syntax for creating headers is:

First level header

Second level heading

Third level heading

Fourth level heading

Level 5 heading

Level six heading

Result:

Headings also play an important role in website promotion, since search engines add ranking to the text if it is located inside the heading tag.

Let's add headers to our page:

Website about cars.

Welcome to our automotive website. Here you will find many interesting and useful articles about cars, their technical characteristics and features.

In scientific language, a car is:

A mechanical motorized trackless road vehicle with at least 4 wheels.

Car classification

Cars are of the following types:

Passenger car;

Cargo;

SUV;

Buggy;

Pickup;

Sports;

Racing.

And we see that on our page, in addition to paragraphs, there are headings in large bold font:

Tags

-

, like the tag

Use the align attribute to align text. When using this attribute, everything is the same as with the tag

Numbered and bulleted lists in HTML

A list is used to form a numbered or unnumbered list of any phrases or meanings. A list with numbered items is called numbered, and with unnumbered items - marked.

In bulleted lists, items are marked with markers that are placed to the left of the list items. The Web browser displays the list indented to the left and automatically places the necessary bullets or numbering. Lists and their items belong to block elements of a Web page.

Any list in HTML is a set of elements, each of which is placed inside a tag

. Then all the elements are placed inside the tag

, if you need a bulleted list, or inside a tag
, if you need a numbered list.







Bulleted list:




• first point.


• second point.


• third point.

Numbered list:



1. the first item in a numbered list.


2. second item in a numbered list.


3. third item in a numbered list.






And they look something like this:



Bulleted lists can use different types of bullets. To determine the type of marker in a tag

is added type attribute if we want to set the type of marker for all list elements or add the same attribute to the tag
• if you need to set the type of marker for a specific element. The type attribute can take the following values:
  • disc — filled circle;
  • circle - circle;
  • square - square.

  By default, the type attribute is disc. Usage example:

  
  
  • Point 1
  
  
  • Point 2
  
  
  • Point 3
  
  
  
  
  
  
  • Point 1
  
  
  • Point 2
  
  
  • Point 3
  
  
  
  
  
  
  • Point 1
  
  
  • Point 2
  
  
  • Point 3
  
  

  Browser display:

  

  A numbered list also supports a type attribute, which can be used to specify the following bullet types:

  • A - capital Latin letters;
  • a — lowercase Latin letters;
  • I - capital Roman numerals;
  • i — lowercase Roman numerals;
  • 1 - Arabic numerals.

  By default, in a numbered list, the type attribute sets the markers to Arabic numerals. In addition to the type attribute, a numbered list supports start attribute, which specifies the number from which the list will begin. In the HTML5 specification, numbered lists now have reversed attribute, which reverses the numbering order . Those. instead of 1, 2, 3, the list will be numbered 3, 2, 1. But the reversed attribute is still supported by a very small number of browsers.

  Lists can be placed inside each other, creating nested lists. Nested list placed inside elements

• external list:
  
  
  • first point.
  
  
  • second point.
    
    
    
    • the first item in the nested list.
    
    
    • second item of the nested list.
    
    
    • third item of the nested list.
    
    
    
    
  
  
  • third point.
  
  

  And in the browser:

  

  In HTML there is a third type of list - which is a list of terms and their definitions. This list is specified using a paired tag

  . “Term - definition” pairs are placed inside it. Terms are enclosed in a paired tag

  , and definitions - in a paired tag

  :

  
  

  Term 1

  
  

  Definition 1

  
  

  Term 2

  
  

  Definition 2

  
  

  Browser display:

  

  There is a car classification paragraph on our Web page. Let's make this classification using a bulleted list:

  
  
  • Passenger car;
  
  
  • Cargo;
  
  
  • SUV;
  
  
  • Buggy;
  
  
  • Pickup;
  
  
  • Sports;
  
  
  • Racing.
  
  

  And let's see the result:

  

  Horizontal lines

  To separate or additionally highlight blocks of text in HTML, there is a single HR tag - horizontal line. This is what it looks like in html code:

  First paragraph

  
  

  ---

  
  

  Second paragraph

  And this is how it is displayed:

  

  The HTML horizontal line stretches horizontally across the entire width of the Web page and is one or two pixels thick, depending on the browser used.

  Using attributes you can set the appearance of a horizontal line. Tag

  ---

  supports the following attributes:

  • align — determines the alignment of the line;
  • color — sets the line color;
  • size — sets the line thickness in pixels;
  • width - sets the line width in pixels.

  Let's insert a horizontal line into our WEB page. Let's make it green, 1 pixel thick and 320 pixels wide:

  Website about cars.

  
  

  Welcome to our automotive website. Here you will find many interesting and useful articles about cars, their technical characteristics and features.

  
  

  In scientific language, a car is:

  
  

  A mechanical motorized trackless road vehicle with at least 4 wheels.

  
  

  ---

  
  

  Car classification

  
  

  Cars are of the following types:

  
  

  
  
  • Passenger car;
  
  
  • Cargo;
  
  
  • SUV;
  
  
  • Buggy;
  
  
  • Pickup;
  
  
  • Sports;
  
  
  • Racing.
  
  

  The result will be something like this:

  

  HTML document structure. Let's start work.

  Where does HTML begin?

  In order for a text file to turn into an HTML file, changing its extension from ".txt" to ".html" is not enough. We must follow the “first line rule”:

  Every HTML document that meets any version of the HTML specification must begin with an HTML version declaration line !DOCTYPE, which usually looks like this:

  This line will help the browser determine how to correctly interpret this document. In this case, we are telling the browser that HTML conforms to the international specification version 3.2, which, although not new, is, unlike later versions, a full-fledged, widely accepted standard without any ambiguities. As you can see from the example, the shortest HTML document literally consists of one line.

  Example of the shortest HTML document:

  Where does the work begin?

  In fact, it can't be done with just one line. After declaring the version and type of the document, you need to indicate its beginning and end. This is done using a container tag . It should be noted that any HTML document is opened with the tag and they close it too.

  Then, between the tags And The title and body of the document should be placed. That's it! A start has been made - you have received an excellent preparation. Here's what your basic HTML file should look like before you get started:

  Chew?

  If the above example is explained schematically, it will look like this:

  The diagram shows that the document consists of two main blocks - the “header” and the “document body”. The title is defined using the element HEAD , and the body is an element BODY .

  The title contains "technical" information about the document, although most often it is used only to indicate its title (see element TITLE ).

  The body of the document is the holy of holies. It contains everything that is displayed on the page: text, pictures, tables. Accordingly, we conclude: most of your HTML experiments will be carried out in the space between tags And

  (HTML 1.0) – Comment ()

  Used to create comments in any part of the document. Everything that's inside, be it an element or text, will be ignored by the browser (will not be processed and displayed on the screen).

  Notes:

  	Comments located inside an element TITLE (as, indeed, any other tags) are interpreted as text and will be visible in the document header. In other words, the taginside TITLE does not work.
  	Don't be lazy to comment on everything you wrote. This magic rule will save you a lot of time when trying to figure out your own creation a couple of months later.

  HTML document title

  Created using element HEAD , between the tags of which elements containing technical information about the document are placed. The header usually comes before the body of the document (see HTML document structure).

  Elements related to the document header:

  		Defines the start and end of the document title
  		Defines the name of the entire document, which is displayed in the title bar of the browser window
  		Defines the base address from which relative links within the document are calculated
  		Used to insert CSS style sheets into a document
  		Describes the relationship of a document with other objects
  		Used to insert metadata

  (HTML 1.0) – Head

  Defines the start and end of the document title. Is a container for elements containing technical information about the document. ( TITLE ,BASE ,STYLE ,LINK ,META ).

  (HTML 2.0) – Title

  Specifies the name of the entire document. The name is usually displayed in the title bar of the browser window. This item required for any HTML document and can be specified at most once.

  (HTML 3.2) – Base URL

  Specifies the current document's base address (URL), which will be the starting point for calculating relative URLs within the document. The element does not have an end tag. At least one of the attributes must be present.

  Attributes:

  HREF– defines the base address (URL) of the current document.

  TARGET– defines the frame name that will be used in hyperlinks by default. This may come in handy if you want to open all the links in a document in a different frame.

  (HTML 3.2) – Style

  Used to insert a style sheet (CSS – Cascade Style Sheet) into a document.

  Attributes:

  TYPE– required attribute. Specifies the MIME type of the style block being inserted. Typically, the value of this attribute is "text/css".

  TITLE– specifies the name of the style sheet to be created. Required if you are going to use multiple elements STYLE in one document. In this case, the browser must ask the user which of the suggested styles will be applied to the document.

  (HTML 2.0) – Link

  Element LINK describes the relationship of a document with other documents on the site, indicating its place in the hierarchical structure of the site. The element does not have an end tag. The header can contain multiple elements LINK.

  Attributes:

  HREF– defines the URL of the object.

  REL– determines the type of relationship between the current document and the object defined by the HREF attribute. Possible values:

  stylesheet– points to a file containing the style sheet (CSS) for the current document. The browser will load the css file from the address specified in the HREF attribute and apply it to the current document (see also the element STYLE ) home– points to the home page of your site toc, contents– point to the file containing the table of contents of this document. index– points to a file containing information for index searching of the current document. glossary– points to a file containing a list of terms related to the current document. copyright– points to a page on the site that talks about its creators, copyrights, etc. up, parent– points to the “parent” page (a document that is one step higher in the hierarchical structure of your site). child– points to a “child” page (a document that is one step lower in the hierarchical structure of your site). next– indicates next page in the sequence of documents (for example, the next page of an electronic catalog, documentation or dictionary). previous– points to the previous page in the document sequence. last, end– indicates last page in the sequence of documents. first– indicates the first page in a sequence of documents. help– points to a page with help (eg for navigating your site).

  TYPE– specifies the MIME type for the object specified in the HREF attribute.

  Notes:

  (HTML 2.0) – Meta

  Element META used for a technical description of a document, which is metadata in the form of a name-value pair. With the help of this element, additional useful information is introduced into the document title, invisible to the user, but sometimes simply irreplaceable for the correct indexing of your page by search server robots. The element does not have an end tag.

  Attributes:

  NAME– defines the name of the meta entry. There are many predefined names, some of which you can see in the example below.

  HTTP-EQUIV– defines the name of the meta entry. Almost similar to the NAME attribute, but is used only if it is necessary to transmit additional information in the HTTP header.

  CONTENT– assigns the value to the meta entry defined in the NAME (or HTTP-EQUIV) attribute.

  Frames are used to split the browser window into several areas, each of which represents a separate HTML document (frame). As a rule, frames are used to facilitate site navigation, create navigation menu. However, most developers avoid using frames, and for good reason. Try to use frames only when really necessary.

  

  Elements for creating frames and working with them:

  Notes:

  FRAMESET

  (HTML 4.0) – Frame Set

  Defines the frame (window) structure of the document: the size and location of frames on the page. Created instead of document body (that is, the element BODY not used in the document). Opens and closes a list of frames defined by an element FRAME . Between start and end tags other than elements FRAME And NOFRAMES there may be other elements FRAMESET. That is, the element FRAMESET supports nested frame constructs.

  Attributes:

  ROWS– determines the number and size of horizontal frames (line frames) in the browser window. The value is a comma-separated list of frame sizes. Methods for setting dimensions:

  As a percentage of the height of the browser window's client area. For example: "30%,30%,40%"; in the form of a “*” (asterisk) sign, indicating that the frame occupies all the free space of the browser window that is not occupied by other frames with explicitly specified sizes. For example, the asterisk in the entry "25%,25%,*" is equivalent to 50%; in pixels. For example: "75,*";

  All three methods can be combined. For example, "25%,40,*" will split the screen into three horizontal frames, the first of which will be a quarter of the browser window high, the second 40 pixels high, and the third will take up the entire remaining area.

  COLS– determines the number and size of vertical frames (column frames) in the browser window. The value is a comma-separated list of frame sizes. Dimensions are set in the same way as in the previous ROWS attribute.

  BORDER– defines the width of frame borders in pixels. This attribute only works in Netscape browsers;

  FRAMEBORDER– determines the presence of frames for the contents contained inside FRAMESET frames. Possible values:

  Yes– display frames; No or 0 – do not display frames;

  Netscape browsers do not fully support this attribute and use the BORDER attribute to globally determine the border width.

  FRAMESPACING– defines the distance (the so-called “gray area”) between frames in pixels. This attribute is required to create borderless frames.

  Note:

  (HTML 4.0) – Frame Defines a frame and its properties within FRAMESET-structures. (see item FRAMESET ) Attributes:

  SRC– required attribute. Specifies the address (URL) of the HTML file displayed in this frame.

  NAME– defines the name of this frame, which will be subsequently used to refer to it from other documents using the TARGET attribute (see element A ). The value must be any name without spaces using Latin characters and numbers. The name must not begin with numbers or special characters.

  MARGINWIDTH– defines the width (in pixels) of the left and right margins of the frame. If the attribute is not specified, the browser will automatically determine optimal size indentation.

  MARGINHEIGHT– defines the width (in pixels) of the top and bottom margins of the frame. If the attribute is not specified, the browser will automatically determine the optimal indentation size.

  SCROLLING– determines the presence of scroll bars for the contents of the frame. Possible values:

  yes– display scroll bars. no– do not display scroll bars. auto– display scroll bars if necessary (if the document specified in the SRC attribute does not fit in the frame).

  NORESIZE– does not allow you to resize the frame. This attribute is a flag and does not require a value.

  FRAMEBORDER– determines the presence of frames on the frame. Possible values:

  yes– display frames; no or 0 – do not display frames;

  Netscape browsers do not fully support this attribute and use the element's BORDER attribute to globally determine the border width FRAMESET.

  Example (index.html file):
  	... Your browser does not support frames ...

  This will split the browser window into three frames as shown below. Moreover frame1.html will have a width of 265 pixels, and frame2.html– height 165.

  

  NOFRAMES

  (HTML 4.0) – No Frames

  Anything between the start and end tags of a given element will be rendered by the browser unless it supports frames. Element NOFRAMES has no attributes and must be inside an element FRAMESET .

  Example:
  	Your browser does not support frames. Ordinary, right?

  You will find out what the minimum structure of an HTML document should be. We will analyze each of its necessary elements in detail and with examples. We’ll also talk about how to properly create files and website pages.

  HTML Document Structure

  Let's look at the structure of the html document to understand how everything works. You will find out what frame must be present on the page for it to be considered valid ( correct).

  To create any web page, it must have minimum set tags They are located in the example below.

  How to create a website on the Internet

  The browser itself interprets all these tags and displays them in one form of information for the user. You yourself have noticed that when you go to the site, these elements are not displayed on the screen. You only see the pretty wrapper that the browser displays.

  
  Visual example html pages

  DOCTYPE tag

  The DOCTYPE tag always comes at the very beginning of the web page. It is required to indicate the type of the current document. And besides this, the browser understands which version of html is used.

  IN latest version 5 it looks like this:

  HTML tag

  Is a container that contains all the content of a web page. Opening and closing elements in a document are optional. However, good style requires their use.

  Typically, the opening html tag comes second after defining the document using doctype . The closer always comes last on the page.

  This tag tells the browser where our html document begins and ends. Therefore, all other elements ( except doctype) must be nested inside this container.

  head tag

  The head tag is designed to store other elements whose purpose is to help the browser when working with data. Also inside the container are meta tags that are used to store information. It is designed for browsers and search engines.

  

  The head content is not directly displayed on the web page, other than the title tag. He is responsible for the page title.

  In general, this element stores all technical information about the page. For example, the encoding type of the html page. It will tell the browser how best to decode the document. We can also add various scripts here.

  title tag

  head has one required component. This title tag. He is responsible for how it will look html header pages. What you write here will appear in the browser tab.

  Take this seriously!

  For this element, I recommend using a title of no more than 60 characters including spaces. This is necessary so that it does not get cut off search results. And be sure to include meaningful words here. That is, we write specifically what the page will be about.

  Of course, you need to insert keywords and make your name more attractive. Otherwise, you simply risk losing search traffic.

  meta tag

  Another element is the meta tag. It is not paired and is not of particular value. However, most important elements are its attributes.

  

  Thus, using parameters and attributes, a tag can store important information about your page.

  Let me add the charset parameter to the element and indicate the preferred document encoding in it.

  Note how the parameter is specified. We insert it inside the tag and before the right closing bracket. Next, we put an equal sign and indicate the encoding of the document in quotes.

  Be sure to indicate it in your documents. Otherwise, ugly hieroglyphs will appear on your website instead of text ( krakozyabry).

  body tag

  Just below is the body tag. This is the main body of the document. Inside it is the content that is visible to the user. This can be text, pictures, links, videos, and so on.

  Note that the body always comes below the head tag. That is, first there is technical information about the page and only then the main content for the user. But not the other way around!

  There must be an h1 tag inside the body. This is the title of the material. That is, what your article will be called. I recommend making the name no more than 55 characters including spaces.

  html syntax

  It is worth mentioning a little about the html syntax. Immediately try to arrange tags in such a convenient form as in the example above. Of course, you can arrange them in a chaotic order.

  The content of the document is located here and is visible to all users.

  The browser won't care.

  It will display the page correctly anyway. But it will be very inconvenient for you to edit html code pages. Therefore, I recommend not to sculpt and do it carefully.

  Always place individual tags on separate lines. And observe nesting rule. Indent all nested tags one tab from the parent element.

  Material name

  Main text

  That is, the head tag should be indented by one tab relative to the html tag. Body goes on a level with head since it is also nested in the html container.

  In general, for quick and convenient work with the source code, be sure to maintain indentation according to the level of nesting of elements.

  The only exceptions are head and body . They are used only once per page. Therefore, in order not to go too far to the right when there is a lot of nesting, these elements can be made without indents.

  Main text

  If there is a lot of nesting, this method will help save space and not get lost in the html structure.

  As you know, tags can be nested within each other. For example, text and image are in different tags. However, they still have a common parent element.

  If a tag opens, it must be closed. If it is empty and without a burying part, then nothing can be inserted into such a tag.

  It is important to strictly follow the order!

  If another tag is nested within a tag, then the opening part of one tag comes first. Then the opening part of another and so on. Only then should they be closed. But this needs to be done in reverse order. That is, we first close the second tag and only at the end do we reach the first.

  Correct example:

  The content of the document is located here and is visible to all users.

  Incorrect example:

  The content of the document is located here and is visible to all users.

  In addition, several elements can be nested within one tag. But the principle here is the same. First we open it. Then we put some tags there and then close it.

  For maximum convenience, you can additionally use html comments in the code. For example, write down what this piece of code is responsible for. This is very useful during development.

  The comment itself can be either single-line or multi-line.

  Main text

  It is written between structures.

  How to create an html file

  Maybe some of you don't know how to create an html file. There are many special programs for this task:

  • Brackets
  • Notebook
  • Notepad++
  • Sublime Text
  • Atom and others

  

  If you have Windows, then Notepad will already be available by default. But they are not convenient to use. I recommend using the free one first. html editor Notepad++ pages. It has many features for convenient work with code.

  When you launch the editor, you will already see a new one empty file. Write in it the skeleton of the html page ( frame), which we discussed above. He must always be present.

  How to create a website on the Internet

  The content of the document is located here and is visible to all users.

  You can change the text to suit you. Overall, this will be the most simple html page.

  HTML encoding

  When creating pages, always include the encoding in the meta tag. This is a service tag that is inserted into head .

  In general, this meta element is multifaceted. It can be responsible not only for encoding, but also for many other things. However, we will talk about this in the following articles.

  Now for us it plays the role of an encoding pointer. There is special entry. It tells the browser that this document was created in the encoding utf-8.

  Why do you need encoding at all?

  It's no secret that all over the world people write and speak in different languages. If we create a page and write in Russian, then in Germany they will create and write in German. Other countries already have their own language.

  Previously, when creating an html page, it was necessary to specify the encoding, which we write in Russian. The Germans had to indicate that they were writing in German and so on.

  When we enter a page, the browser already understands what language the site is written in. It also understands what language is used for the text. Accordingly, it tries to display this text content depending on the given encoding.

  Unfortunately, this did not always work out.

  If we visited Chinese sites, we might see black squares or question marks instead of their symbols. That is, the browser simply did not understand what these characters were.

  
  The html encoding is set incorrectly

  As a solution to this problem, the universal utf-8 encoding was created.

  When it became a standard, there was no longer any need to specify a specific encoding for a specific language. It was enough to indicate the universal utf-8 and your site would display normally in all browsers.

  At the same time, working with the database is also simplified. Therefore, keep in mind here that we will always specify the encoding in utf-8. But here you need to pay attention to one more thing.

  Save html utf-8

  For everything to work and the browser to display the page, it is advisable to save the HTML document itself in utf-8. The Notepad++ program helps us very well with this.

  There is an “Encodings” item here. If your encoding is not correct now ( like mine in the bottom picture), then click on the “Convert to UTF-8 without BOM” item.

  

  In this case, your html file will be converted to utf-8 encoding. Save your changes.

  In the lower right corner you will find the inscription “Dos\Windows ANSI as UTF-8”. This means that the document was created in utf-8 mode and the display will be normal.

  And immediately such advice!

  Go to “Options” -> “Settings”. There is a tab here " New document" Immediately check the box for “UTF-8 without BOM tag”. This way, all new documents will be immediately created in this encoding.

  

  How to save an html page

  The file name can be anything. But by default and especially if it home page site, then save it as index.html.

  When we type a site address without specifying a specific page, this means that we are requesting the index.html page. That is, when we contact the server, it will expand exactly the index page.

  If we specify a specific page, then in the end it will be displayed. But if the address is not specified, then the index page will be returned. So by default we name the page index.html.

  And as you should already notice, the file extension should be html. That is, in the file type, select “Hyper Text Markup Language” and click “Save”.

  How to open html file

  How to open an html file to see a visual representation of the page. To do this, use any browser: Google Chrome, Opera, Edge, Mozilla Firefox, Safari and others.

  It’s not for nothing that we save files with the html extension. After all, only this type of document is reproduced by browsers. And the HTML language itself is a standard for page layout for subsequent reproduction by browsers.

  In general, right-click on the file.

  In the menu, point to “Open with” and select the right option browser. If they are not displayed, then click on “Select another application”. There we already select from the list the desired program For reading html pages.

  

  If you need to edit the code, then select the appropriate editor. I recommend using Notepad++.

  How to view the html code of a page

  I also want to tell you how you can view the html code of a page directly in your browser. This is very useful in practice. For example, find out what structure of html code a particular site uses.

  It's very easy to view the code. Just press the key combination Ctrl+U. The source code of the site page will open in a new tab.

  
  Source code site

  You can also go to address bar write right before the page address:

  Browsers also have a built-in web developer tool. Access to it in the menu will be different for each program. However, the key F12 this tool will open in any browser.

  
  Browser Developer Tool

  In the “Elements” tab there will be html code on the left, and . This tool is convenient because you can edit the code and immediately see the result. Tips may also be displayed during editing. This is also useful.

  That's all!

  Now you know how to create an html page. To do this, we examined the structure of the document itself. I also gave you some tools to easily work with the code. There were also important rules on encoding and working with files. Be sure to follow them!

  • 1. HTML documents are structural documents.
  • 2. The names of elements can be written in any case.
  • 3. Attribute names can be written in any case.
  • 4. Attribute values ​​depend on case, especially addresses (a feature of Unix operating systems is the different interpretation of characters in different registers, so files

  picture .gif and picture.GIF are different!).

  • 5. Element names cannot contain spaces.
  • 6. If attribute values ​​contain spaces, they must be in quotation marks.
  • 7. Extra spaces, tabs, and carriage returns are ignored and compressed into a single space.
  • 8. Elements can be nested inside each other. In this case, the nesting rule must be observed. Inside the nested element, in addition to the opening tag, there must also be a closing tag. Intersections are incorrect:

  Structure HTML document

  9. Unfamiliar elements and attributes are ignored by browsers ("error tolerance").

  Most documents have standard elements such as a heading, paragraphs, or lists. Using HTML tags, you can label these elements, providing web browsers with minimal information to display these elements, while maintaining overall general structure and information completeness of documents. All that is needed to read an HTML document is a web browser, which interprets the HTML tags and displays the document as intended by the author.

  When a web browser receives a document, it determines how the document should be interpreted. The very first tag that appears in the document must be the tag . This tag tells the web browser that the document is written using HTML.

  Comments in HTML. Like any language, HTML allows you to insert comments into the body of a document, which are saved when the document is transferred over the network, but are not displayed by the browser. Often, certain tags or entire syntactic structures are “hidden” in comments from older versions of browsers that are not able to process them. Comments can appear anywhere in a document and in any quantity. It must be remembered that comments increase the size of the document, and therefore the loading time.

  The general header part of the document. The document head tag should be used immediately after the tag and nowhere else in the body of the document. This tag represents general description document. Start tag placed immediately before the tag , placed inside tags . The document title does not appear when the document itself is displayed in the window.

  Document body tags. Document body tags identify the components of an HTML document displayed in a window. The body of the document can contain links to other documents, text, and other formatted information.

  Body of the document. The body of the document must be between the tags And. This is the part of the document that is displayed as text and graphic (semantic) information of your document.

  Heading levels<Нх>. The first level of headings (the largest) is designated by the number 1, the next by 2, and so on until the number 6. Most browsers support the interpretation of six levels of headings, defining each of them its own style. In most cases, the text of such a header will become bold and there will be a blank line after the text. It is important that these tags determine the logical structure of the document and participate in indexing by Internet search engines. Headers above level six are not standard and may not be supported by the browser.

  Paragraph tag<Р>. IN unlike most word processors, carriage returns are ignored in the HTML document. The browser splits paragraphs only if there is a tag<Р>. If you don't separate paragraphs with a tag<Р>, then the document will look like one big paragraph.

  Preformatted text tag

  .
   Tag 
  Allows text to be presented with specific formatting on the screen.  Pre-formatted text ends with an end tag
  .  Within pre-formatted text, you can use: line feed, tab characters (shift by eight characters to the right), disproportionate Courier font installed by the browser.
  
  List tags. There are three main types of lists in an HTML document: numbered, bulleted, and description list.
  You can create nested lists by using different list tags or repeating ones within others.  To do this, you simply need to place one pair of tags (start and end) inside the other.  Whether nested list items will have the same markers denoting the list item depends on the browser.
  Numbered lists.  IN In a numbered list, the browser automatically inserts the item numbers in order.  This means that if you delete one or more items from a numbered list, the remaining numbers will be automatically recalculated.
   
  and ends with the tag
   
  .
  
  Bulleted lists.  For For bulleted lists, the browser typically uses bullets for the list item.  The type of marker is usually configured by the browser user.
  A numbered list begins with a start tag 
  and ends with the tag
  .  Each list element starts with a tag<ы>.
  
  Font formatting. HTML allows two approaches to font selection of text fragments.  On the one hand, you can directly indicate that the font in a certain section of the text should be bold or italic, i.e.  change the physical style of the text.  On the other hand, it is possible to mark some piece of text as having some non-normal logical style, leaving the interpretation of that style to the browser.
  Graphics inside an HTML document. One of the most attractive features of the WEB is the ability to include graphical and other types of data in an HTML document.
  There are two ways to use graphics in HTML documents.  The first is the embedding of graphic images into a document, which allows the user to see images directly in the context of other elements of the document.  This is done using the tag .  This tag is dotted, i.e.  it doesn't close.  Tag syntax:
  
  The required parameter has the same syntax as a standard URL.  This URL tells the browser where the
  drawing.  The drawing should be kept in graphic format supported by the browser.  Today it is GIF formats, JPG, PNG.  They are supported by most browsers.
  ALT="text"
  This optional element specifies text that will be displayed in a browser that does not support graphics or with image graphics disabled.  Typically this is a short description of the image that the user could or will be able to see on the screen.  If this parameter is absent, then most browsers display an empty frame in place of the picture.  Tag recommended if users are using a browser that does not support graphical mode, such as Lynx, and for indexing in search engines.  The text is also visible when you hold the mouse cursor for some time without moving over the image as a system tooltip under the cursor.
  Most browsers allow you to include background picture, which will be duplicated as tiles in the bathroom and displayed in the background of the entire document.  This is the second way.  Some users like background graphics, some don't.  An unobtrusive translucent pattern (wallpaper) usually looks good as a background for most documents.
  Hypertext links are a key component that makes the WEB attractive to users.  By adding hypertext links (hereinafter referred to as links), the user makes the set of documents connected and structured, which allows him to obtain the information he needs as quickly and conveniently as possible.
  Links have a standard format, which allows the browser to interpret them and perform the necessary functions (call methods) depending on the type of link.  Links can point to another document, a special place of this document or perform other functions, such as requesting a file.  You can use text or an image or both as a hyperlink.
  Link structure in an HTML document. In order for the browser to display a link to a URL, you must place text or an image inside the hyperlink tag.  The HTML syntax is as follows:
  <А HREF="URL">text-or-image-that-will-be-highlighted-as-a-link
  
  Tag<А HREF="URL">opens the description of the link, and the tag– closes it.  Any text located between these two tags is highlighted in a special way by the web browser.  Typically this text appears underlined and highlighted.  The image is framed by a rectangular frame.  The text that represents the URL is not displayed by the browser, but is used only to perform its intended actions when the link is activated (usually by clicking on highlighted or underlined text).
  Links to tags within the document. You can link to different areas or sections of the same document by using special hidden labels for those sections.  This allows you to quickly move from section to section within a document without scrolling the screen.  As soon as the user clicks on the link, the browser will move him to the specified section of the document, and the line containing the label for this section will be placed on the first line of the browser window (if the “length” of the document in the browser window is sufficient).