Tag design. A guide to using HTML tags and CSS. Highlighting text using html tags

You can use attributes to change properties, such as align, style, etc.

Text whose properties can be changed using a style.

A limited area where you can change properties (position, borders, padding, content properties, etc.).
* By default, area boundaries are not visible. There can be several areas on one page at once.

Text formatting:

Bold text

Italicize text

Underlined text

Strikethrough text

Small font

Large font

Footnote mark above or index below text

Text with hint

Font sizes:

13 point font

15 point font

Font size 9 pixels

Font size 12 pixels

Font size 15 pixels

Font size 2 (can be from 1 to 7)

Font size 4

Font is 1 size larger than usual

Headings:

Level 1 header

Level 2 header

Level 3 header

Level 4 header

Level 5 Header

Level 6 header

Possible font size options (visual assessment) are available.

Formatting text using fonts:

Comic Sans Ms font

Font Monotype Corsiva

Tahoma, 13 pixels

Possible options for font types (names and visual rating) are available.

Decorating text using color:

Blue text
* The number #0000ff means blue in the RGB palette.

Red text
* You can use standard verbal designations for colors: Red, Green, Blue, etc.

Blue background
* The background color can also be changed. Note that the style attribute uses CSS syntax.

Blue text, gray background

Some predefined colors:

Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Some colors in hex code are the intensity of red, green and blue (RR GG BB):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE # 006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Possible options for the color palette and their codes/names are available.

Text design using shadow/highlight:

The text-shadow property has four parameters: X Y amplitude color .
X - horizontal offset of the shadow/highlight to the text. A positive value is an offset to the right, a negative value is an offset to the left.
Y - vertical offset of the shadow/highlight to the text. A positive value is a downward shift, a negative value is an upward shift.
Amplitude - the higher the value, the greater the degree of blur.
Color - dark colors will give a shadow, light colors will give a “highlight”.

Examples of using:

Only a shadow

Tahoma with shadow

Tahoma with outline

Tahoma depressed

Tahoma volumetric

Tahoma neon

Tahoma neon

Tahoma neon

Tahoma, many shades

Aligning text and formatting paragraphs

Text alignment:

Align text left

Center text alignment

Centered text

Align text to the right

Align texts on both sides - for texts longer than one line

Option to align texts on both sides using CSS formatting option

Formatting footnotes (comments) with paragraph indentation:

Text quoted in a separate block
which will have a slight indentation on the left.

Formatting paragraphs and areas:

Embedded, wrapping text around other text, right edged text aligned to the left, with a gray border and an 8 px margin from the outside of the border.

ATTENTION! This block is inserted into the text before (!) the word “Hello!”

Hello! In this paragraph, the first sentence will be from the “red” line, i.e. indented. Just like in book printing. True, this is a rare practice on the Internet. Paragraphs should be separated by simply blank spaces.

with right alignment.

Text on the right edge in two lines,
with left alignment.
< br clear="all" >

Line running to the left.

Line running to the right.

A line running from edge to edge.

Scrolling up
text with useful
information.

Scrolling Down
text with useful
information.

Vertical rewind of large text:

Lorem ipsum dolor sit amet, consectetur adipisicing elite, sed do eiusmod tempor incidentidunt ut labore et dolore magna alicua. Ut enim ad minim veniam, kyus nostrud eksercitatyon ullamko laboris nisi ut aliquip ex ea commodo consecuat. Deuce aute irure dolor in reprehenderit in voluptate velite essay killum dolore eu fugiat nullah pariatur. excepteur sint okkaekat cupidatat non proident, sunt in kulpa kuy officia deserunt mollit anim id est laborum.

Vertical rewind of large text with HTML code:

Text without html, 55 characters wide and 5 lines high.

You can even scroll, cool, right!? But html doesn't work.

But it's better to use the div from the previous example if you just need scrolling...

Leading (line spacing) of text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Object padding

The boundaries of the areas in the section are made visible (dotted) to assess the indentation.

Top padding area 10 pixels

