Specifications for html5 in Russian. HTML5 coding standards. Blank lines and indentation
Want to quickly find a description of an HTML5 element or attribute used in a web page or web application? Here is a classic reference book that web designers and web developers have been trying to keep at hand for over 15 years.
The fifth edition of the book includes a complete description of HTML5 elements and attributes in accordance with the HTML5 Candidate Recommendation, HTML5.1 Working Draft and WHATWG standards. Features of the directory:
– an alphabetically ordered list of elements and attributes from HTML5, HTML5.1 and the WHATWG standard;
– examples of markup, content categories, content models and start/end tag requirements for each element;
– a description of the differences between the HTML5 and HTML4.01 specifications;
– tables of special characters;
– overview of API libraries used in HTML5.
Whether you're an experienced website developer or want to quickly build a website to the latest standards, you'll find this helpful book indispensable.
Did you like the article or book? Share with your friends:
All books presented on the site are for informational purposes only. Any use of them by you is permitted for informational purposes only. If you plan to use them in the future, you must purchase them from the copyright holders. The site administration is not responsible for your use of them.
Having read the title of the publication: “HTML5 Cheat Sheet in Russian” - everyone already guessed about the speech, but first a couple of paragraphs about HTML5 in general.
Work on the creation of HTML5 started in 2004. and continue to this day. HTML5 is planned as the most universal and functional version of HTML (HyperText Markup Language), because in one way or another, industry titans such as Apple, Mozilla, Opera, Microsoft and Google are involved in the creation of HTML5. Let me note that exactly Google Chrome, on this moment, supports the most HTML5 elements
Despite the fact that changes may be made to HTML5, because work on the HTML 5 specification is still underway and is still in process, technology development is happening so rapidly that HTML5 will soon be adopted and websites will need to be created using the wide capabilities of HTML5!
HTML5 cheat sheet in Russian will help in learningCoders and layout designers need to learn the innovations, tags and standards of HTML5 today, because despite the ongoing work on HTML5, some of its capabilities are already quite successfully used when creating websites. Naturally, you need to start learning HTML5 with tags, because new tags have appeared in HTML5, and some old ones will not be supported. Also, many tags from HTML4 came to HTML5. And what could be better and more convenient in learning something than a cheat sheet? Meet:
the first HTML5 cheat sheet in Russian in RuNetThe first HTML5 cheat sheet in Russian on the RuNet, includes new HTML5 elements that were previously widely used, but were written in the names of the styles. For example footer, header, section, article and others. In addition, the HTML5 cheat sheet in Russian contains all the tags old version HTML4, which moved to HTML5. Also, the HTML5 cheat sheet in Russian contains tags that are not supported by HTML5.
HTML5 cheat sheet in Russian, made in A4 formatThe first HTML5 cheat sheet in Russian in RuNet is made in A4 format, so it will be convenient for you to print it out and keep it at hand. I note that the HTML5 cheat sheet in Russian describes all the tags in one row, conveying the purpose of the tag as much as possible. Our HTML5 cheat sheet in Russian will be constantly refined and updated as tags are removed or added to HTML5. You can download the “HTML5 cheat sheet in Russian” from the link below. In the archive you will find 1 pdf High Quality and two jpg file in different extensions.
Download “HTML5 Cheat Sheet in Russian” (Number of downloads: 7996)The archive contains two jpg files in the extensions 1024×1448 and 2480×3508
upd 29.10.2014
More than two years have passed since the post was written and the actual creation of the cheat sheet on HTML 5. During this time, the cheat sheet was downloaded 3600 times), I am very pleased, I hope it was useful to those who studied layout in HTML 5. I learned a lot and learned from various forums and websites, and by creating a cheat sheet I wanted to show my gratitude, to repay my debt). Why am I writing an update in this post today, because today the development of HTML5 is finally finished!
HTML5 development is officially complete
HTML5 is officially "functionally complete". According to established global standards by the Worldwide Web Consortium (W3C). There are still some tests to be done, and it has not yet become an official Web standard, but for now it is safe to say that there will be no new features compared to the current version.
This means that web designers and app makers now have a “stable target” for a smooth transition to new standard by 2015. HTML5 markup language allows developers to add functionality to pages that previously required standalone applications or additional software, such as Java, Adobe Flash or Microsoft (MSFT, Fortune 500) Silverlight. He supports streaming video and geolocation services, offline tools and touch controls, among other bells and whistles.
It took more than 10 years to develop a new standard. CEO W3C Jeff Jaffe said in a prepared statement a few days ago that as of today, developers know they can rely on HTML5 for years to come. “In addition, developers will know what skills to develop in order to reach smartphones, cars, TVs, e-books, digital signs and devices not yet known,” he added.
Latest Microsoft versions Internet Explorer, Google Chrome, Mozilla Firefox and Apple Safari are already compatible with most HTML5 elements. The W3C is already working on HTML 5.1, the first parts of which have just been submitted as a draft.
Conventions HTML codeFor many web developers, HTML code specifications are poorly understood.
In 2000-2010, many web developers converted from HTML to XHTML.
Developers using XHTML are gradually developing good HTML writing specifications.
And in HTML5, we need to form relatively good code standards, several guidelines are given below the specification.
Use the correct document typeDocument type declaration on the first line HTML document:
DOCTYPE HTML>
If you want to use other labels like lowercase, you can use the following code:
DOCTYPE HTML>
Lowercase element namesHTML5 element name can be used in uppercase or lowercase letters.
- Mixed style case is very bad.
- Lowercase letters are easy to write.
This is a paragraph.
This is a paragraph.
This is a paragraph.
In HTML5, you don't want to close all elements (such as the element ), but we recommend that every element should add a closing tag.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
In HTML5, the empty HTML element does not need to be turned off:
We can write:
You can also write:
XML, XHTML and slash (/) is required.
If you plan to use your XML software page, this style is very good.
Lowercase attribute nameHTML5 allows you to use the property name in both uppercase and lowercase letters.
- Use case is a very bad habit.
- Developers typically use lowercase (similar to XHTML).
- The lowercase style looks more refreshing.
- Lowercase letters are easy to write.
Property value
HTML5 attribute values cannot be quoted.
- If the property value contains spaces, you must use quotes.
- Mixed style is not recommended, single style is suggested.
- Property values using quotes are easy to read.
The following example attribute value contains spaces, do not use quotes, it may not work:
Below are used double quotes, this is right:
propertiesImage Alt attributes are often used. If the image cannot be displayed, it can replace the image display.
= "HTML5" style = "width: 128px; height: 128px">
The image size is determined, can be reserved at the time of loading the specified value, reduce flickering.
= style "HTML5" = "width: 128px; height: 128px">
You can use spaces before and after the equals sign.
Avoid long lines of codeUsing the HTML editor, left and right scrolling code is awkward.
Each line of code is as much as possible less than 80 characters.
Blank lines and indentationDon't add a blank line for no reason.
For each functional block of logic, add a blank line, which makes it more readable.
Don't use unnecessary blank indented lines between shortcodes.
Extra empty lines and indents:
This tutorial
HTML
This tutorial teaches not only technology, but also sleep.
This textbook, teaching not only technology, but also in a dream,
This tutorial teaches not only technology, but also sleep.
This tutorial
In this tutorial, teaching not only technology, but also sleep.
This tutorial teaches not only technology, but also sleep.
This tutorial teaches not only technology, but also sleep.
This tutorial teaches not only technology, but also sleep.
Example form:
Name
Description
A
Description A
B
Description B
Let's omit and?
In the HTML5 standard, the tag can be omitted.
The following documents are valid HTML5:
Example:DOCTYPE HTML>
Page title
This is the title
This is a paragraph.
Try it »
element is the root element of the document, the language used to describe the page:
DOCTYPE HTML>
Language statement to make it easier to read on screens and search engines.
Let's omit either DOM or XML software crashes.
Let's omit the error occurs in older browsers (IE9).
Shall we omit it?In the HTML5 standard, the tag can be omitted.
The browser defaults to the contents before the element is added to the default.
examplesDOCTYPE HTML>
Page title
This is the title
This is a paragraph.
Try » Metadata
HTML5 requires an element whose title title describes the theme of the page:
In this tutorial
Title and language that allows the search engine to quickly understand the topic of your page:
DOCTYPE HTML>
In this tutorial
Web designer - HTML5 Specification (HTML 5)
Tags in HTML5 are XML-HTML tags that describe the structure of a web page, designed so that a computer program (search robot, etc.) can distinguish the main content of the page from the rest of the page (formulation and navigation elements): top, bottom, menu , page side elements, repeating (dynamic) blocks, etc. There is also a division at the level of the main content (page text). The HTML5 language itself is an add-on to HTML, XML, CSS, etc.
Page title Top of the web page, "header" Main menu of the web page Main body, article, page material Sidebar (sidebar) Bottom of the page, footer
Website structure- frame the main content of the page (article),
- frame the page header,
- frame the footer of the page,
- frame the main thing page menu,
- frame the sidebar of the page (sidebar),
- frame repeating blocks on the page (for example comments).
HTML5 web page template code elements.
Let's look at the list of new HTML5 tags responsible for dividing the page structure:
- tags that frame the design elements of the top part of the site, the so-called “page header”. Also header tags can be used as top part section tag.
- tags framing the main menu on the site.
- tags framing the main content of the page: article, blog entry, news, first forum entry, etc.
- tags framing the sidebar. A sidebar is a so-called “sidebar”, which usually contains blocks of headings (categories), clouds of tags (tags), a list latest entries and so on. You can also use aside tags to frame counters, widgets (for example, comments from VKontakte), and social buttons.
- framing tags bottom part site, the so-called “page footer”, which may contain the name of the author (company), contacts (addresses, telephone numbers), legal information (copyrights), etc. Footer tags can also be used as the bottom part of a section tag, i.e. the footer tags themselves will be located between the section tags
- tags framing repeating parts of a page or main content, for example, if there are several chapters of a story on a page, then each chapter can be placed between these tags. Or if you click on a link in the sidebar (for example, on a link of some category), then a page will appear on which there will be links with descriptions leading to articles belonging to this category, and links with descriptions can be framed with section tags, as well as products with descriptions in the online store, comments on posts, comments on a topic on forums, etc.
HTML5 at the text levelLet's look at the list of new HTML5 tags responsible for the semantic division of page text:
- the text located between these tags becomes “selected”. One of the purposes of mark tags is to frame words in the text that, for example, match the word entered by the user into the search line.
- tags are designed to create dates and/or times in the format
ISO of the form: YYYY-MM-DDThh:mm:ss , this format is understandable computer programs. Time tags can frame a date or text; if the tag frames text, then a datetime attribute is added to it, the value of which is the date and/or time in ISO format.
- tags are designed to store information that is either hidden or displayed (works like a spoiler).
- tags frame the title, if you click on it, text will appear (can be used as a spoiler), located between the details tags.
Additional HTML5 language tagsList of new HTML5 tags that enrich the language:
- tags are designed to display a static scale indicator, in which the measurement result does not change. To work, you need a minimum and maximum value.
- tags are designed to display a dynamic scale indicator (for example, a file download scale), in which the measurement result changes in real time.
- the tag must be located between menu tags, used when creating scripts in JavaScript.
- the command tag is placed between these tags.
- tags are intended to display the script's operation.
- tags are intended to create a list that will be displayed when typed in a text field.
- tags frame the description of an object (for example, an image), located between the figure tags..
- tags group various page objects with their own descriptions, for example, images with descriptions, products with descriptions, etc.
- tags are designed to group headings h*
- the tag is used to generate public/private key pairs, encrypt/decrypt data, create/verify a digital signature.
- tags frame the text and annotation to it.
- tags are located between ruby tags and are intended to frame the annotation.
- tags are intended for browsers that do not support ruby tags.
- the tag tells the browser where to place the word (" soft transfer") if this word does not fit in the browser window.
HTML5 tags describing new technologiesHTML5 introduces the ability to use many technologies and APIs that are part of the HTML5 language and not third party plugins, here are some of them:
- tags are intended for playing audio files, without using third party programs(plugins, extensions).
- tags are intended for playing video files, without the use of third-party programs (plugins, extensions).
- the tag is intended to indicate the path to audio/video files, located inside the audio and video tags.
- tags are intended to create a special area on the site in which you can create vector shapes and manipulate them using the JavaScript programming language. Canvas in the future should replace Flash technology (yeah, in theory...).
TagA tag is a special element that is designed to draw and manipulate vector shapes. The tag was created to replace Flash technology. Using the tag, you can draw vector shapes (images), and using JavaScript, manipulate these shapes, thereby creating animation (cartoons and even games) on the site.
Audio VideoUsing the tag, you can embed audio files on the page and listen to them. Element
Using the tag, you can embed video files on the page and view them. The element also creates a panel with play buttons.
JavaScript APIThe HTML5 specification describes how it should interact JavaScript language, with page elements via DOM technology. Also in HTML5, there are new methods for manipulating objects, for example, using JavaScript and these methods, you can programmatically control the buttons on the audio/video control panel.
XML technology supportIn an HTML document written using the HTML5 language, it is now possible to implement technologies associated with various XML formats, such as SVG or MathML.
SVGSVG - Scalable Vector Graphics vector graphics) is an XML format. Since HTML5 began to support XML formats, it is now possible to embed images created using SVG into an HTML document and manipulate them through JavaScript.
Example code for the green circle pattern:
Result:
MathMLMathML - Mathematical Markup Language (mathematical markup language) XML format. By using of this format You can describe various mathematical formulas.
Which tags in HTML5 are deprecated?Legacy tags in the HTML5 specification are:
and embed tag should be used instead
the abbr tag should be used instead
should be used instead audio tag
the ul tag should be used instead
..should be used instead iframe tag
you should use a bunch of form and input tags instead
and pre or code tags should be used instead
The pre tag should be used instead
the s tag should be used instead
Instead of formatting tags: , , , , , , , , , and , you should use CSS properties.
It is not recommended to use obsolete tags when creating websites on HTML5, but this does not mean that browsers no longer support them, for example, the work of a non-recommended tag underlining
Global attributes are attributes that can be embedded in any HTML document tag. New global attributes have appeared in HTML5, in the descriptions below they are highlighted with the word New
Let's look at the names and descriptions of global HTML5 attributes:
accesskey=" " - allows you to use any element (tag) of the page by pressing a pre-programmed key combination,
class=" " - allows you to set the class name,
contenteditable=" " - allows you to edit content item New,
contextmenu=" " - allows you to create a context menu for the New element,
dir=" " - allows you to manage text direction,
draggable=" " - allows the user to drag the element New,
dropzone=" " - allows you to specify what to do with an element when dragging New,
hiden=" " - allows you to hide the New element,
id=" " - allows you to set a unique identifier for an element,
lang=" " - allows you to specify the language code in the element content,
spellcheck=" " - allows you to specify whether or not spelling is checked in the content of the New element,
style=" " - allows you to create a style for an element,
tabindex=" " - allows you to create a rule that specifies in what order elements should receive focus when you press the Tab key,
title=" " - allows you to create a tooltip that appears when you hover your mouse over an element.
Since in the HTML5 specification, tags turned into full-fledged objects, the concept of a global attribute was already inherent in these objects, even for those tags that are not yet described in the specification.
Innovations in the HTML5 document code structureThe code structure in HTML5 has undergone some changes, here are some of them:
1. Unlike previous versions language, in HTML5 there is only one doctype:
For example, you can see it in the source code of the pages of this site (do not forget that there should be nothing before the doctype, no spaces, no line breaks, etc.).
2. In order to indicate the document language, now instead of the meta tag:
you need to use the lang="ru" attribute in the tag:
3. In order to indicate the document encoding, now instead of the meta tag:
you need to use a meta tag, without the http-equiv and content attributes
4. When creating a JavaScript script, now in the tag, there is no need to implement the type="text/javascript" and language="JavaScript" attributes.
5. Upon implementation CSS styles, now there is no need to implement the type="text/css" attribute in the and tags.
6. Link is an inline tag, so in early HTML specifications and XHTML, they were not recommended to frame block tags; now in the HTML5 specification this recommendation for links has been removed and they are now allowed to frame one or more block elements.
HeadingNow with HTML5, you can do this:
HeadingBased on materials from the site http://html-5.ru/, http://html-5.ru/uchebnik-html5
- Additions to HTML W3C from 2015-2017
- W3C Recommendations December 24, 1999
Often, web developers are not even aware that certain HTML coding standards exist. However, between 2000 and 2010, many web developers switched from HTML to XHTML. At the same time, XHTML forced developers to write valid and “well-formed” code. HTML5, when it comes to code validation, allows for some sloppiness.
However, consistency in style will make it easier for others to understand your HTML code.
Perhaps someday programs like reading programs XML data, you will need to read your HTML code. Thus, using well-formed, XHTML-like syntax is a reasonable approach.
Always make sure your code is neat, clean, and well-formed.
Use the correct document typeAlways declare the document type on the first line:
If you want to maintain consistency with lowercase tags, you can use the following document type definition:
Write element names in small letters
HTML5 allows both uppercase and lowercase letters in element names. However, it is better to always use small letters only. This is explained by the following considerations:
- Mixing capital and small letters in tag names is considered bad practice
This is a paragraph of text.
Very bad:
This is a paragraph of text.
This is a paragraph of text.
Close all HTML elementsIn HTML5, you are not required to close all elements (for example, the element
This is a paragraph of text.
This is a paragraph of text.
This is a paragraph of text.
This is a paragraph of text.
Close empty HTML elementsIn HTML5, whether or not to close empty elements depends on the desire of the web developer.
Acceptable:
Also acceptable:
However, the trailing slash (/) is REQUIRED in XHTML and XML.
If your web page is expected to be accessed by XML applications, then in empty HTML elements It's better to use a closing slash!
Use small letters for attribute namesIn HTML5, you can mix uppercase and lowercase letters when writing attribute names.
- Mixing capital and small letters in attribute names is considered bad practice
- Developers usually use small letters (like in XHTML)
- Lowercase writing looks cleaner
- Lowercase is easier to write
Enclose attribute values in quotes
HTML5 allows attribute values to be written without quotes. However, we recommend always enclosing attribute values in quotes because
- Mixing capital and small letters in meanings is considered bad practice
- Quoted values are easier to read
- You MUST quote if there are spaces in the values
Very bad:
This won't work because there are spaces in the value
| A | Description of A |
| B | Description of B |
According to the HTML5 standard, the tag and tag may not be used.
The following code is considered valid according to the HTML5 standard:
Page Title This is a text title
This is a paragraph of text.
The element is the root of the document. This is the recommended place to define the page language:
The page language declaration is important for both specialized applications (such as screen readers) and search engines.
In addition, if you do not write a tag or a tag, it can break the DOM and XML structure of the application. And skipping a tag can also lead to errors in older browsers (IE9).
Should I skip the tag?According to the HTML5 standard, the tag may not be used.
By default, browsers will add all elements before the opening tag inside the element they create.
You can reduce the complexity of the HTML structure by omitting the tag:
Page title Text title
This is a text paragraph.
MetadataThe element is required in HTML5. The page title should be filled with meaning:
To ensure correct interpretation and correct indexing of the page search engines, the definition of the page's language and character encoding must be declared as early as possible:
HTML5 Syntax and Coding Standards
Installing a viewport (viewing window)"Viewport" is the user-visible area of a web page. This area varies from device to device and per mobile phones will be smaller than on a computer screen.
HTML5 introduced a method that allows web designers to control the viewport using the .
You should always use a viewport control in the following form on all web pages:
This viewport control provides instructions to the browser on how to control the size and scaling of the page.
The width=device-width part sets the page width to match the screen width of the current device (which will vary depending on the device you are using).
The initial-scale=1.0 part sets First level increases when the page is first loaded by the browser.
Below you can see an example of a web page on a smartphone screen with and without the viewport meta tag installed:
Page with viewport meta tag
HTML commentsA short comment should be written on one line:
The world of free programs and useful tips
2024 whatsappss.ru