Anonymity Disputes often arise among layout designers regarding the choice layout method . Some people prefer block layout , other web masters are inclined to tabular method . This issue is quite controversial, and both masters are right in their own way. There are some situations in which it is worth using block layout , there are also moments in which the best option will be used tabular layout . Some people prefer. . But in any case, when choosing a method, it is necessary to build on some features inherent in both tabular and Main feature

These methods have advantages and disadvantages, which will be discussed below.

• Advantages of table layout:
• Layout with tables is much easier than with blocks;
• At small resolutions, tables do not overlap each other

Ease of creating a cross-browser site.

• Disadvantages of table layout: A large number of
• code;

Not all designs can be laid out using tables.

• Advantages of block layout:
• A small amount of code, which significantly reduces the weight of the site;
• Higher loading speed compared to tables;

You can create designs of any complexity.

• Disadvantages of block layout:
• As the resolution decreases, the blocks fall off or run over each other;
• Problems with cross-browser compatibility;

Layout is more difficult than using tables. Here are the main pros and cons of these methods page layout , but in practice in most cases it is necessary to use both methods. Usage block layout . This issue is quite controversial, and both masters are right in their own way. There are some situations in which it is worth using.

, is much better than a tabular one, but only on the condition that you can achieve the correct display of the page in all browsers and at any monitor resolution. In the event that the layout designer does not have much experience, it is worth using tables for layout; with increasing skill, it will be possible to switch to

The translation of which is presented below especially for Habr readers. As amazing as CSS is, it's not enough to implement the fundamental principles of page layout. However, additional opportunities to create more dynamic pages

After years of promise, CSS3 has finally delivered on styling. It added a whole new set of tools to our arsenal, providing us with rounded corners, gradients, transparency, element transformations, animation and much more. What else can please our eyes?

The next problem with CSS is markup. Until now, we've done it using floating boxes, relative positions, and negative padding tricks, all of which have been difficult to implement in a way that looks like a standard two- or three-column layout.

The W3C and browser makers are aware of these problems and are working on a number of solutions. The leader among them is (not surprisingly) Internet Explorer. Looks like IE10 will be the harbinger of a new era CSS markup, which will allow you to create excellent, dynamic and attractive sites using previously unattainable capabilities.

In this article the author examines various methods markups that I would like to use at certain stages of development, from already implemented to purely theoretical. We may not be able to use all of them in the future (at least not in their current form), but it's worth taking a look at these methods to understand the future of CSS markup.

Columns

Distributing content across multiple columns is a fundamental element of print, and the CSS Multi-Columns module gives the same capability for the web. There are two ways to create columns, each using different properties (of the parent element). In the first case, the number of columns among which the text must be distributed is directly specified. For example, this code will create three columns of equal width, filling the total width of the parent element:

Div ( column-count: 3; )
In the second method, the width of the columns is fixed, they will be repeated until they fill the width of the parent element. In this example, the column width is set to 140px, which means that five columns should appear in an 800px wide block:

Div ( column-width: 140px; )
By default, the space between columns is 1em, but this can be changed using the property column-gap. You can also place dividing lines between columns using column-rule, similar in syntax to border property. The code below will create a 2px wide dotted line and also set the column spacing to 28px (the separator will be in the middle):

