Footer nailed to the bottom with your own hands. How to properly press a floating footer to the bottom of the page Footer html design
I remember that at the moment when I began to switch from tables to div layout, one of the difficulties that I encountered was the following - how to press the site footer to the very bottom of the browser window so that the page would look stretched out to the full height, regardless of the volume of text, and if the page height is greater than the height of the browser window (when a scroll appears), the footer would remain in its proper place.
If with the help of tables this problem is solved only by specifying the height for the table and/or the cell nested in it, then when using CSS in block layout a completely different approach is taken.
In the process of practice, I identified 5 ways to push the footer to the bottom of the browser window using CSS.
The HTML code of all presented methods has the following structure (the only difference is the CSS code):
The CSS code below includes only those properties that are minimally necessary to implement the corresponding method. For each of them you can see a live example.
First wayThe Footer is pressed down by positioning it absolutely and stretching the height of the parent blocks (html , body and .wrapper) to 100%. In this case, the content block.content needs to specify a bottom margin that is equal to or greater than the height of the footer, otherwise the footer will cover part of the content.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( position: relative; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( position : absolute; left: 0; width: 100%;
Second wayThe Footer is pressed down by pulling the content block and its “parents” to the full height of the browser window and lifting the footer up through a negative margin (margin-top) to get rid of the vertical scroll that appears. In this case, it is necessary to indicate the height of the basement, and it must be equal to the amount of indentation.
* ( margin: 0; padding: 0; ) html, body, .wrapper ( height: 100%; ) .content ( box-sizing: border-box; min-height: 100%; padding-bottom: 90px; ) . footer ( height: 80px; margin-top: -80px; )
Thanks to the box-sizing: border-box property, we prevent the box with class .content from exceeding 100% height. That is, in this case min-height: 100% + padding-bottom: 90px equals 100% of the browser window height.
Third wayIt is good because, unlike other methods (except for the 5th), the height of the footer does not matter.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: table; height: 100%; ) .content ( display: table-row; height: 100%; )
Here we emulate the behavior of a table by turning the .wrapper block into a table and the .content block into a table row (display: table and display: table-row properties respectively). Thanks to this, and the fact that the .content block and all its parent containers are set to 100% height, the content is stretched to its full height, minus the footer height, which is determined automatically - table emulation prevents the footer from extending beyond the height of the browser window.
As a result, the footer is pressed to the bottom.
Fourth methodThis method is unlike any of the previous ones, and its peculiarity is the use of the CSS function calc() and the vh unit of measurement, which are only supported by modern browsers. Here you need to know the exact height of the basement.
* ( margin: 0; padding: 0; ) .content ( min-height: calc(100vh - 80px); )
100vh is the height of the browser window, and 80px is the height of the footer. And using the calc() function we subtract the second value from the first, thereby pressing the footer to the bottom.
You can find out which browsers support calc() and vh on caniuse.com using the following links: calc() function support, vh unit support.
Fifth method (the most relevant)This best way of all those presented, however, it only works in modern browsers. As in the third method, the height of the footer does not matter.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: flex; flex-direction: column; min-height: 100%; ) .content ( flex: 1 0 auto ; ) .footer ( flex: 0 0 auto; )
You can find out about browser support for the flex property.
We are starting the fifth lesson on editing templates in CMS Joomla 3, this time we will talk about the footer for the site. Let's sort it out possible options Footer design and some approaches to creating it.
What is a footerThe footer or footer of a site is the lowest part of it, which usually contains information about the site, copyright, etc. Standard version in template Protostar, the footer does not contain any meaningful information:
The standard content of the footer is the current year, the name of the site and the “Back to Top” link leading to the top of the page. To be honest, this footer option is completely useless to visitors to our site, besides, the “Back to Top” link is absolutely unnecessary in our case, we have already made a beautiful button for these purposes.
Therefore, to begin with, I suggest getting rid of the standard footer content. Open the file index.php standard Protostar template and look for the code that is responsible for displaying the footer. The code between lines 205 and 219 is responsible for displaying the footer, which looks like as follows(depending on Joomla versions and changes made to the index file, the lines of code may differ):
" />
And for clarity, a screenshot:
It’s clear how the modules are displayed, but I’d like to dwell on the logo in more detail. The code responsible for displaying the logo is:
" />
At first glance, it looks like an ordinary HTML tag for an image, but instead of the usual file location path, PHP code is written. This code may seem complicated and incomprehensible at first glance, but in fact, if you look at it, it becomes clear that there is nothing complicated in it:
- - end of php code
As a result of using this php code, we get the relative path to the image file. In other words, no matter what name the site has or what template is used, the image will be taken from the images folder of the selected template.
We save the file index.php, now we can close it, we will no longer need it.
Now let's create several modules, which we will display in the newly created new positions. The first module will display a menu in the footer, and the second will display small text.
At the next stage, we create modules - for a menu with the “Menu” type and for text with the “HTML code” type (how to create a module). We select the newly created module positions as positions for them:
To distinguish our footer menu from the rest of the menu on the site, in the menu module settings we add the “_footer” class suffix to it:
In order not to explain what kind of module with the “HTML code” type is, I will show the principle of its operation in the screenshot:
I filled this module with certain text that will be displayed in the footer, in addition to the regular text, I wrote a small php code that displays the current year:
We save the modules and go to the site to check the result and this is what I got:
Although the result is there, it is not very impressive. Now we need to more adequately style the footer elements using CSS.
First, let's create new footer blocks:
Foot-left, .foot-center(float: left;) /*footer block alignment*/ .foot-left (width: 20%;) /*left block width*/ .foot-center (margin-left: -6px ;) /*central block indent*/ .foot-right ( /*right block*/ float: none; height: 60px; )
The next candidate for styling is the menu, to which I applied the following styles:
Ul.nav.menu_footer (margin: 0;) /*zero margins for the menu*/ ul.nav.menu_footer li ( /*design of menu text*/ font-family: "Lobster", cursive; font-size: 16px; line -height: 18px; ) ul.nav.menu_footer li.item-179 a ( /*Sitemap menu item*/ margin-left: 15px; color: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /*Menu item About the site*/ color: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Menu item Contacts*/ margin-left: 45px; border- bottom: 3px solid #0f70ad; color: #0f70ad;
And finally, we separate the footer from the main part of the content:
Footer.footer hr (border-top: 3px solid #fc8f30;) /*separate the footer from the main content*/
Save the style file, go to the site and look at the result:
So we created a footer for our website that looks much more fun than the standard one. This concludes this lesson, and in the next lesson we will check possible errors in adaptive design and correct some shortcomings. In addition, I advise you to read the article on how to quickly create a Joomla 3 template and in particular a footer from scratch using Bootstrap.
If shoes are the final component of any outfit, then the footer for an e-Commerce site is the final element of its selling design. By focusing on the bottom element, the footer, modern websites are ready to showcase their personality in every way possible. In a competitive e-commerce environment, there are enough original ideas, creativity and design trends. Before diversifying the footer of an E-commerce site, it is worth considering important points. What to place first and what is the best way to do it? Our roundup of inspiring footer designs has some interesting options.
Read also: 13 e-commerce marketing trends of 2019
Interesting statistics from Chartbeat. A study of the behavior of 25 million users showed how deeply they browse pages. It turns out that the user's attention is drawn to the space below the fold line. Receiving more practically useful information, visitors linger longest in the area 1200px from the top of the page (with an average 700px vertical screen in the browser), or behind the second screen.
View time (sec.) / Distance from top of page (pixels)
There is a large gap in the duration of viewing the first and second screens. The TOP is 4 seconds, the duration reaches a maximum (16 seconds) at 1200 pixels from the top and with further scrolling, it slowly decreases.
Share of visitors (%) / Distance from top of page (pixels)
A significant portion of visitors (more than 25%) do not even wait for the content to load and start scrolling the page. This means that only 75% will see the very top first. The most viewed area of the page is 550px (just above the fold line).
The study dispels the myth that users don't scroll to the bottom of the page and watch all the content. The footer is also important for a modern eCommerce site, and even has its own advantages.
Ideas on how to design a “basement” (footer), examples of selling designsThese 10 tips will tell you how to beautifully design the footer for a website - according to the rules of composition in web design and solving priority tasks. Apply the most appropriate tactics to improve usability, UX (user experience) and even increase sales.
1. Required informationTraditionally, the required organizational and legal issues are covered in the footer of the site. Notifications are designed with less noticeable text, which frees up other areas of the pages for more meaningful elements. Here's a sample list to consider:
- Copyright notices
- Legal Disclaimers
- Billing information
- Cookie Notice
The website selling the product must meet legal requirements and provide information about the procedure and return periods. Its location in the footer is convenient for both the selling resource and visitors.
Footer example: Yves Rocher
Online store of the Yves Rocher brand: full-screen footer with a pleasant design of alternating layers. Informs about the company, the infrastructure of the selling website - from order tracking to personal data policy. There are also tips on using the product, bonuses, promotions
Example footer: Lumity
Dealers of nutritional supplements are subject to increased legal requirements. responsibility. There are quite a few things they should/shouldn't say on their sales website. Links to legal information are highlighted in bold for better visibility.
A footer with a beautiful background image fits very organically into the overall design of the site. There is no clear boundary; rather, the content itself serves as a separator
Example footer: Saddleback Leather Co
A selling website with a beautiful retro header and footer design. 100-year warranty against defects in material and finish. The return conditions are accompanied by interesting stories... not everything is so sad with the necessary e-Commerce information, it turns out
2. Negative space – sufficient visual distanceWhen limiting the number of footer links, don't skimp on negative space - this will have a stunning effect on visual perception and improve readability. The general rule is that if you maintain visual hierarchy, central elements are noticed faster (can be used to your advantage!).
Footer example: QUAY AUSTRALIA
With a minimalistic style and a fixed drop-down menu, the online store can afford a spacious footer
Footer example: Incase
About a large amount of micro-negative space (between small elements) we can say this: as long as all the necessary information is present, it is legible and quickly perceived - everything is fine
Example footer: Stumptown Coffee Roasters
The spacious footer of a coffee site is an excellent completion of a clean design composition, in which there is a lot of macro-negative space (“air” between sections/sections)
3. Final call to actionRead also: 30+ examples and ideas for designing target action buttons
The stylish design of the footer speaks volumes about the resource itself. It’s important to note: the buyer stays here a little longer than in other parts of the page. A convenient opportunity for one more, final call to action. Often this is a subscription/newsletter, but you can also link a CTA call to account registration.
Footer example: Greetabl
Greetabl has a modestly designed bottom of its pages that includes a call to subscribe. With a minimum of elements, the call becomes noticeable, and in harmony with the turquoise background it turns into a decoration of the site
Footer example: Ecwid
Nice design with calls to action at the bottom of the pages. The structure of the selling website builder is universal. It has been translated into 35 languages for its million customers.
4. Floating cart – increasing the availability of selling functionalityAccessing the shopping cart from the bottom of the site is a great way to improve the usability and selling qualities of the site.
Footer example: Lemonadela
The selling website of the catering company is pleasant to look at and convenient for the buyer
5. Footer navigationThe bottom part of the site is ideal for information that is not often viewed: about the company, terms of service and privacy policy. In this case, the function of the footer is to save everyone. Feeling lost in the eCommerce environment, someone becomes interested in the e-commerce infrastructure, instinctively scrolling further...
Negative space is essential for the readability of content. In general, the “footer” is not for navigation purposes, unlike a menu or site map. Only in rare cases, e-commerce sites place individual product categories in the footer (
Hello, dear readers of the blog site. We continue the topic of block layout, which was started and continued in the three previous articles. In principle, we have already managed to create both a two- and three-column site layout, and we even managed to consider the nuances of creating a fluid layout.
In addition, in the first articles on website layout (), some basic concepts of webmastering were discussed, without understanding which it would be quite difficult to understand the nuances.
What problems did we have with our website layout?Today we will try to solve one small problem that may arise with the layout we created earlier. Most often, this situation occurs when viewing it on large monitors (with high resolution) and when displaying a page with a small amount of information.
In this case, it may turn out that the footer will not be pressed to the bottom of the screen, but will be located almost in its middle height, which in most cases will look ugly and not aesthetically pleasing.
Still, in my opinion, it is necessary to press the footer to the very bottom of the site layout, and this will be especially true in the case when the page height is less than the height of the user’s screen. This can be represented schematically like this:
Those. The correct behavior of the footer for the case of a small amount of information on the page and a large user screen will be as follows:
To implement this, we need to carry out a number of manipulations with the code of our layout. Moreover, we will make changes not only to the CSS style file Style.css, but also to Index.html, which contains the Html code and forms the Div blocks. But first things first.
As an example, we will use the three-column site layout we created earlier. In this case, Index.html will look like this:
Header Header Page Contents Page Contents Page Contents Page Contents Footer
And the following CSS properties were written in the Style.css file:
Body, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( background-color:#FFC0FF; clear:both; )
Well, the layout itself looked something like this:
As you can see, the footer is not pressed to the bottom and, therefore, does not meet our requirements (it is always located under the lowest column), so we will have to make adjustments to the code. The same thing can be done for a two-column layout, and for a rubber layout too. The method is universal.
How to push the footer to the bottom of the website layoutSo, we need to move the Div container with the footer to the bottom of the screen. To do this, you will first need to set the height of the entire page to one hundred percent (it will occupy the entire screen). This will be necessary in order to then change the size of the main block with the layout to 100%.
The entire content of the site page is placed in the opening and closing Body tags, and therefore we need to add another CSS property for the Body tag in Style.css, setting the height to 100%:
Body, html ( margin:0px; padding:0px; height: 100%; )
This will not affect the appearance in any way yet, but now the main blog can be stretched to the full height of the screen. Those. it was a kind of preparatory stage.
Basic CSS properties, if desired, you can look at. Now let’s set the container Div that contains our entire layout to a minimum height of 100%:
I also want to highlight it (div with id="maket"). To do this, I’ll give it a frame using the corresponding Border() property:
The border: solid 3px black property allows you to set a solid border (solid) 3 pixels thick in black for this container. This will allow you to clearly see that the container with the layout has stretched to the entire height of the screen, even with a small amount of information on the page:
Now we will need to remove the footer block from the general container and place it below, immediately after the general one. What will this give? And the fact that, finally, the footer in the layout will deign to go down, and will not, as before, be pressed against its longest column. In this case, Index.html will look like this:
Heading Header Left column Menu Menu Menu Menu Right column Menu Menu Menu Menu Page content Page content Contents Footer
Please note that the block with the footer is no longer located inside the general container (maket), and therefore its width is no longer regulated by the CSS properties specified for maket in the Style.css file. The width of the footer will stretch across the entire screen, but it will still be located at the bottom of the screen, immediately below the main block:
But again a problem arises, because in order to see the footer, you now have to scroll the screen in the browser (see the scroll bar in the picture above).
This happens because the main container (maket) occupies the entire height of the screen (this is determined by the min-height property: 100%), and the footer is located immediately behind it and to view it you will have to scroll, which is not very convenient and functional .
You can solve this problem by setting a negative padding for the Div container with the footer so that it moves upward by a distance equal to its height. In this case, the footer container will overlap the main one and fit into the height of the browser screen (i.e., you will not need to scroll to view it).
But in order to set a negative offset from the top, you need to know this very height of the footer, but we don’t know it yet.
Therefore, first we will set the height of the container containing the footer by setting the corresponding property in Style.css:
#footer( background-color:#FFC0FF; clear:both; height: 50px; )
And then we set a negative margin for it at the top to a height equal to its height:
This will allow the footer to rise up exactly to its own height and thereby fit into the browser screen (now we can remove the CSS property border: solid 3px black from the maket rule, so that the thickness of the border does not prevent our entire layout, including the footer, from fitting in the height of the screen) :
As you can see, now the scroll bar does not appear in the browser and our entire three-column block-based site layout fits on one screen (in case there is little information on the page) and has a footer located at the very bottom. Which is exactly what we needed to do.
We insert the spacer and fight Internet ExplorerBut a problem arises that will only appear when there is more information on the layout page and the following situation may arise:
It turns out that a situation may arise when the information in one of the layout columns overlaps the footer, which will not look nice. This happens because of the notorious negative padding that we set for it and which helped raise our basement against the main layout container.
Those. It turns out that at the bottom of the screen there are two blocks overlapping each other in the basement area.
The solution to this problem is to add a new empty Div container (the so-called spacer) to the main container of our layout (maket), in the place where the block with the footer was previously located.
By setting this new container to a height equal to the height of the footer, we can avoid information from the main container colliding with the block with the footer. Let's assign an ID () to this container called Rasporka and as a result the Index.html of our three-column layout will look like:
Header Header Left Column Menu Menu Menu Menu Right Column Menu Menu Menu Menu Page Contents Page Contents Page Contents Pages Pages Pages Pages Footer
And in Style.css we will write for this ( , which sets the height of this spacer container equal to the height of the basement:
#rasporka ( height: 50px; )
As a result, the footer will be pressed from below not to the information contained in the main container (for example, the text in the highest column), but to an area equal to the height of the footer with a spacer container containing no information.
This way we avoid collisions and distortions in our three-column layout. Everything will be clear and beautiful (delicate and noble):
As I mentioned above, the width of the footer must now be set separately, because... this container is no longer part of the main one. To do this, you need to add additional properties for the Footer to the CSS file, allowing you to set its width and align it horizontally in the middle of the screen.
It makes sense to set the width equal to the width of the entire layout using the Width property, and horizontal alignment can be done in the same way as we did for the entire layout on a block layout.
Thus, we will need to add additional properties for the ID Footer:
#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )
Using the width:800px property, the width is set to 800 pixels, and using the two properties margin-left: auto and margin-right: auto, the indentation to the left and right of the footer is set automatically, as a result of which these indents will be equal and our hero will be aligned to middle:
Well, it seems like there’s nothing left to improve, but that wasn’t the case. As always, our favorite browser Internet Explorer 6 does not understand something from the CSS properties we use. In this browser (and, perhaps, in some other old ones too), despite all our efforts, the footer will not be pressed to the bottom, but will still stick to the highest column of the site layout.
All this happens because ( does not understand the min-height: 100% property, which we used to set the minimum height of the main block equal to the screen height.
Therefore, to solve this problem we will have to use a so-called hack that allows us to explain (on our fingers) to older browsers what to do. Before the list of CSS properties for maket, you will need to insert the following combination:
* html #maket ( height: 100%; )
This rule will be applied only to the Internet Explorer 6 browser; others will not take it into account and implement it.
So, the final look of Style.css with the footer pressed to the bottom of the screen will be as follows:
Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; ) #rasporka ( height: 50px; )
Well, the final form of Index.html was given just above. That’s it, this series of articles devoted to block layout of 2 and 3 column fixed and fluid website layouts can be considered complete.
You can also watch the video “Working with Html div tag”:
Good luck to you! See you soon on the pages of the blog site
You might be interested
Block layout - We create two-column, three-column and fluid layouts for the site 
DiV layout - Create blocks for a two-column layout in HTML, determine their sizes and set positioning in CSS
In HTML5, several new tags have been introduced for the code structure: , , , , , which in some cases replace the usual . Although it seems that there is not much difference between the tags, there is a huge gap between them. Tags are aimed not at people who have no reason to look at the source code of a page, but at machines that interpret the code. Machines or robots do not understand, for them this is a typical markup tag - replace it with and the meaning will not change. Another thing is that the robot, having detected this tag, perceives it precisely as the header of a site or section.
What does this give in the end? Search engines are starting to index your site better because they are clearly separating page content from supporting elements. Speech browsers designed for blind people skip the header and go directly to the content. Sites may automatically share content and other information with each other. All these capabilities are called semantics and allow you to present data in a form convenient for robots.
Let's first make the site header using a tag (example 6.2).
Example 6.2. Usage
An attempt to add a background to the tag in the styles did not lead to anything; the background does not want to be displayed in some browsers. All new tags should first be made block-level via the display property, then they will begin to be displayed correctly (example 6.3).
Example 6.3. Site header
HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx
header ( display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; )
This example will work in all browsers except IE7 and IE8. Internet Explorer doesn't add style to elements it doesn't understand. This misunderstanding can be corrected by creating a dummy element using JavaScript. To do this, we will include this in the code.
document.createElement("header");
If there is one tag on the page, this script is quite suitable for the job. But I don’t want to repeat the line ten times for ten different tags, so we automate this process through a loop. The tags themselves are indicated in a list, separated by commas (example 6.4).
Example 6.4. Script for IE
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(","); for (var i = 0; i< e.length; i++) { document.createElement(e[i]); }
The script itself is enclosed in conditional comments so that it is executed only for IE version 8.0 and lower. IE9 already includes support for the new HTML5 tags.
You don’t have to embed the example above on your website; you can use a publicly available script written by Remy Sharp and distributed under the MIT license. To do this, just provide a link to it, as shown in example 6.5.
Example 6.5. Script for IE
All specified scripts must be located in the code before the CSS.
Thus, to fully use HTML5 tags in all browsers, it is enough to fulfill three conditions:
Now let's look at some HTML5 tags in more detail to understand their scope.
Example 6.6. Using a tag
HTML5 IE Cr Op Sa Fx
article Traces of unprecedented animals The story of how mysterious pink footprints with six fingers appeared near the dining room, and why this happened.
Defines a block that is not related to the main content for placing categories, links to the archive, tags and other information (example 6.7). Such a block, if it is located on the side, is usually called a “sidebar” or “sidebar”.
Example 6.7. Usage
HTML5 IE Cr Op Sa Fx
aside document.createElement("aside"); document.createElement("article"); aside ( background: #f0f0f0; /* Background color */ padding: 10px; /* Margins */ width: 200px; /* Sidebar width */ float: right; /* Wrap left */ ) article ( margin-right: 240px ; /* Right indent */ display: block; /* Block element */ )
Save electricity
Good language
Whose stick is bigger
The story is about how electricity had to be saved, what measures were taken for this, and where it actually went.Used to group any elements, for example, images and captions (example 6.8).
Example 6.8. Usage
HTML5 IE Cr Op Sa Fx
figure document.createElement("figure"); document.createElement("figcaption"); figure ( background: #5f6a72; /* Background color */ padding: 10px; /* Margins around */ display: block; /* Block element */ width: 150px; /* Width */ float: left; /* Blocks are lined up horizontal */ margin: 0 10px 10px 0; /* Padding */ text-align: center; /* Center alignment */ ) figcaption ( color: #fff; /* Text color */ )
Contains a description for the tag. The tag must be the first or last element in the group.
Defines the “footer” of a site or section; it usually contains the name of the author, the date of the document, contact and legal information (example 6.9).
Example 6.9. Usage
HTML5 IE Cr Op Sa Fx
footer Personal website of Kristina Vetrova Welcome!
I am glad to welcome you to my website.
Copyright Kristina VetrovaDefines the “header” of a site or section.
Used to group web page or section headings (Example 6.10).
Example 6.10. Usage
HTML5 IE Cr Op Sa Fx
hgroup Kristina Vetrova Personal website
Sets site navigation (example 6.11). If there are several blocks of links on a page, then priority links are usually placed in them. It is also acceptable to use multiple tags in a document. Do not put inside.
Example 6.11. Usage
HTML5 IE Cr Op Sa Fx
nav Cheburashka and the crocodile Gena Cheburashka | Gene | Shapoklyak | Lariska Welcome!
Defines a section of a document, which may include headings, header, footer, and body (Example 6.12). It is allowed to nest one tag inside another.
Example 6.12. Usage
HTML5 IE Cr Op Sa Fx
section Filming Polypropylene
The story is about how they made a film where the heroes were relaxing on the beach, then the antagonist came, beat up the protagonists, threw them into the pool, and what happened.
Good languageThe story is about how a studio for studying the Esperanto language took place, while above it, on the veranda, there was a prank studio where jokes were told, and what came of it.
Marks text within a tag as a date, time, or both date and time. Can be specified directly inside the container, or specified through the datetime attribute (example 6.13).
The date and time are specified in the international format ISO 8601. Examples of formatting are given in table. 6.1.
Each unit has its own specified shape and limitations.
- The year is specified in four digits (1860).
- Month - two digits (01 - January, 02 - February, 12 - December).
- Day - two numbers from 01 to 31.
- Hour - two digits from 00 to 23.
- Minutes are two digits from 00 to 59.
- Seconds are two digits from 00 to 59.
- Time zone - hours and minutes, indicated by a plus or minus sign.
The date and time are separated by a capital Latin letter T. The time zone, if necessary, is written after the time with a plus or minus sign. For example, for Moscow the time zone will be +03:00.
Example 6.13. Usage
HTML5 IE Cr Op Sa Fx
time
1957-10-04 The first artificial Earth satellite was launched.
1960-08-19 first flight of dogs into space.
1961-04-12 first manned space flight.
1963-06-16 first flight of a female astronaut.
1969-07-21 man landing on the moon.