An area with a left margin of 20 pixels

250px right margin area

An area with a bottom margin of 15 pixels

You can also select different types of lists through the style:

List-style-type values ​​for lists:
circle - marker in the form of a circle
disc - marker in the form of a dot
square - marker in the form of a square
decimal - Arabic numbers (1, 2, 3, 4,...)
decimal-leading-zero - Arabic numbers with a leading zero for digits less than ten (01, 02, 03,...)
lower-alpha — lowercase Latin letters (a, b, c, d,…)
upper-alpha - capital Latin letters (A, B, C, D,...)
lower-greek - lowercase Greek letters (α, β, γ, δ,...)
lower-roman — lowercase Roman numerals (i, ii, iii, iv, v,…)
upper-roman - Roman numerals in uppercase(I, II, III, IV, V,…)
none—Disables bullets for the list.

Images

- example of inserting a picture.

width="200px" > - image width size.

height="500px" > - height size of the image.

An image with text that pops up when you hover over it:
title="This text will appear when you hover over the image!" alt="And this one in her absence" >!}

The image is on the left, the text flows around the image on the right and has a horizontal indent of 6 pixels from it:
style="float: left; margin:0 6px 6px 0" > text

We write text over the image:

Try not to abuse this option,
because this method often makes it difficult
readability of the text, depending on the picture.

Picture in the selected area, with scrolling:

We specify the displayed width of the outer div container in the width attribute in pixels. For vertical scrolling, specify the height height . The width and height should be less than the picture.

Tooltip that appears when you hover over a link:

Use comments to explain your code: what it does, what it does, and why the solution you choose is being used.

(This point is optional because there is no point in expecting code to always be well documented. The usefulness of commenting depends on the complexity of the project and may differ for HTML and CSS code.)

Mark tasks with keyword TODO. Don't use other commonly used formats such as @@ .

Enclose contacts (username or mailing list) in parentheses: TODO(contact) .

Describe the task after a colon, for example: TODO: Task.