Div ( column-gap: 28px; column-rule: 2px dotted #ccc; )
If you want to see the result, take a look at the example implementation of CSS columns. To see three columns, you must use Firefox, Chrome, Safari, Opera 11.1 or IE10 Platform Preview (IE10PP). Or look at the screenshot below.

You can do different things with speakers. There is a practical example of their use in Wikipedia, in the notes section, where it is used column-count. In Firefox, multi-column functionality is implemented with the prefix -moz-, in Chrome and Safari with the prefix -webkit-, in Opera 11.1 and IE10PP without prefixes.

Table

Brand new to IE10PP is the table layout system. Before using it, you need to decide on the rows and columns. For columns, you can use length values auto keyword and a new unit of measurement fr(short for fraction, relative amount). Look at this example:

Div ( display: grid; grid-columns: 1fr 3fr 1fr; grid-rows: 100px auto 12em; )
This code will create a table of three columns, the center of which will be three times wider than the left and right, and also of three rows, where the top will be 100px in height, the bottom 12em, and the middle one will expand in height automatically, depending on the length of the content.

Now that we have a table, we can place content in it. Using HTML5 elements, you can create some really simple page markup:

Header ( grid-column: 1; grid-column-span: 3; grid-row: 1; ) nav ( grid-column: 1; grid-row: 2; ) article ( grid-column: 2; grid-row: 2; ) aside ( grid-column: 3; grid-row: 2; ) footer ( grid-column: 1; grid-column-span: 3; grid-row: 3; )
Looking closely at the code, you will notice that the content on the page is distributed across rows and columns using, respectively, properties grid-row And grid-column. Element article placed in the second column of the second row - the center of the 3x3 table. The property is also used column-span for elements header And footer, which stretches them across all three columns (the property works similarly row-span, which was not used here).

You can see a demo of the markup in the example of using CSS Grid, but you need the IE10 platform. If it is not there, then just look at the screenshot.

The properties mentioned above are fully implemented in IE10PP, so you can experiment with them right now. However, many properties are still not implemented.

Sample

Another approach to table view is the Template Layout module. It uses a slightly different syntax, where you first need to assign a position to the blocks using a letter character and the property position:

Header ( position: a; ​​) nav ( position: b; ) article ( position: c; )
Once we assign a position, we can create markup using a sequence of characters. Each sequence is equivalent to a line, and each character in the sequence is a column. For example, to create a table with one row and three columns, you could use:

Div ( display: "abc"; )
In this case, three evenly spaced elements will be displayed in a horizontal row. But you can repeat characters to expand columns, and you can also use the same characters in the same position on different lines to expand rows. In the example below, the element nav overlaps two lines, and header And article overlap two columns (code formatted for clarity):

Div ( display: "baa" "bcc"; )
Template Layout is not yet used by browsers, but there is already a good polyfill script in jQuery that will allow you to experiment; it is the one used in the example at the link. The result looks the same as the table markup example, but the code is completely different.

The demo page uses JavaScript so should work for everyone modern browsers. Table markup may also support template syntax, as in the example below:

Header ( grid-cell: a; ) article ( grid-cell: b; ) div ( display: grid; grid-template: "a" "b"; )
This code is functionally identical to the Template Layout properties, but also has not yet been implemented (and maybe never will be).

Positionable floating blocks

Current property float allows text to wrap around an element to the left or right, but an extended property in IE10PP allows you to enhance a floating element by placing it anywhere and the adjacent content will still wrap around that block. This just required a new value for the property float:

Div ( float: positioned; left: 200px; position: absolute; top: 100px; width: 250px; )
This code will create an element 250px wide, positioned 200px to the left and 100px from the top of the parent object. By default, any other content inside the parent will wrap around the positioned element on all sides, but this can be changed with different property values wrap-type, for example, when text wraps around an element only at the top and bottom:

Div ( wrap-type: top-bottom; )
You can combine positioning and table layout properties by placing an element in a table and allowing content to wrap around it:

Div ( float: positioned; grid-column: 2; grid-row: 2; )
If you have IE10PP, then you can. If not, then the result is shown in the screenshot below, it cannot be implemented with the current CSS capabilities.

Exclusions

Property float allows only rectangular elements to be streamlined, but the documentation provides for wrapping in shape. The idea came after using the CSS Exclusions module. It has two key properties. First, wrap-shape, allows you to create ellipses, rectangles or polygons that will define the shape of the block flowing around the content, for example:

Div ( wrap-shape: circle(50%, 50%, 100px); )
This code will create a circle with a radius of 100px that will be centered on the parent element. You can use the function polygon() to create any shape by specifying coordinate pairs separated by a space, for example for a triangle:

Div ( wrap-shape: polygon(0,100px 100px,100px 50px,0); )
When there is already a given shape, the inner content can be made to flow around that shape using the second property wrap-shape-mode, like here:

Div ( wrap-shape: circle(50%, 50%, 100px); wrap-shape-mode: around; )
You can see CSS Exclusions in action by downloading a prototype for Mac or Windows from the Adobe lab. There is complete documentation and some very cool demo files, for example this one:

Regions

Adobe's next offering is CSS Regions, which define how content is distributed within many different elements. This is done by first defining an element that will provide content to others, using a unique string identifier in the property flow, and then selects which areas will be filled with this content using the function from() properties content:

Content ( flow: foo; ) .target1, .target2 ( content: from(foo); )
Here the content will be taken from the element .content, and then will be distributed first over the element .target1 and if the block is not enough to display the content, then it will continue to be displayed in .target2. Content will not be duplicated in blocks, it will start in the first and continue in the second (if necessary). To understand better, just take a look at the image below.

By the way, there are no requirements for target areas regarding their location in the markup. They can be placed on opposite sides of the page if necessary.

Specs for CSS areas have not yet been implemented in browsers, but by analogy with Exclusions, you can use a prototype from the Adobe laboratory and try the functionality yourself.

Conclusion

It is not yet clear which of the new layout modules (from FlexBox and Columns) will be fully implemented in browsers. As for floating blocks and Exclusions, I would like to cross them because of the similarity of functionality (perhaps this will happen). Table markup is closely related to template markup and can certainly be expected to appear in IE10. CSS regions have already been implemented in one of the WebKit forks, and will likely appear in WebKit browsers (Safari, Chrome and others) very soon.

Thus, we can predict that with some changes in syntax, everything described above will be used in CSS3 in the future. It is very good if this happens, since, in this case, new methods will allow you to create very well-thought-out sites at minimal cost in just a few years.

• flexbox
• html5

Add tags

Dedicated to CSS, I talked about basic CSS principles and typical cases of its use. The basics of CSS, possible types of selectors, HTML structure from a CSS point of view. I've listed the most common CSS properties and shown how they can be set for page elements. I paid enough attention to the CSS properties responsible for indents and borders, rendering of text, pictures, links and lists. Finally settled on table styling-specific properties.

This is all well and good, but the question of using CSS styles to form the structure and layout of the page still remains open. Previously, when few people knew about CSS and it was just emerging as an effective technology, tables were almost universally used for these purposes. As a rule, they took up all the space on the page and using table cells, regions were specified for placing individual sections. The presence of such properties as colspan and rowspan , which respectively allow you to glue several columns on a line and several lines in a column, gave even greater flexibility to the markup defined in this way. Very often, nested tables were used as the contents of a cell, which in turn could have their own nested tables. Such a page structure, in the case of large volumes, became heavy, difficult to maintain and not at all flexible. For example, in order to move a section from one side of the page to the other, in some cases I had to sit for hours and manually rewrite the markup again.

Now with the use of CSS everything has become much easier. It is enough to separate the content of the required section into a separate layer using a div tag and simply set positioning rules for it on the page using CSS properties. If you later need to move this section to the opposite side of the page, you can simply change the CSS properties without touching the code of the page itself. Everything is very simple and convenient. However, in order for this simplicity to be obvious, you need to get to know these possibilities a little deeper.

In this article I will talk about what types of page layout there are, how to use them and how to create them. But let's start from the beginning.

1. Page layout options.
   

As a rule, all pages can be divided into three categories:

Fixed width pages. Such pages have a limit on the width of their elements and, regardless of the size of the browser window, the width of the region used is fixed and does not change while working with the page. Such pages are used in places where strict requirements are set for the display of page elements and the uncontrolled spread of some elements is simply unacceptable. In such cases, it is common to set a fixed width for the body tag and center the page along the width of the browser window. The most common width value for fixed-width pages is 960px - this size allows the page to look good at screen resolutions starting from 1024x768.

Floating width pages. – U of this type pages, the width of its elements is not specified, and they freely change their sizes, spreading across the entire screen or parent section and taking up all the free space. This approach is most appropriate to use if the main purpose of the page is to display text. In other cases, the use of such approaches can turn you into Don Quixote, pointlessly fighting with a windmill, which in your case will be the browser.

"Elastic Pages". These pages combine both approaches. Elements of such pages have a fixed width, but are able to stretch or shrink depending on the width of the browser window in predefined ranges. For such purposes, you can use the properties min-height, min-width, max-height and max-width which I mentioned in the first part.

In order to achieve the best results, it often makes sense to combine all three approaches to page layout: for example, make all auxiliary and navigation sections - in which uncontrolled spreading of elements is unacceptable - fixed in width, and central panel make it “elastic” or even allow it to occupy all the space remaining after the fixed sections in the browser window.

1. Page layout methods
   

CSS allows you to effectively implement markup using various techniques and techniques. The most common methods include floating layers(in English-language sources, this technique may be called float layout) and absolute positioning(absolute positioning). Moreover, subjectively, the markup of the vast majority of sites uses floating layers. Next, I will try to consider each of these techniques in more detail.

1. Floating layers
   

Floating layers are implemented by manipulating the float property of page elements. Using this property, a layer, paragraphs, and other elements can be positioned on the left or right side of the page or outer container. To do this, you need to set the float property with the appropriate value: float: left, right, none; . The rest of the page content will "surround" this element pressed to one side. A very important point to note is that content will only surround a float element when it is defined below this tag in the page code and its width is no greater than the remaining width of the page or outer container. Therefore, in this case it is very important to determine the sequence of description of page elements in the HTML file.

Sometimes there are situations when it is necessary to make sure that some content does not surround a float element, but is drawn below this element. An example of such a situation would be the footer panel, which, no matter what, should always be at the very bottom of the page. This is where the clear property can come to the rescue and takes the following values: clear: left; right; both; none. This property forces the content to be drawn below the float element. Moreover, using the values ​​of this property, you can specify which float elements this applies to: left-aligned, right-aligned, both, or neither. So, if you have an element with float:left , in order to display the rest of the content below and not allow it to surround the given element, you should also use clear:left .

However, the described functionality is certainly not enough to effectively implement page markup. Now is the time to figure out the techniques for more fine tuning markings. In the case of floating layers, the horizontal position of the page element is usually set with using CSS the margin property, which, as we already know, is used to set the distance from the border of one element to another element. At first glance, this may seem somewhat strange and impractical. However, this is only at first glance. A unique feature of this property is that you can set negative values ​​for it, thus shifting the element to the left relative to its starting position. Well, accordingly, a positive value shifts the element to the right (in fact, of course, the element remains in its place, just adding the margin property to the element visually shifts it by the specified value).

Thus, you can set a fixed width and height for elements using width and height, respectively, specify the required float and margin values, and enjoy the result. Further actions are limited only by your imagination and ingenuity. As an example, I want to show how a page could be marked up. Below is an example of a page divided into sections and the code for the CSS file and HTML page.

view image
Index.html	Main.css
Main Page	/*clear browser predefined values*/ Padding: 0; Font-size: 100%; Font-weight: normal; background: #C2C2C2; /*defining margin-left: auto; and margin-right: auto; we place tha body content to the center of the screen*/ margin-left: auto; margin-right: auto; background: #FFF; text-align: center; background: #F2F2F2; border: 1px solid #FD8000; border-left: 5px solid #FD8000; } background: #F2F2F2; border: 1px solid #FD8000; margin: 1px; margin-left: 205px; #bottom-lsidebar margin-right: 2px; background: #FD8000;

1. Absolute positioning
   

Absolute positioning, as I already said, is not used as often as floating layers, but it also deserves attention. Sometimes it happens that the reception of floating layers turns out to be unacceptable for some reason, and therefore all that remains for us in such a situation is absolute positioning. However, most often absolute positioning is used for local positioning - specifying the placement of one element relative to the position of another. One way or another, you definitely need to know about this technique.

This technique is based on the use of the position property, which can take the following values: position: absolute, relative, fixed, static. The absolute value specifies the position of the element in screen coordinates, or the parent element, as will be shown below. relative – defines the position relative to the default location. Specifying an offset using this value leaves a “hole” on the page, so as a rule, it is not worth using it in this way, as much as possible - a little later. fixed – Indicates the position on the screen, regardless of the scroll, that is, no matter how much you scroll the scroll bar, the element will still remain in its position. The static value is normal positioning; if a positioning type is not specified for an element, this value is applied by default.

Once the position property for an element has been set, it makes sense to specify properties that define the element's coordinates: top, bottom, left and right. So, by specifying position: absolute for any element, you can set its position using the above properties relative to one or another border of the browser window. However, if we are talking about any element that, say, is located inside a layer, then the absolute positioning of such an element is carried out relative to the boundaries of this very layer.

To clarify this, let's look at a simple example. Let's say we have a title and inside the title there is a picture. Then its position relative to this very heading can be set like this:

h1 ( position: relative; )

position: absolute;

That is, using the position: relative; property for the title. , we seem to be saying to carry out positioning “relative to me”, but the property position: absolute;

performs positioning relative to the boundaries of the parent element. As with the previous technique, I will provide an example to make it clear what should be used and how.

view image
Index.html	Main.css
Main Page	html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote ( padding: 0; Font-size: 100%; Font-weight: normal; background: #c2c2c2 ; margin-left: auto; margin-right: auto; background: #FFF ; /*common panels of the sites*/ background: #F2F2F2; border: 1px solid #FD8000; border-top: 20px solid #FD8000; margin: 1px; margin-top: -20px; font-weight: bold; text-transform: capitalize; } position: relative; position: absolute; left: 205px; position: absolute; position: absolute; position: absolute;

1. So, what is next?
   

That's probably all there is to the markings. Further nuances of using CSS for this task will be specific to your project, browser and requirements. Of course, I haven’t talked about a lot of things even now. I didn’t warn you about the specifics of page markup for IE 6.0 (oh, yes, I should write a separate book on this). There are a lot of things there, even from what I talked about, that will not work or will not work as you would like. And in order for it to work, you need to use magic spells like * html or zoom: 1;

He didn’t say anything about how to deal with problems that arise during marking, when panels crawl inexplicably where and why (and believe me, this will happen, more than once, and not only to you). I didn’t talk about the z-index property, this is very important, especially in the case of absolute positioning, when the content of one element overlaps the content of another. I didn’t tell you about the wonderful overflow property, which helps deal with panel content that doesn’t fit inside and just wants to jump out of its layer. And many, many, many more things that I kept silent about. Not because I'm stupid, just a little lazy

Here we will look at common mistakes in HTML5 markup from a semantic point of view, and how to avoid them.

While observing the sites in the HTML5 Sites Gallery and answering user questions, I saw a lot of sites with HTML5 markup. In this article, I'll show you some mistakes and bad markup practices that I've seen frequently, and explain how to avoid them.

Don't use a tag as a wrapper for styling

One of the most common problems I have noticed is the banal replacement

"s on HTML5 structural elements, especially "s. Those. when what in XHTML or HTML4 looks like this:

My super duper page
Rewrite it like this:

It's just wrong: not a wrapper. This element refers to the semantic block of your content that is used to construct the “document outline” and must contain a title. If you need a wrapping element, try to make do (Kroc Kamen has some to offer). If this doesn't solve the problem of needing additional wrappers, use the good old

"s. With the advent of HTML5

“You are not dead, and they are perfect in this case.

"s on HTML5 structural elements, especially "s. Those. when what in XHTML or HTML4 looks like this:

Taking all of the above into account, it would be good to mark up the example above using HTML5 like this: If you are not sure which element to use, then I advise you to use our element selection flowchart ().

Use only when necessary

There's no point in writing code if you don't have to, right? Alas, I often observe how and where they are not needed. You can read about the elements in more detail, but I will briefly outline the key points:

• The element represents a group of introductory or navigational aids and usually contains a section title
• An element groups a set of elements

  -

  , representing the section heading in case it consists of several levels (subheadings, alternative headings, etc.)

Excess of elements

I'm sure you're well aware that an element can be used multiple times in a document. Therefore, this often happens:

My best blog post

If yours contains only one header element, then it is not needed. In this case, the element already guarantees that the heading will be included in the document outline, and since it does not contain multiple elements (by definition), it can be safely removed. Simply this is enough:

My best blog post

Misuse

And again about headings: I often see incorrect use of the element. Should not be used with if:

• There is only one header
• good in itself (i.e., without).

First case:

My best blog post

In this case, just remove hgroup.

My best blog post

The second case is another example of using an element unnecessarily.

My company

Established 1893

If the only child is “and this is what is needed? If you don’t have additional elements in “e (i.e. sister in relation to), just remove it.

My company

Established 1893

Do not frame all links in

HTML5 introduced 30 new elements to give us the ability to create structured and meaningful markup. But you should not overuse new semantic elements. Unfortunately, this is exactly what happens to. The specification describes it like this:

The nav element represents a section of a page that links it to other pages or parts of the current one (a section with navigation links).

Note: Not all groups of links should be placed in the nav element. It should be used for main navigation. Often in the footers there is a small list of links to various pages of the site (Home, Help, terms of use, etc). In this case, one footer should be enough. Although there is nothing stopping you from using nav, it is not necessary.

WHATWG HTML spec

The key phrase is "main navigation". One can argue for a long time about what is meant by the main one, but for me it is:

• Primary navigation
• Site search
• Secondary navigation (debatable)
• In-page navigation (within a long article, for example)

Although in this case it is difficult to judge what is right and what is wrong, I believe that one should not conclude:

• Page switchers
• Social links (although there may be exceptions in cases where social links are the main navigation. For example, sites like about.me or flavors.me)
• Post tags
• Post categories
• Tertiary navigation
• Volume footers

If you're unsure whether to frame your list of links, ask yourself, "Is this the main navigation?" Please note the following:

• “Don't use if you think x > would work too” - Hixie on IRC
• Perhaps we should add “Go to” for convenience?

If the answer to these questions is “No,” this is probably not the place to be.

Common errors in using the element

Ah, . Understanding the correct use of this element, like its brother, is not easy. Let's take a look at some common mistakes related to this element.

Not every image

Previously, I advised against writing more code than necessary. The situation is similar here. I've seen sites where each picture was framed in. Don't use more markup just to use more markup. You're just creating for yourself more work, but don’t improve the description of your content in any way.

The specification describes it as “self-contained content, possibly with a header, and typically a self-contained flow element.” Here it is, all the beauty - the element can be easily moved from the main content, for example, to the sidebar.

The above item selection flowchart will help you cope with.

If the image has only presentational value and is not referenced anywhere in the document, it's definitely not. Otherwise, ask yourself the question: “Is this image in the current context necessary for understanding?” If not, it apparently doesn't (maybe). If so, ask yourself, "Can I move this into an app?" If the answer to both questions is Yes, then it might work.

Your logo is not

The same goes for the logo. I often see this application:

My company name

Nothing to add here. This is simply not true. One can argue for a long time about whether the logo should be in

, but we’re not talking about that now. The real mistake is overusing the element. should only be used when you refer to it in a document. It is unlikely that you will link to your logo anywhere. This is enough:

My company name

can be not only an image

Another common misunderstanding of the element is the assumption that it can only be used for pictures. But that's not true. It can contain video, audio, graphics (in SVG, for example), a quote, a table, a block of code, a poem, or any combination of the above. Don't limit yourself to just pictures. Our job as web standards adherents is to describe the content of our markup.

Not long ago I wrote about the element in more detail. I recommend reading it if you want to understand it better or refresh your memories.

Don't use unnecessary type attribute

This is perhaps the most a common problem, found in the HTML5 gallery. While this is not a bug, I think it's best to avoid it.

In HTML5 there is no need to specify a type attribute on elements
Instead you can simply write:

Among other things, you can also reduce the amount of code spent on specifying the encoding. Mark Pilgrim's chapter on semantics in Dive into HTML5 describes all such practices.

Incorrect use of form attributes

You may already be aware that HTML5 introduces a lot of new form attributes. We will look at them in the near future, but now I will briefly tell you what not to do.

Boolean attributes

There are also logical attributes for multimedia elements and some others. The rules I describe apply to them as well.

Some of the new form attributes are boolean, i.e. their presence in the markup determines the behavior of the elements. Including this:

• autofocus
• autocomplete
• required

I rarely see them, but in the case of required I saw this:

Ultimately, this does not threaten anything bad. The client HTML parser will encounter the required attribute in the markup and apply the appropriate rules. But what if we do it differently and write required="false"?

The parser will still see the required attribute and apply the appropriate behavior, even though you tell it not to. Obviously this is not what you wanted.

A boolean value can be applied in three ways: (The second and third are typical for XHTML)

• required
• required=""
• required="required="

In relation to our example above, we could write this (in HTML):

Tags: Add tags

First, let's define what markup is? As the term itself suggests, marking- this is the placement of labels, in our case in the document’s HTML code, i.e. web pages. The markers here are tags, which allow you to define the boundaries of the markup or create an HTML document element. Still not clear? Then read on, and everything will fall into place.

Basics of HTML markup or what is a tag

A tag is a construct that begins with a less than sign () . Most tags consist of an opening and closing tag. The difference between them is that in opening tag you can (if necessary) specify a number of additional properties using the so-called attributes, and at the beginning of the name closing tag the selsh character (/) is indicated, for example:

Right-aligned paragraph text.

.

In this case, the p block tag creates a paragraph, and align attribute Aligning paragraph content to the right.

It should be noted that in HTML, tags come in two types: block and inline. Block tags create a block element, often with indentation and below the following elements are already " With new line ». Line tags are intended for marking up a piece of code and do not create a line break.

As they say: there are exceptions to any rule - the same is true for tags. There are tags that do not have a closing tag and are intended to create labels and elements of an HTML document, for example:

In this case, the img string tag inserts an element into the web page in the form of an image, the address of which is written in the src attribute. The value of the alt attribute is the alternative text that is displayed if the image is not available, and the border attribute specifies the thickness of the border around the image.

To make it easier for you to remember everything stated above, I will give a small and visual cheat sheet that you can use to learn HTML:

A quick guide to HTML tags

And so, we have already met two tags, so I will omit them. Below I will give a number of HTML document markup tags and some of their attributes. For starters, this will be more than enough, but if you are interested in a complete list of HTML tags and their attributes, I recommend taking a look at the website htmlbook.ru, and also adding it to your bookmarks as the most complete and convenient reference book on HTML and CSS. Shall we continue?

How to make a link? To do this, you need to use the A string tag, which marks the text it contains as link - active element web page, when clicked, the user can go to another web page, the address of which is specified in the href attribute.

How to make text bold? To do this, you need to use the B line tag, which sets the text it contains to a bold font style.

How to make text italic? To do this, you need to use the I inline tag, which sets the text it contains to an italic font style.

How to underline text? To do this, you need to use the U string tag, which adds an underline to the text it contains.

How to strike out text? To do this, you need to use the S line tag, which displays the text as strikethrough.

How to highlight code in text? To do this, you need to use the CODE string tag, which is usually rendered in a monospaced font by the browser, e.g. Courier New.

How to format code in text? To do this, you need to use the PRE block tag, which defines a block of program code, usually rendered in a monospace font by the browser. Unlike the CODE line tag, the PRE tag preserves spaces and line breaks.

How to make text larger? To do this, you need to use the BIG inline tag, which increases the font size by one compared to normal text.

How to make text smaller? To do this, you need to use the SMALL line tag, which reduces the font size by one compared to normal text.

How to set the font, color and font size in the text? To do this you need to use the FONT string tag. The face attribute here specifies the typeface (name) of the font, color is the color of the font, and size is its size in conventional units (from -7 to 7).

How to make a title? To do this, you need to use block H tags, which set headings of different levels, from 1 (largest) until 6 (the smallest), which allows you to set the structure of information published on a web page. Headings differ from each other in font size and indentation, and are also highlighted in bold.

How to make a subscript font? To do this, you need to use the SUB string tag, which renders the font as a subscript, i.e. the text will be positioned below the baseline of the remaining characters in the line and at a reduced size.

How to make a superscript font? To do this, you need to use the SUP string tag, which displays the font as a superscript, i.e. the text will be positioned above the baseline of the remaining characters in the line and at a reduced size.

How to insert a quote into text? To do this, you need to use the inline Q tag, which is used to highlight quotes in the text, which are automatically displayed by the browser in quotation marks.

How to format a quotation in text? To do this, you need to use the block tag BLOCKQUOTE, which is designed to highlight long quotes in an HTML document. Typically, such text is displayed with 40 pixels of padding on the left and right, as well as padding at the top and bottom.

How to make a line break in text? To do this, you need to use the BR block tag, which sets a newline at the location where the tag is located. Unlike the p paragraph tag, using the br tag does not add a blank space before the line.

How to make a layer in HTML? To do this, you need to use a block DIV tag, which creates a layer with no padding.

How to make a separator in text? To do this you need to use the HR block tag, which draws a separator horizontal line. The color attribute sets the color of the line, size - the size, and noshade - disables the 3D effect.

How to make a list? There are two main types of lists in HTML: numbered (OL) and bulleted (UL). In this case, the HTML code for the bulleted list specified by the UL block tag is given. By default, circle is used as a marker (solid circle), which appears at the beginning of the first line of the list item specified by the LI tag.

Of course, in my article I provided only the basic HTML tags that you may need when marking up a web page. In most cases, for HTML markup, this is more than enough. The only thing I left out, but which is certainly important when marking up web pages, is working with tables. They need to be studied separately, because... there are too many nuances, and the article turned out to be quite long. That's all I have. Thank you for your attention. Good luck!

HTML (HyperText Markup Language) is not a programming language, it is a formatting language, i.e. giving appearance web page when viewed in a browser. Used to mark up a document tags. Tags are enclosed in angle brackets, and, with rare exceptions, are paired, i.e.

there is an opening and closing tag. For example, to mark the beginning of a new paragraph in a document, a tag is placed (from paragraph .

). Then at the end of the paragraph there must be a closing tag When placing tags, the following rule is followed: tags are closed in the reverse order of their appearance. For example, if a word in the text should be highlighted in bold (tag from bold When placing tags, the following rule is followed: tags are closed in the reverse order of their appearance. For example, if a word in the text should be highlighted in bold (tag ) and at the same time in italics (tag italic ), then this can be done in one of the following ways: word ), then this can be done in one of the following ways: .

Below is the text of some html document and the result of its display in the browser:

Good day, dear visitor ! h1>

I hope you got exactly where you wanted.

Here you will find poetry , songs And scenarios for organizing any holidays.

He's used to "A" grades -

Russian five and singing.

I always like his diary

Spoils the mood.

Rice. 74. Displaying the example html page in a browser window.

In the example given, the following tags are used:

… - indicates that the text enclosed between these tags should be perceived as html.

… - body of the html document. Parameter bgcolor(background color) specifies the background color, text – the text color. Colors are specified in hexadecimal number system using the RGB model. For example, #ffffff means R =#ff , G =#ff , B =#ff , those. maximum of each of the three colors. We know that mixing the three primary colors in the RGB system in equal parts with maximum intensity produces pure white.

… - first level heading, specifies formatting specific to this style: font size, indents before and after the heading, alignment, etc.

... - paragraph of text.

- unpaired img tag (from image), which controls the insertion of graphic illustrations into a hypertext document. In this case, a graphic file with the name pic 1.gif, located in the same directory as this html document. If you pay attention to the URL of the document, displayed in the figure in the “address” line, you can determine that this document was saved under the name “ index.html" in folder " My Documents” on disk C. Parameter align controls the alignment of the illustration relative to the text of the html page. In this case, the parameter value= “left”

… , sets left alignment and allows text to wrap around. - hyperlink insertion tag..

… When you activate this link, another document will be loaded in the browser window, which in this case should also be saved in the same folder and should be named

… verse.html

- highlighting with color. In this case, the color will be red (R =#ff , G =#00, B =#00).

- secretion of fat.



- unpaired tag – forced line break within the current paragraph.

Previously, the tabular type of layout was widespread on the Internet, to which this page is dedicated. However, over time, this approach to creating a website structure became outdated, and it was replaced by block layout.

Differences between block layout and tabular layout

If the table layout implies that the page contents are inside the tag

, then the concept of block layout is based on the active use of universal tags is a table that should be used to display tabular data and nothing more.

The only noticeable disadvantage of block layout is that sites made on it may be displayed differently in browsers. To avoid this, you need to make the layout “cross-browser”, that is, displayed equally by any browser.

The essence of block layout

IN graphic editor a website layout is created: it is marked where which area of ​​the page (header, bottom, sidebar, main content) will be located and how much space it will take up, pictures and backgrounds are prepared.

Each part of the page is placed in its own block