Comparison of table and block layout. What is better: block or table layout? Table or block layout, which is better?
Over the past two years, all I have heard from the customer(s) is that he wants to make up his existing website design layout using blocks. Those. he needs a block layout built on DIVs and CSS. But is this code really that good? I've been thinking about this for a long time. I had to create different sites, many of which were laid out using tables, blocks or third option blocks and tables.
In my opinion, the advantages of block layout over tabular layout are obvious:
- small size of HTML code compared to tables
- the main parameters and characteristics of the blocks are stored in a separate CSS file, which is perfectly cached by browsers and does not require constant loading.
- the ability to place the main content at the very top of the page (in the code itself), but display it on the screen at any point, even at the very bottom. simply setting the appropriate parameters to the block.
But along with these seemingly advantages, a number of problems and disadvantages arise that are associated with the block layout process itself and with its display in different browsers (Particularly problems arise with Internet Explorer 6).
Main disadvantages, which you should also pay attention to:
- Writing code that works correctly in all browsers, and subsequently displaying the page correctly, requires much more time than when using table layout
- Sometimes the written code turns out to be much larger than initially expected, this happens as a result of various adjustments, adjustments, hacks or additionally written styles for individual browsers
- Often you have to resort to using JavaScript or libraries like jQuery, which also does not have the best effect on the site as a whole. The page may not display correctly if the user's browser does not support JS execution or this function is disabled.
- Again, regarding such a problematic browser as IE6. In block layout, the float positioning parameter (left or right) is often used; blocks often begin to jump and crawl under each other when the page (browser window) size changes. It was also noticed that when everything works fine in IE Tester (6), in IE6 itself there were complete flaws.
- It is often necessary to use additional pictures to paint over or adjust the background. For example, when the navigation block cannot be stretched across the entire height of the page to the footer, a method is used to draw false columns - Faux columns
- Also, often the cost of such work is more than the cost of table layout.
The end result and the time spent on it may often not be justified. For this reason, I think it’s worth thinking carefully about how you will layout, using what method?
Greetings dear readers, in this issue we will talk about types of layout. You've all probably heard about block and tabular layout, today I would like to talk about these two different approaches to website layout. In the previous article, I described how to protect electronic mail, a little earlier we looked at a specific example of a store using the modern virtuemart component for the free CMS joomla.
This article will be useful to novice web developers who are just embarking on the thorny path of “site builders” and want make websites yourself. Experienced web developers will also be able to learn something for themselves; in particular, the article compares advantages and disadvantages of table and block layout.
Perhaps we should start with what is website layout? The layout designer receives a layout of the future website from the designer; as a rule, the layouts are provided in Photoshop format. A layout is essentially a drawing, only more detailed, in it individual elements (menus, website headers...) are separated into layers, this happens naturally when the designer draws the layout, in addition, it is very convenient, you can easily copy the drawing from the desired layer, see font parameters, etc. So the essence of layout is to transform the layout into an HTML document and compile a set of CSS rules.
It should be noted that layout is a creative process, not the same, of course, as drawing a layout in Photoshop, but, nevertheless, there is a share of creativity in this, especially at the initial stage; then, with increasing experience, the layout process can be mechanized. The quality of the layout is assessed by how much the layout of the site differs from the layout.
Types of layout
As stated in the title layout can be block or tabular. In block layout, site elements are structured using blocks (div), in tabular layout they are done with tables (table).Table layout
Table layout used at the dawn of website building, it was popular among novice web developers. It should be noted that many webmasters even now make do with table layout quite effectively, as they say - the master’s work is afraid. Personally, I prefer block layout to tabular layout, but we’re not talking about tastes here. The idea is based on presenting the site in the form of a table. As you know, the vast majority of sites have a standard structure that can be detailed for a specific task. Let's take a look at a typical website as an example.
which contains a header, a content area, a right sidebar and a footer, this is the simple structure of my blog. We implement this structure with a table
| a cap | |
| content | sidebar |
| footer | |
the table should be set to a specific fixed width if the layout has a fixed width or 100% if the layout is fluid, in which case the table will stretch across the width of the screen depending on the resolution of the monitor.
Advantages and disadvantages of table layout:
- Easy to understand, does not require deeper knowledge of HTML and CSS (+)
- Intuitive to build, minimum CSS rules (+)
- It is difficult to understand HTML code with a more complex site structure (- )
- Until the entire table is loaded, it will not be shown on the screen (-)
- Complex design with overlapping elements cannot be implemented (-)
- A lot of unnecessary code (-)
Let's take a closer look at point 4. The fact is that HTML tables are designed in such a way that the browser cannot know in advance how to draw the table with its contents until it is loaded; until the last picture in the table is loaded, the table will not be shown on the browser screen , which can cause users to leave the site without waiting for the page to display, since the visitor does not see anything on the screen for some time. It seems like the site is slowing down, but in fact the browser is waiting until all table elements are loaded.
block layout
Block layout is based on the fact that HTML block elements are usually arranged vertically, top to bottom, one after another, in the order in which they appear in the HTML code. In addition, blocks can be given the property of buoyancy ( float:left | right | none | inherit). If you specify the float:left property to a block, then it will be aligned to the left, and all other blocks will ignore it, as if this block does not exist, with the exception of text, other blocks that are set to the same property will float around it to the right, as much as possible allows the width of the screen or element within which they are located. It should be noted that any element can be made block by setting the display:block property to it, initially only div elements are considered block elements by default, for non-block elements ( span, p ) the float property is ignored and such elements are arranged as usual sequentially from top to bottom. To ensure that the float property is not ignored, you must set the elements' display:block property.float:right will align the block to the right, and all other blocks will ignore it, or flow around it if the same property is set to them and if two or more blocks with the specified property appear in a row in the code, then the block that comes first will be placed first to the right in the code, the rest flow around it on the left.
The float:none property cancels the buoyancy effect for the block, but this does not mean that the block will be positioned as usual from top to bottom, if a block with a buoyancy effect is located above, then the lower block will ignore the upper one and will stand under it, so that this does not need to be specified for this block property clear:both . Wow, difficult right? It only seems at first glance, but in fact everything is logical and simple, you just need to practice.
float:inherit - sets the buoyancy property, the same as that of the parent block (the block in which this child block is nested).
We need specific examples, I don’t feel convincing, but it turns out. Let's create a simple example, first a base, a red block with a width of 400 px. height 350 px. and align it in the middle of the screen.
Now you need to add a couple more blocks to this block, green and gray with a height and width of 100 px, the gray block has a height of 120 px.
It can be seen that the blocks are located in the general flow from bottom to top, in the order in which they appear in the code, first green, then gray, and finally blue. Let's set the green block to float:left so that the gray and blue blocks ignore it.
As you can see, the gray block ignored the green block and stood under it, the green block, as if on its own, the blue block lined up behind the gray one. Let's set a flow around all the blocks.
It can be seen that the blocks are lined up one after another in the order in which they appear in the code. Let's try to place two blocks one behind the other, and the third below as usual. To do this, you need to remove the float:left property from the third block, but this is not enough, since it will crawl under the first two blocks, as we saw earlier. To prevent this from happening, you need to set the property clear:both to the third block;
This is the structure we got; when setting the width of the blocks, we took into account the fact that the frame is 1 pixel. increases the block size, so the header size is set to 398 pixels. not 400 pixels.
Advantages and disadvantages of block layout:
- Less page weight due to less code (+)
- Implementation of complex design with overlapping blocks (+)
- Difficult to master, table layout is easier (-)
- More often we have to solve cross-browser issues. blocks may overlap when changing screen resolution, scaling (-)
Personally, I started with table layout, now I use block layout, I mastered it quite a long time ago, it was easy, although it has a number of disadvantages, I am more accustomed and easier to use block layout.
That's all, dear readers, come back often.
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 options for creating more dynamic pages are already beginning to emerge.
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. It looks like IE10 will be the harbinger of a new era of CSS markup that will allow you to create great, dynamic, and engaging websites using capabilities never before possible.
In this article, the author examines various markup methods 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 the 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 a 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 it should work on all 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
In the CSS section, I talked about the basic principles of CSS and typical cases of its use. The basics of CSS, possible types of selectors, and the structure of HTML from a CSS point of view were reviewed. 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.
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.
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. – For this type of page, 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 make the central panel “elastic” or even allow it to occupy all the space remaining after fixed sections in the browser window.
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.
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 understand the techniques for fine-tuning the markup. In the case of floating layers, the horizontal position of a page element is usually set using the CSS property margin, 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 it to negative values, thereby moving the element to the left of its original 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 |
| | /*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; |
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 |
| | 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-top: -20px; font-weight: bold; text-transform: capitalize; position: relative; position: absolute; left: 205px; position: absolute; position: absolute; position: absolute; |
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 many 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 stylingOne 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).
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 this way: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).WHATWG HTML specNote: 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.
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)
- 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
- “Don't use if you think x > would work too” - Hixie on IRC
- Perhaps we should add “Go to” for convenience?
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 regarding 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 more work for yourself, but not improving your content description.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
may not only be 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 common problem encountered with 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 HTML code of the document, 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 tag and a 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 the align attribute aligns the paragraph's contents 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 " a 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. To begin with, 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- an active element of a 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 horizontal dividing 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 the appearance of a 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.
There are tags for formatting tables and organizing lists. It is quite simple to master hypertext markup language, and it is quite simple, if desired, to create and publish your own website on the Internet.
1. Convenience and ease of working with table cells used as elements of the structure of the electronic publication. Using a table, you can easily create simple structures. If it is necessary to specify a more complex structure, we will spend a little more time. But when scaling the browser window, the columns will retain their original appearance, as well as their relative positions. In addition, regardless of the content of neighboring cells, they will remain the same in height.
2.Using a table layout is well suited for creating a so-called “fluid” layout, in which the width depends on the width of the browser window.
3.In table cells, we can align horizontally and vertically at the same time.
4.Least dependent on the browser chosen by the user.
Disadvantages of table layout:
1.To display the page, you must wait until the browser loads the entire table.
2.More cumbersome and less understandable code when creating tables, because complex hierarchical structure of nested tags.
3. There is no separation of design and content.
4.Poor indexing. Fragmentation of information makes it difficult for search engines to properly index the page.
5.Lack of a scroll bar (with frame layout you can scroll parts).
6.Layout does not comply with html and css standards (tables should only be for tabular data).
Advantages of block layout:
1.The code of HTML pages has been greatly reduced through the use of div elements.
2. There is the possibility of non-standard nesting of blocks into each other - you can place elements however you want.
3.Blocks are displayed as they are loaded, which speeds up work with electronic publications.
4.Better indexing by search engines.
5. It is possible to arrange several layers on top of each other, which helps improve indexing.
6.Ability to use scroll bars for individual blocks.
7.From a fashion point of view, this layout is now the most popularJ
Disadvantages of block layout:
1.If the screen resolution of the user’s monitor is low, the blocks may change their relative positions.
2.In different browsers (old versions), the layout may look different.
3.This layout is the most difficult.
Block-based fixed layout using CSS.
There are four different positioning methods.
Static positioning
HTML elements are positioned statically by default. A statically positioned element is always positioned according to the standard flow of elements on the page.
Statically positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
A fixed-position element is positioned relative to the browser window.
It won't move even if the window is scrolled:
Example:
Note: IE7 and IE8 support the value fixed only if document type!DOCTYPE is specified.
Fixed elements are removed from the normal flow. The document and other elements behave as if the fixed element does not exist.
Fixed elements can overlap other elements.
Absolute Positioning
:
Example:
position:absolute;
Block-based responsive layout with CSS.
CSS positioning properties allow you to position an element. They can also position an element behind another, and specify what should happen when the element's contents are too large.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set.
Relative Positioning
Example:
position:relative;
Example:
position:relative;
Relatively positioned elements are often used as containers for absolutely positioned elements.
Apply absolute positioning on the page. z-index rule.
Absolute Positioning
An absolutely positioned element is positioned relative to the first parent element that is positioned other than statically. If no such element is found, the parent element is taken as :
Example
position:absolute;
Absolutely positioned elements are removed from the standard element flow. The document and other elements behave as if the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.
z-index property specifies the vertical order for the element.
position:absolute;
An element with a larger vertical order is always displayed ahead of an element with a smaller vertical order.
Note: z-index only works for positioned elements (position:absolute, position:relative or position:fixed).
The z-index property is supported by all major browsers.
Note: The "inherit" value is not supported in IE7 and earlier. IE8 requires a!DOCTYPE declaration. IE9 supports "inherit".
Property Values:
Auto: Sets the vertical order to be the same as the parent element. Used by default
Number: Sets the vertical order value of the element. Negative values are acceptable
Inherit: Specifies that the vertical order should be inherited from the parent element
Applying relative positioning. Creating volume and shadow effects.
Relative Positioning
A relatively positioned element is positioned relative to its normal position.
Example
position:relative;
Exampleh2.pos_top
position:relative;
CSS3 Container Shadow
In CSS3, the box-shadow property is used to add a shadow to containers:
Example
Adding a container shadow to a div element:
box-shadow: 10px 10px 5px #888888;
Webkit-box-shadow: 10px 10px 5px #888888; /* Safari */)
CSS3 Border-Image
Through the CSS3 border-image property, you can use an image to create a border:
The border-image property allows you to specify an image border.
Example
Using an image to create a border around a div element:
border-image:url(border.png) 30 30 round;
Moz-border-image:url(border.png) 30 30 round; /* Firefox */
Webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
O-border-image:url(border.png) 30 30 round; /* Opera */)
New Properties:
border-image: Shorthand property for setting all properties of the border-image-* group 3
border-radius: Shorthand property for setting all four properties of border-*-radius 3
box-shadow: Attaches one or more shadow effects to a container
Layout is the creation of an html page in such a way that all elements are displayed as intended by the design. With correct and high-quality layout, the site will look the same in different browsers, the content will be available for all screens. There are three types of layout: tabular, block and mixed. After reading this article to the end, you will be able to choose for yourself which one you can use to achieve the best result in your case. Let's highlight all the advantages and disadvantages of each type.
Tabular was formed even before the advent of CSS. The page is a large table formed using tags
| , |
| . Creating a website using this method is most often accompanied by dividing the upper part (header), which contains the header and logo, the lower part (footer), which is intended to display copyright and reference information, the center of the page (center, middle, content, etc.) places the main content, content.
Advantages: The main disadvantages of table layout: Block layout is based on the CSS box model. In this case, the page consists of blocks wrapped in tags in the html code . The general scheme of a block is as follows: content, the width and height of which can be set by the “width” and “height” properties, the internal padding (between the content and the frame) by the “padding” property, the frame by the “border” property and the external padding by the “margin”. It is very easy to create a website from such blocks. Blocks can be nested inside each other, each of them can be assigned a class and id. Many “chips” have already been invented that compensate for the shortcomings of blocks, for example, you can align a block vertically like this: height:200px; display:inline-block; vertical-align:center. As a last resort, you can tell the block to behave like a table (table tag) using the display:table property, a row (tr tag) - display:table-row, or a cell (td tag) - display:table-cell. Advantages of block layout: Flaws: What to choose? |
|---|