Recommended: (# TODO(Ivan Ivanov): Deal with alignment #) Test
Recommended:

• cucumbers
• Tomatoes

(It is recommended to use HTML with the text/html content type. Do not use XHTML, as application/xhtml+xml has poor browser support and limits optimization options.)

Use valid HTML code unless usage does not allow you to achieve the file size required for the desired level of performance.

W3C HTML validator (English) to check the validity of the code.

Validity is an important and measurable quality of code. Writing valid HTML promotes understanding of technical requirements and limitations and ensures correct using HTML.

Not recommended: Check Just check
Recommended: Check Just a check.

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

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

Try to provide alternative content for media, such as images, videos, or animations defined using canvas. For pictures, this is a meaningful alternative text (alt), and for video and audio, a transcript of the text and caption, if possible.

Alternative content may help people with disabilities. For example, it is difficult for a person with low vision to understand what is in the picture if @alt is not set for it. Other people may have difficulty understanding what is being said in a video or audio recording.

(If the image's alt is redundant, or it's just being used for decorative purposes in places where CSS can't be used, use an empty alt text alt="" )

Keep structure (markup), appearance (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 only serves to define the structure of the document. Move all the code responsible for design into style files, and the code responsible for behavior into scripts.

Try to reduce their intersections to a minimum by including a minimum number of style files and scripts in your templates.

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

Not recommended: HTML sucks HTML Sucks

I read about this somewhere before, but now everything is definitely clear: HTML is complete garbage!!1 I can't believe that in order to change the design, you have to redo everything all over again every time.
Recommended: My first CSS-only redesign My new CSS design

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

How cool!

The only exception to this rule is HTML service characters (for example< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

To reduce file size and improve code readability, you can omit optional tags. The HTML5 specification has a list of optional tags.

(It may take some time for this approach to become widely used because it is very different from what web developers are typically taught. From a consistency, code, and simplicity standpoint, it is best to omit all optional tags rather than some them).

Not recommended: We waste bytes - we waste money.
Recommended: Bytes are money!

So that

Do not use the type attribute when connecting styles (except when using something other than CSS) and scripts (except when using something other than JavaScript).

Specifying the type attribute in this case is not necessary because HTML5 uses text/css (English) and text/javascript (English) by default. This will work even in older browsers.

Not recommended:
Recommended:
Not recommended:
Recommended:

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

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

(If you have trouble with whitespace between list elements, you can put all the li elements on one line. It is recommended that Lint issue a warning instead of an error in this case.

• Masha
• Glasha
• Cheburash

Except in cases where browser-dependent code is required, or validator errors, use valid CSS code.

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

Validity is an important and measurable quality of code. Writing valid CSS helps eliminate redundant code and ensures proper use of style sheets...

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

Wildcard names are simply variant names for elements that have no special purpose or are indistinguishable from their siblings. They are usually needed as “Helpers.”

Using functional or template names reduces the need unnecessary changes in the document or templates.

Deprecated: /* Deprecated: meaningless */ #yee-1901 () /* Deprecated: description of appearance */ .button-green() .clear()
Recommended: /* Recommended: precise and to the point */ #gallery () #login () .video () /* Recommended: template name */ .aux () .alt ()

Try to formulate what exactly you should do this element, but be as brief as possible.

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

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

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

Using shorthand property notation is useful for greater 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;

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

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

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

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

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

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

Avoid using anything other than a hyphen to connect words and abbreviations in selectors to improve readability and ease of understanding of your code.

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

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

Place advertisements in alphabetical order to get consistent code that's easy to work with.

When sorting, ignore browser prefixes. Moreover, if several browser prefixes are used for one property, they must also be sorted (for example -moz should be before --webkit)

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

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

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

Start each selector or declaration with new line.

Always put a line break between rules.

Whenever possible, group rules together. Indicate groups with comments and separate them with line breaks.

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

The idea of ​​this guide is to create a common vocabulary that allows developers to focus on what they want to express, rather than how.

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

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

Thanks to everyone who read this far.

Tags:

• css
• html
• styleguides

HTML tags are the basis HTML language. Tags are used to delimit the beginning and end of elements in markup.

Each HTML document consists of a tree of HTML elements and text. Each HTML element is identified by a start (opening) and ending (closing) tag. The opening and closing tags contain the name of the tag.

All HTML elements are divided into five types:

• empty elements - , ,
  , , , , , ,
  Used for storage additional information about the page. Browsers use this information to process the page, and search engines- for its indexing. There can be several tags in a block, since depending on the attributes used they carry different information. Indicator of measurement in a given range. A section of a document containing navigation links for the site. Defines a section that does not support scripting. Container for embedding multimedia (e.g. audio, video, Java applets, ActiveX, PDF and Flash). You can also insert another web page into the current HTML document. The tag is used to pass the parameters of the plugin. Ordered numbered list. Numbering can be numeric or alphabetical. A container with a title for a group of elements. Specifies an option/option to select from the , or , drop-down list. Field for displaying the result of a calculation calculated using the script.

  Paragraphs in the text. Defines parameters for plugins embedded using the element. A container element containing one element and zero or more elements. By itself it does not display anything. Allows the browser to select the most appropriate image. Outputs text without formatting, preserving spaces and text breaks. Can be used to display computer code, messages Email etc. An indicator of the completion of a task of any kind. Defines a short quotation. Container for East Asian symbols and their decoding. Defines its nested text as the base component of the annotation. Adds brief description above or below the characters contained in the element, displayed in a smaller font. Marks embedded text as additional annotation. Displays alternative text if the browser does not support the element. Displays text that is not current with a strikethrough. Used to display text representing the result of program code or script execution, as well as system messages. Displayed in monospace font. Used to define a client-side script (usually JavaScript). Contains either script text or points to external file script using the src attribute. Defines a logical area (section) of a page, usually with a header. A control element that allows you to select values ​​from a proposed set. Variant values ​​are placed in . Displays text in a smaller font size. Specifies the location and type of alternative media resources for the , , . Container for inline elements. Can be used to format passages of text, such as highlighting individual words. Places emphasis in the text, highlighting it in bold. Includes embeddable style sheets. Specifies subscript writing of symbols, for example, element index in chemical formulas. Creates a visible title for the tag. Displayed with a filled triangle, clicking on it allows you to view the title details. Specifies the superscript spelling of characters.

  Cheat sheet with tags

  For ease of use, I grouped the tags into thematic sections, adding display property values ​​for each tag. To go to the table, click on the picture.

  Pre-formatting

  Extra spaces, tabs, and carriage returns in the HTML document source will be ignored by the Web browser when
  interpretation of the document. An HTML document can only include the above elements if they are placed inside the and tags. These tags are used to make text appear as it was typed, for example when creating tables.

  Text styling

  Tags below< center > , < font > ,< s > ,< u >to design text style are currently used extremely rarely and are undesirable elements. CSS style sheets are widely used instead.

  The tag allows you to center all document elements in the browser window. For example: . All elements between tags will be located
  in the center of the window. A hypertext document can be designed using the following styles:

  Bold, Italics , Monospace ,

  Strikethrough text ,

  Underlined text , LARGE TEXT ,

  small text , Subscript ,

  Superscript.

  # 4: various styles formatting–>

  Homepage

  Welcome

  I am glad to welcome you

  on my page.

  Here's what I like to do in my free time:
  

  - Explore the Internet
  

  Logical document style

  Text in HTML document can be logically highlighted by one of the following tags:

  - define the word. As a rule - italics;

  - strengthen the accent. As a rule - italics;

  – the title of something big. Italics;

  – computer code. Monospace font;

  – text entered from the keyboard. Bold font;

  – program message. Monospace font;

  - very important areas. Bold font;

  – replacing a variable with a number. Italics;

  – allows you to include a quote in an object.

  # 5: logical document style–>

  Content elements

  Content elements

  Using the INS element

  Using the DEL element

  Using the Q element

  Using the EM Element

  Using the STRONG element

  Working with FONT tags

  The tag allows you to set the type, size and color of the font.

  font size n=1..7, standard size n=3

  relative size, 3+3=6

  In addition to the size, the color and font type can be set, for example:

  Font example

  # 6: different kinds fonts–>

  Text Formatting Elements

  Setting absolute font sizes

  Font size 7

  Font size 1

  Setting relative font sizes

  Font size +4

  Font color set to green

  Courier font

  The color of characters throughout the page can be changed using the TEXT argument of the tag: ... The BGCOLOR=”color” argument changes the background color.

  Color design

  Text color control

  Tag for creating a table.
  	Defines the body of the table.
  		Creates a table cell.
  	Used to declare HTML code fragments that can be cloned and inserted into a document by a script. The content of a tag is not a child of it.
  	Creates large text input fields.
  	Defines the table footer.
  	Creates a table cell title.
  	Defines the table title.
  	Defines date/time.
  	The title of an HTML document that appears at the top of the browser's title bar. May also appear in search results, so this should be taken into account when providing a title.
  Creates a table row.
  	Adds subtitles for elements and .
  	Highlights a passage of text by underlining, without additional emphasis.
  	Creates a bulleted list.
  	Highlights variables from programs by displaying them in italics.
  	Adds video files to the page. Supports 3 video formats: MP4, WebM, Ogg.
  	Indicates to the browser where a long line might break.

  Aquamarine – aqua
  White – white
  Yellow – yellow
  Blue – blue
  Ultramarine – navy
  Violet – violet
  Fuchsin – fuchsia		Black – black

  Special symbols

  Characters that cannot be entered directly into a document using the keyboard are called special characters. There are special tags for them. Four characters - less than sign< , знак больше >, ampersand & and double quotes“” have a special meaning within HTML and therefore cannot be used in text with their normal meaning. To use one of these characters, enter one of the following sequences:

  < – < >– > & – & " – "e.