Basic structure of an HTML page. Semantic structure for HTML5 pages

HTML (from the English HyperText Markup Language - "hypertext markup language") is the standard markup language for documents on the World Wide Web. Most web pages are created using HTML (or XHTML). HTML is interpreted by browsers and displayed as a document in a human-readable form.

HTML is an application (“special case”) of SGML (Standard Generalized Markup Language) and conforms to the international standard ISO 8879. XHTML is an application of XML.

Text documents containing markup in HTML (such documents traditionally have the extension .html or .htm) are processed by special applications that display the document in its formatted form. Such applications, called “browsers” or “Internet browsers,” typically provide the user with a convenient interface for requesting web pages, viewing them (and displaying them on other external devices), and, if necessary, sending user input to a server. The most popular browsers today are Google Chrome, Mozilla Firefox,Opera, Internet Explorer and Safari.

Typically, an HTML document is a file with the extension .html or .htm, in which the text is marked with HTML tags (English tag - special built-in instructions). HTML defines the syntax and placement of tags according to which the browser displays the content of a Web document. The text of the tags themselves is not displayed by the Web browser.

An HTML document contains text (the content of the page) and inline tags—instructions about the structure, appearance, and function of the content. An HTML document is divided into two main parts: the head and the body. The header contains information about the document, such as its title and methodological information describing the contents. The body contains the document content itself (what is displayed in the browser window).

Example document structure:

HTML struct header

A tag is an element of hypertext markup language. A more correct name is a descriptor. Only two tags are used - opening, or initial, and closing, or ending, or additionally, depending on the language implementation, it is possible to use a single tag and an empty element tag. For example, a paragraph indent tag can format a paragraph between , or maybe in a single form until the next first one

Example of an empty element: - breaks the text without maintaining indentation, but you can use a special form of writing the tag using fewer characters:

Each tag consists of a name, which may be followed by a list of optional attributes, all contained within angle brackets< >. The contents of the brackets are never displayed in the browser window. The tag name is usually an abbreviation of its function, making it easier to remember. Attributes are properties that extend or refine the function of a tag. Typically, the name and attributes within a tag are not case sensitive. However, the values ​​of certain attributes may be case sensitive. This applies in particular to file names and URLs.

Most tags are containers. This means that they have a start (opening or start) and an end (closing) tag. The text between the tags will carry out the instructions contained in them.

The end tag has the same name as the start tag, but is preceded by a slash (/). It can be thought of as a "switch" for the tag. The end tag never contains attributes.

In some cases, the end tag is optional and the browser determines the end of the tag from the context. Most often, the end tag (paragraph) is omitted. Browsers used to support this tag without a corresponding completion, so many Web writers have become accustomed to using the short form. Therefore, when in doubt, it is worth including a closing tag in the text. This is especially important when your document uses Cascading Style Sheets.

Some tags do not have end tags because they are used to place individual (stand-alone) elements on the page. One of them is the image tag . It simply places the graphics into the flow of the page. Other standalone tags are line breaks (
), horizontal line (), and tags that contain information about the document and do not affect the content displayed on the screen, such as and .

Attributes are added to a tag to extend or modify its actions. You can add multiple attributes to one tag. If tag attributes follow the tag name, they are separated by one or more spaces. The order is not important. Most attributes have values ​​that follow an equal sign (=) after the attribute name. Values ​​are limited to 1024 characters. Values ​​may be case sensitive. Sometimes values ​​must be in quotes (double or single). The rules for writing values ​​are as follows:

· if the value is a single word or number and consists only of letters (a-z), numbers (0-9) and special characters (period or hyphen), then you can place it after the equal sign without quotes;

· if the value contains multiple words separated by commas or spaces, or contains special characters other than a period or a hyphen, then it must be placed in quotation marks. For example, URLs require quotes because they contain "://" characters. Quotes are also required when specifying color values ​​using the "#rrggbb" format.

