The structure of an html document is the main tags. Correct HTML document structure and page code

Good day, readers and guests of the blog. I’m with you again, your humble assistant in learning the basics of the hypertext markup language html. In this article I want to touch on the topic of structuring website pages and introduce you more closely to the main tags of the language.

The topic of website structure html is one of the most important and is the foundation of website building, after mastering which you can easily create an individual design for your pages and websites. For a detailed study of the topic, the article provides not only theoretical material, but also a specific example of creating a blog. Now it's time to start learning!

Looks scary, easy to program

For those who are particularly restless, I will begin the introduction with an example. Below is a simple program code that I wrote specifically for this article. Don't worry. Each step will be given a detailed explanation.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

Basic hypertext markup language tags New tags that came with html 5 Page structuring example Article 1 Here is the text of the first article. Article 2 Here is the text of the second article.

This code creates a blog page, which in turn is divided into a header, a menu, a main panel (layout), which contains a content panel (content) and a sidebar (sidebar), as well as a “footer” (footer).

Let's start the debriefing from the first line.

is a language element whose main task is to indicate the type of web document. In this way, the browser determines by what standard the page should be displayed, since today there are several versions of html.

However, it is worth paying attention to a new unit of language called style. As you may have guessed from the name, this tag sets the style and adjusts the arrangement of objects on the page.

Logically, I can assume that the question immediately arose in your head: “What kind of incomprehensible code is located in this part of the program? It doesn’t look like html at all!” And the answer is this: it is not the html that is written into the style tag, but the css code. As previously mentioned, this is a tool for formatting the appearance of websites.

Div refers to markup language block tags. It is used to isolate certain fragments for the purpose of their further modification.

Blocks are managed using cascading style sheets, i.e. css language The example web page has three blocks that are styled using class attributes.

Thus, the code contains:

• layout – block responsible for the main part of the page,
• sidebar – sidebar (usually created for navigation),
• content – ​​the block in which blog posts are located.

In the element with the sidebar class definition, I define an unordered list using the elements

And
• . In a block with a style class content – ​​heading tags

  and paragraph

  Now let’s take a closer look at the block

  .

  HTML or still HTML 5? How to recognize?

  In a div with the layout style class, in addition to other blocks, there are tags such as header, menu and footer. Unlike the other elements in the example, these are specific to the HTML 5 platform.

  Thus, header is an element of hypertext markup language, usually creating the header of site pages or sections in which the title is inserted. It is worth noting that the Internet Explorer browser does not support header up to version 8, but displays its contents.

  The main purpose of the menu tag is to display menu items. Similar to the elements for creating numbered and unnumbered lists, inside the menu container, each content item is included in a paired tag

  .

  

  And finally, the footer language unit. In web developer jargon, this is sometimes called the “footer” of a page. This tag is located at the bottom of the page or sections. The footer usually contains information about the authorship of a particular resource, the date of creation of the document, background information or other materials that do not require special attention from the readers of the web resource.

  Tools for creating web resources

  Many software products have been created to develop Internet pages. Conventionally, they can be divided into simple editor programs and professionally oriented software products.

  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:

  ...
  
  

  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 . 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.

  Today we will talk about semantics in HTML5. I have already written a short review post about . I recommend that you familiarize yourself with it before reading this article. Now we will look at this issue in more detail, about how to correctly and competently compose the semantic structure of an HTML5 document.

  In this article we will gradually create an HTML page and decorate it with semantic HTML5 tags.

  

  Figure - Semantic structure for an HTML5 page.

  DOCTYPE and meta tags in the page title

  Let's start with a standard HTML5 document template and add meta tags to the head:

  I added a tag which is responsible for keywords. And tag which is responsible for the page description. For SEO optimization, these tags are required. It is also necessary to fill out the tag correctly , 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 may 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 an 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 must be stored in a graphic format supported by the browser.  Today these are GIF, JPG, PNG formats.  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 non-graphical browser, such as Lynx, and for search engine indexing.  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 a background image in your document, which will duplicate like bathroom tiles and appear as 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 specific location within a 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).
  Every HTML document must begin with the tag <
  HTML>
   and end with the tag HTML>
  .  These tags indicate that the lines between them represent a single HTML document.  Additionally, you can see that an HTML file as a whole is an element of the HTML language.
  Also, the HTML document must contain the HEAD (document information) and BODY (document body) elements.
  Document SectionHEAD
  The HEAD section of a document defines its title and also contains additional information about the document for the browser.  This section is optional, but it is recommended that you always use it in your HTML documents, as a well-written header can be quite useful.
  The header section begins with the tag <
  HEAD>
   and immediately follows the tag .  Between the opening and closing tags of the HEAD element are other header elements.
  Document title title
  To give a name to an HTML document, the tag is <
  TITLE>
  .  This name will be displayed in the browser window title.  The title is written between the tags  and is a line of text.  The length of this line can be any, but it is recommended to make it no more than 60 characters.  The TITLE element should only appear in the HEAD section.
  Document SectionBODY
  This section of the document contains the information that is displayed in the browser window.  The BODY section must begin with the tag <
  BODY>
   and end with the tag BODY>
  , between which are located the HTML elements that make up the content of the document.
  Item SpecificationBODY
  Tag has a number of attributes that determine the appearance of the document.  Below is the tag specification .
  TEXT="text color"
  BGCOLOR="background color"
  BACKGROUND="address of background image"
  The TEXT attribute specifies the font color for the entire document in RGB or character notation.  By default (if this attribute is not specified), the browser settings are used.
  The BGCOLOR attribute specifies the background color of the document browser window in RGB or symbolic notation.  The browser settings are used by default.
  The BACKGROUND attribute allows you to specify the address and name of the picture used as the background.  This drawing will be reproduced and distributed in the background of the document.
  The LINK, VLINK, and ALINK attributes specify the colors of hyperlinks in RGB or symbolic notation.  The browser settings are used by default.  An unvisited hyperlink is a hyperlink that has not yet been used to navigate to another document.  A visited hyperlink is a hyperlink that has already been used to navigate to another document.  Active hyperlink – a hyperlink to the document that is currently being navigated to.
  Tips for using BODY tag attributes
   If you specify at least one color in the BODY tag, then specify the others as well.  This is due to the fact that the user can set the color settings of his browser as it is more convenient for him.  Specifying only one color may result in the text blending into the background color for some users.  As a result, viewing the document will be difficult.
   Choose the text color so that it “works” with the background color or the main colors of the image.  For example, red on green can cause serious problems for a significant number of people.
   Both BGCOLOR and BACKGROUND can be specified in the BODY element.  In this case, the browser gives preference to BACKGROUND, but if the background image cannot be loaded, BGCOLOR will be used.  Therefore, try to set the background color to be similar to the color of the background image so as not to upset the color balance of the document.
  
  
  
  
  
  
  
      
   
      
  It might be useful to read:
      
  
       
  Walkthrough of the game - Tricky test;
   
  The most terrible horrors.  Creepy stories.  The most terrible horrors Camp horror story coffin on wheels;
   
  Watches for children: types, their features;
   
  Cannot save the document form (invoice) in Excel format - the "Save" and "Save As" buttons are not available;
   
  How to resize cells in Excel and make them the same How to change the width of all columns in Excel;
   
  Basic settings of the AutoCAD workspace How to create a custom coordinate system in AutoCAD;
   
  Translation of numbers in positional number systems;
   
  Voltage resonance in a series oscillating circuit;