Semantics

Use elements (sometimes incorrectly called “tags”) for their intended purpose: headers for headers, p for paragraphs, a for links, etc.

This makes the code easier to read, edit, and maintain.

Alternative for multimedia

Try to specify alternate content for your media, such as pictures, videos, or animations defined with canvas... For pictures, this is meaningful alternative text ( alt), and for video and audio decryption of text and signatures if possible.

Alternative content can help people with disabilities. For example, it is difficult for a visually impaired person to understand what is in the picture if it is not specified @alt... It can be difficult for other people to understand what a video or audio recording is talking about.

(If for the picture alt redundant, or used for decorative purposes only in places where CSS cannot be used, use empty alt text alt = "" )

Separation of responsibility

Keep structure (markup), layout (styles), and behavior (scripts) separate, and try to keep interactions between them to a minimum.

Make sure that documents and templates contain only HTML, and that HTML serves only to define the structure of the document. Move all the code responsible for the design into the style files, and the code responsible for the behavior into the scripts.

Try to keep their overlaps to a minimum by including as few styles and scripts as possible in your templates.

Separating structure from presentation and behavior helps make your code easier to maintain. Changing templates and HTML documents always takes longer than changing style files or scripts.

Not recommended:

HTML Sucks

I've read about this somewhere before, but now everything is clear for sure: HTML is bullshit !! 1

My new CSS design

I've read about this before, but finally did it myself: I use the principle of separation of concerns and do not shove the design in HTML

So cool!

Mnemonic links

The only exception to this rule is HTML service characters (for example < and & ) as well as auxiliary and "invisible" characters (for example, non-breaking space).

Optional tags

Optional tags can be omitted to reduce file size and improve code readability. The HTML5 spec has a list of optional tags.

(It may take a while for this approach to become ubiquitous because it is very different from what web developers are usually taught. In terms of consistency, and the simplicity of the code, it is best to omit all optional tags rather than some of the them).

Not recommended:
Recommended:

So that

"Type" attribute

Don't use the attribute type when connecting styles (except for options when something other than CSS is used) and scripts (except for options when it is not JavaScript).

Specify Attribute type not necessary in this case because HTML5 uses text / css and text / javascript by default. This will work even in older browsers.

Not recommended:
Recommended:
Not recommended:
Recommended:

HTML formatting rules

Formatting

Regardless of the styles specified for the element (CSS allows you to change the behavior of an element using the property display), wrap each block or table element on a new line.

Also, indent all elements nested within a block or table element.