HTML tags can contain other HTML tags to allow multiple tags to affect a single element. This is called nesting. To implement it correctly, the start and end tags of the subtag must be between the start and end tags of the outer tag.

A common mistake is overlapping tags. While some browsers will display content marked this way, many do not allow you to break the rule, so it is important to place the tags correctly. Information that will be ignored when viewed by browsers:

· line breaks. End-of-line characters in an HTML document are ignored. Text and elements will wrap until a tag or
. Line breaks are output if the text is designated as formatted text ();

· Tab characters and multiple spaces. When the browser encounters a tab character and several consecutive spaces in an HTML document, it outputs only one space. Thus, if a document contains: "far, far away", the browser will output "far, far away". Additional spaces can be added to the text stream using the non-breaking space character (). Additionally, all whitespace is output if the text is formatted (in tags);

· multiple tags. A sequence of tags not interrupted by text is interpreted as redundant by all browsers. The content will be rendered as if there was only one . Most browsers will output multiple tags
in the form of several transitions to a new line;

· unrecognized tags. If the browser does not understand the tag or it was set incorrectly, then the browser simply ignores it. Depending on the tag and browser, this may produce different results. Either the browser will not output anything, or it may display the contents of the tag as plain text.

HTML is a website markup language. Many people think of it as programming, but it is not. HTML does not contain any of the variables, calculations, arrays, and other elements found in any programming language.

Using HTML, a developer can only create appearance site. It is important to understand that no website exists without markup. HTML is the basis for creating web pages. All other functionality is added by various programming languages.

You can create a simple website page in any editor. Even Notepad will do. For a novice developer, it is recommended to use other editors that have auto-substitution functions and other tips. Thanks to this, you can create ready-made tables, links, images and other elements. But in Notepad, you have to write each letter manually.

As a rule, Notepad is used only in cases where there are no other tools at hand. First, a text document is created and then saved in html format. All site pages must have the html extension.

The HTML language is hierarchical. That is, there is a special structure of the HTML document. What it is? Let's look at it below for clarity.

The structure is always the same. If you want to change something, the browser will not be able to process it. As a result, you will not get what you intended.

The figure above shows the structure of any html file. The first item indicates the file type. This tag is specified once. If you use special editors, the entire structure will be created automatically. You will need to adjust the default values.

HTML document structure - main tags:

The framework of the entire site consists of these three tags. Pay attention to the picture. All of these tags have a closing tag with a “/” sign. If you write by hand, get used to putting both tags at once - opening and closing.

It was said above that website pages have the extension .html. That is, if you create a text document, but at the same time write correct code, the browser will still show you just text. There will be no code conversion.

The figure below point 3 shows the head section. This section contains service information. For example, you can specify the encoding (item 4) and the page title (item 5).

There should always be a title. Without it, no search engine will be able to determine the name of the content (text) on a web page. And this is bad for website promotion. Moreover, the browser will not display the page title at the top. This is an inconvenience for the user.

The structure of the html document is such that it is indicated only in the head section. If the tag is specified in the body section or after it, the handler will not pay attention to it.

In addition, the head section contains information for connecting scripts, style files, instructions for search engines, or any other data that the user should not see, but is important for the browser or programmers.

The structure of the HTML document allows you to include styles different ways. Moreover, they can be written individually in each element. But this method is not recommended because the code becomes too large and inconvenient.

The file is connected as follows.

The href attribute specifies the path to the file. If there is an error in the path, the styles will not load. The type attribute is also required, which indicates that this is a css file.

Another option is to define styles directly in the head section.

But this option is also not very recommended. These methods are very different in that the css file can be one for the entire site, and all changes to it will be instantly applied to all pages. And if you use the method shown in the figure above, then you will have to make changes to all existing pages of the site.

If the class you are creating will only be used on one page, then this option is suitable for you.

The scripts are connected as follows.

Two attributes are required here: type and src. In the first we indicate that this is a Javascript file, and the second - where the file is located. If you make a typo, nothing will work.