(If you are having trouble with whitespace between list items, you can put all li elements on one line. Lintu [utility for checking the quality of the code approx. per.] it is recommended in this case to issue a warning instead of an error.

• Masha
• Glasha
• Cheburash

CSS styling rules

CSS validity

Unless you need browser-dependent code or validator errors, use valid CSS.

Use tools like the W3C CSS Validator to validate your code.

Validity is an important yet measurable quality of code. Writing valid CSS helps you get rid of redundant code and ensures that your stylesheets are used correctly ...

Class identifiers and names

Instead of using ciphers, or describing the appearance of an element, try expressing the meaning of its creation in the name of the class or identifier, or give it a template name ...

Template names are simply a variation on the name for elements that have no special purpose or are indistinguishable from their siblings. They are usually needed as "Helpers."

The use of functional or template names reduces the need for unnecessary changes to the document or templates.

Not recommended: / * Not recommended: does not make sense * / # yee-1901 () / * Not recommended: description of appearance * / .button-green () .clear ()
Recommended:/ * Recommended: accurate and to the point * / #gallery () #login () .video () / * Recommended: wildcard name * / .aux () .alt ()

Names of identifiers and classes

Try to articulate exactly what a given element should do, while being as short as possible.

This use of classes and identifiers contributes to making the code easier to understand and more efficient.

Type selectors

Unless necessary (for example, with helper classes), do not use element names with class names or identifiers.

Abbreviated property notation

CSS offers many different shorthand (English) notation forms (for example font), which are recommended to be used wherever possible, even if only one of the values ​​is specified.

Using property shorthand is useful for efficiency and better understanding of your code.

Not recommended: / * Not recommended * / border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
Recommended:/ * Recommended * / border-top: 0; font: 100% / 1.6 palatino, georgia, serif; padding: 0 1em 2em;

0 and units

Do not specify units for zero values ​​unless there is a reason to do so.

Integer 0

Do not put it 0 in the integer part in values ​​between -1 and 1.

Quotes in links

Don't use quotes ( "" , "" ) With url () .

Hexadecimal color names

The 3-character hexadecimal notation for colors is shorter and takes up less space.

Prefixes

In large projects, as well as in code that will be used for other projects or other sites, use prefixes (as namespaces) for identifiers and class names. Use short, unique names followed by a hyphen.

Using namespaces helps prevent name conflicts and can make your site easier to maintain. For example, when searching and replacing.

Separators in classes and identifiers

Do not use anything other than a hyphen to combine words and abbreviations in selectors to improve readability and ease of understanding of your code.

Not recommended: / * Not recommended: words “demo” and “image” are not separated * / .demoimage () / * Not recommended: use underscore instead of hyphen * / .error_status ()
Recommended:/ * Recommended * / # video-id () .ads-sample ()

Khaki

It seems tempting to fight the differences in how different browsers work with CSS filters, hacks, or other workarounds. All of these approaches can only be considered as a last resort if you want an efficient and easily maintainable codebase. Simply put, allowing hacks and browser definitions will hurt the project in the long run, as it means the project is on the path of least resistance. This makes hacks easier to use and allows them to be used more and more often, which will result in them being used too often.

CSS formatting rules

Ordering ads

Set your ads alphabetically for consistent code that's easy to work with.

Ignore browser prefixes when sorting. Moreover, if several browser prefixes are used for one property, they must also be sorted (for example -moz should be in front of --webkit )

Block indents.

Always indent any blocky content, such as rules within rules or declarations, to show the hierarchy and make the code easier to understand.

After the announcements

Use a semicolon after each declaration for consistency in your code and to make it easier to add new properties.

After property names

Always use one space after the colon (but not before) in declarations for ordering in your code.

Selector and announcement separation

Start each selector or declaration on a new line.

Separation of rules

Always put line breaks between rules.

Meta CSS rules

Grouping rules

Organize rules into groups whenever possible. Mark groups with comments and separate with line breaks.

Conclusion

If you are editing code, take a few minutes to understand how it is written. If math operators are separated by spaces, do the same. If the comments are surrounded by parentheses or dashes, do the same with your comments.

The idea behind this tutorial is to create a common vocabulary that allows developers to focus on what they want to express, not on that how.

We offer uniform design rules that allow you to write code in the same style, but the style of the code already used in the project is also important.

If your code is very different from the existing one, it can throw the reader out of rhythm and make it difficult to read. Try to avoid this.

Note from the translator

Thanks to everyone who has read this far.

Tags: Add Tags

• 1. HTML documents are structured documents.
• 2. The names of the elements can be written in any case.
• 3. Attribute names can be written in any case.
• 4. The values ​​of the attributes are case-sensitive, especially the address (a feature of Unix-operating systems consists in different interpretations of characters in different registers, therefore files

picture .gif and picture.GIF are different!).

• 5. Element names cannot contain spaces.
• 6. If attribute values ​​contain spaces, they must be quoted.
• 7. Extra spaces, tabs and carriage returns are ignored and compressed into a single space.
• 8. Elements can be nested within each other. In this case, the nesting rule must be observed. Inside the nested element, in addition to the opening tag, there must also be a closing tag. The intersections are incorrect:

HTML document structure

9. Unfamiliar elements and attributes are ignored by browsers ("condescension to errors").

Most documents have standard elements such as headings, paragraphs, or lists. Using HTML tags, you can denote these elements, providing web browsers with minimal information to display these elements, while maintaining the overall structure and information completeness of documents. All it takes to read an HTML document is a web browser, which interprets the HTML tags and renders the document on the screen as the author gives it.

When the web browser receives a document, it determines how the document should be interpreted. The very first tag that appears in the document must be a tag ... This tag tells the web browser that the document is written using HTML.

HTML comments. Like any language, HTML allows you to insert comments into the body of a document that are preserved across the network but not displayed by the browser. Often in the comment, some tags or entire syntax constructions are hidden from older versions of browsers that are not able to process them. Comments can appear anywhere in the document and in any quantity. It should be remembered that comments increase the size of the document and, consequently, the load time.

General heading part of the document. The heading tag of the document must be used immediately after the tag and nowhere else in the body of the document. This tag is a general description of the document. Start tag placed immediately before the tag , placed inside tags ... The document title does not appear when the document itself is displayed in the window.

Document body tags. Document body tags identify the components of an HTML document that are displayed in the window. The body of a document can contain links to other documents, text, and other formatted information.

The body of the document. The body of the document must be between tags and... This is the part of the document that is displayed as text and graphic (semantic) information in your document.

Heading levels<Нх>. The first level of headings (the largest) is indicated by the number 1, the next - 2, and so on until the number 6. Most browsers support the interpretation of six levels of headings, defining each of them its own style. For most cases, the text of such a heading will become bold, and an empty line will be struck after the text. It is important that these tags define the logical structure of the document and participate in indexing by Internet search engines. Headings above level six are non-standard and may not be supported by the browser.

Paragraph tag<Р>... V Unlike most word processors, HTML documents ignore carriage returns. Browser splits paragraphs only if tag is present<Р>... If you do not separate paragraphs with a tag<Р>, then the document will appear as one large paragraph.

Preformatted text tag

.
 Tag 
Allows the presentation of text with specific formatting on the screen.  Preformatted text ends with a trailing tag
...  Within preformatted text, it is allowed to use: line feed, tabs (shift eight characters to the right), disproportionate Courier font set by the browser.

List tags. There are three main types of lists in an HTML document: numbered, bulleted, and descriptive lists.
You can create nested lists by using different list tags or by repeating one within the other.  To do this, you just need to place one pair of tags (start and end) inside another.  Whether nested list items have the same bullet points to denote a list item is browser dependent.
Numbered lists.  V In a numbered list, the browser automatically inserts the item numbers in order.  This means that if you delete one or more elements of a numbered list, then the rest of the numbers will be automatically recalculated.
 
and ends with the tag
 
.

Bulleted lists.  For bulleted lists the browser usually uses bullets for the list item.  The type of marker is usually customized by the browser user.
A numbered list begins with a start tag 
and ends with the tag
...  Each list item starts with a tag<ы>.

Font formatting. HTML allows two approaches to font selection of text fragments.  On the one hand, you can directly indicate that the font in a certain area of ​​the text should be bold or italic, i.e.  change the physical style of the text.  On the other hand, you can mark some piece of text as having some logical style other than normal, leaving the interpretation of that style to the browser.
Graphics within an HTML document. One of the most attractive features of the WEB is the ability to include graphical and other types of data in an HTML document.
There are two ways to use graphics in HTML documents.  The first is the embedding of images into a document, which allows the user to see images directly in the context of other elements of the document.  This is done using the tag ...  This tag is dotted, i.e.  it doesn't close.  Tag syntax:

A required parameter has the same syntax as a standard URL.  This URL tells the browser where the
drawing.  The drawing must be stored in a graphical format supported by the browser.  Today these are GIF, JPG, PNG formats.  They are supported by most browsers.
ALT = "text"
This optional element specifies the text that will be displayed by a browser that does not support displaying graphics or with disabled image graphics.  This is usually a short description of the image that the user might or will be able to see on the screen.  If this parameter is absent, then most browsers display an empty border in place of the picture.  Tag Recommended if users are using a browser that does not support graphics mode, such as Lynx, and for indexing by search engines.  The text is also visible when holding the mouse cursor for some time without moving over the image in the form of a system tooltip under the cursor.
Most browsers allow you to include a background image in your document, which will duplicate like a bathroom tile and appear in the background of the entire document.  This is the second way.  Some users like background graphics, some don't.  An unobtrusive translucent drawing (wallpaper) usually looks good as a background for most documents.
Hypertext links are a key component that makes the WEB attractive to users.  By adding hypertext links (hereinafter referred to as links), the user makes the set of documents connected and structured, which allows him to receive the information he needs as quickly and conveniently as possible.
Links have a standard format that allows the browser to interpret them and perform the necessary functions (call methods) depending on the type of the link.  Links can point to another document, a specific location within that document, or perform other functions such as requesting a file.  As a hyperlink, you can specify text or an image, or both.
The structure of links in an HTML document. In order for the browser to display the link to the URL, you need to place the text or picture inside the hyperlink tag.  The HTML syntax is as follows:
<А HREF="URL">text-or-picture-to-be-highlighted-as-a-link

Tag<А HREF="URL">opens the link description, and the tag- closes it.  Any text between these two tags is highlighted in a special way by the web browser.  Typically, this text appears underlined and highlighted.  The image is framed by a rectangular frame.  The text that denotes the URL is not displayed by the browser, but is only used to perform its intended actions when the link is activated (usually when the mouse is clicked on the highlighted or underlined text).
Links to labels within the document. You can make links to different sections or sections of the same document using special hidden labels for these sections.  This allows you to quickly jump from section to section within a document without scrolling the screen.  As soon as the user clicks on the link, the browser will move it to the specified section of the document, and the line containing the label for this section will be placed on the first line of the browser window (if the document's "length" in the browser window is enough).