The structure of the html document is such that you need to place content that will be visible to the user only in the body section. The name of the tag speaks for itself.

The entire main code of the page is indicated here, which can include an unlimited number of elements. But the longer the code, the longer it will take to process.

Let's look at the most basic tags that can be used in the body area. There are not many main ones. All the rest you will learn as your knowledge and practice grows.

The structure of an HTML document requires a mandatory order of writing elements. Tags should always be surrounded by parentheses at the edges. Without this, the browser will not understand that this is a tag. The opening bracket is always followed by the name of the element (tag). If you allow a space between< и именем, то браузер посчитает это текстом.

Let's look at the example of an image tag. Please note that this tag is not a closing tag, unlike links, paragraph and many others.

The order of the attributes does not matter. But their writing (design) is very important. The attribute name always comes first, then the equals sign, then the attribute value is written in quotes. The value can be different - digital or text.

The src attribute in all tags indicates the path of the file that needs to be loaded. The alt attribute on all elements specifies a short description. In this case, the photo bird.jpg is loaded with a description - a photo of a bird.

In addition, you could specify dimensions, width or height only, title, alignment, style class or border.

Let's look at other main tags that are specified in the body section.

Novice developers cannot always immediately imagine all this speculatively. Look at a few examples of web page structure, and then you will definitely understand.

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.

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

Page title

I added a tag that is responsible for keywords. And the tag that is responsible for the page description. For SEO optimization, these tags are required. It is also necessary to fill out the tag correctly. The title of the page must be unique for the entire site, and contain in the title the entire essence of the page for which it is specified.

Let's go further. HTML5 introduces new tags that are used to create semantic markup in a document. These are header, nav, main, article, aside, footer, etc. tags. In terms of display, they work the same way as regular tags, that is, they are block elements. But if it does not have a semantic load, then header, nav, main and others should only be used meaningfully.

The page header is formatted in the header tag. Please note that the page title is written using the h1 tag.

Site title

If we also have a slogan next to the title, then we place it in a p, div or span.

Site title

site slogan

A note about the H1 tag

It should be noted that in HTML5 the H1 tag is used to indicate the title of the container in which it is located (this could be header, section, article, etc.)

Before the advent of HTML5 tags, the semantics were somewhat different and different. So in HTML4 there could only be one H1 heading per page! As a rule, this was the title of the article or the title of the page (for example, if it is a category page on which several articles are displayed.) H2 was used for subheadings, or for sections of the main article. H3 for sub sections and so on.

The design of the main navigation of the site should be contained in the nav tag. You should also remember that it is considered good practice to design navigation with list elements.

• Home
• Portfolio
• Gallery
• Contacts

The main content of the page is formatted in the main tag. This can be one article, or several preview articles if we are talking about a blog page with several entries. You cannot place a sidebar, page header, footer or main navigation in the main tag!

...main page content...

The article tag is used to wrap articles. In general, this tag contains a block of content that can be taken out of the context of the page and used separately elsewhere. This could be an article (the full text of the article or a preview), a post on the forum, etc.

In the example below, I showed the design of the article in context, inside the main tag. The article has a header block with the title of the article. The publication date of the article is specified by a special time tag, which is displayed as a regular inline element. The time tag has a special attribute in which the publication time must be specified in machine format. This can be just datetime="2015-09-30" or with hours minutes and seconds datetime="2015-09-30T15:25:55" . The pubdate parameter indicates that the article was published at the same time as it was written. If this is news, then it may be that the news time is one, and the publication time is different, for this you need to specify the time tag twice, and put pubdate only in the tag where the publication time is indicated.

... Article title September 30 Article sub-title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?

From the example above, you can see that the header and footer tags were used inside the article to highlight the title and footer of the article.

For each individual sidebar element we use an aside block. Inside it, the title is formatted with the h1 tag. So a sidebar column might look like this:

Widget title... The last notes... Popular comments ...

The section tag is used to represent a group or section of thematically related content. Its use is similar to an article with the main difference being that the content within an element is allowed to be meaningless outside the context of the page itself. It is recommended to use tags ( – ) to indicate the topic of the section.

To give an example of the article you are reading now, you could wrap each paragraph in a tag. For example, the section tag can be used to highlight blocks of content on a landing page. This sounds similar to the definition of a div element, which is often used as a container for content. The difference is that a div has no semantic meaning, and it doesn't say anything about the content inside it. The section tag, on the contrary, is used to clearly indicate that the content within it is related in meaning. You can replace some of your div tags with section tags, but always ask yourself the question: “Is this content related or not?”

An example of using the section tag in a list listing cities:

An Event Apart Cities

Join us in these cities in 2010.

Follow the yellow brick road.

That's Beantown to its friends.

It's so nice.

The site footer is designed with the tag

© 2015 site Copyright

You can use the HTML5 outliner tool to check the page structure. It shows the page structure by blocks and headings.

Semantics in HTML5 are not limited to the tags given above in the article. But using the examples provided, you can refresh your markup and make the site more user-friendly. search engines, which will affect the site’s higher ranking in search results.

To continue this topic, you can explore other new HTML5 tags. As well as micro formats for designing and structuring data, such as schema.org

An important note about using HTML5 tags.

The specification does not specify strict rules for the use of semantic tags; it only provides recommendations for their use. If you don’t understand or don’t know where and which HTML5 tag to use, it’s better to use a div so as not to harm or break the structure of the document.

Articles and materials HTML - stands for "language hypertext markup

• ” (English: HyperText Markup Language), which is the most widely used language for writing web pages.
• Hypertext refers to a way of linking web pages (HTML documents). 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 document

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

Document title Title

Here's the contents of the document... Let's save the code in an HTML file document.html using your favorite text editor

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, a tag has a closing tag and a tag has a closing tag and others.

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

Knowledge of these tags is quite enough to create an HTML document (html page).

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.

The structure of a typical HTML document will look like this:

Document declaration tag Tags associated with the title of the document Tags associated with the body of the document

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

The declaration tag is used 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 we discuss the tag along with other HTML tags.

Good afternoon Today I will tell you about such an important thing as the structure of an HTML document.

First we need to decide what we will need to get started.

To create our HTML document framework, we need to write it somewhere. Personally, I would first recommend some simple editor like Notepad++ in Windows and its analogues in other systems. I will tell you why it is this one and not more powerful editors in a separate article.

To start building the structure of an html document, you need to create a text file named index.html (or whatever you want, but it is advisable to do it as indicated above).

Now we need to decide where the structure of our HTML document begins. And it starts with determining the version of html that we use. This version is needed so that our browser can determine our version of the document and correctly build our web page.

To indicate the version of our html document, you need to write this construction at the very beginning of the page:

It will show our browser that we are using exactly latest version HTML - HTML5.

For this, the 3 most basic tags will be enough: html, head, body.

A tag is a wrapper that will contain all the content of our document.

Tag - this tag is used to indicate to the browser what data it will need to work with: scripts, styles, meta tags, etc. Also, the contents of this tag will not be displayed on your page.

Tag − This tag is designed to store all the displayed content on a web page.

Now let’s put together the correct structure of an HTML document from all the elements described above.

The simplest structure is ready.

Now to fully work with it, all that remains is to add two important tags to the head tag:

• — a tag indicating to the browser what encoding is used in this document (usually it is either UTF-8 or windows-1251).
• — a tag that allows you to set a title for the page. The title is in the upper left corner of the tab you are on. It is needed to indicate to search engines and users of your website the specific name of a particular page.

Thus, we already have all the elements we need to build a simple structure.

Document title;

; Any text you type will be displayed on this page and displayed correctly by the browser;
That's all, the structure of our simple html document is ready! Now you can save the index.html file