Font on page

The font size tag in html is just sub, sup and strong, which somehow change the size of the letters. But html provides very little opportunity in this regard. There was, of course, the font tag, but today it has long been outdated. If you're really interested in how to change font size more flexibly, then you need to turn to the power of CSS.

CSS property font-size

In CSS, you can set any text size, and this can be done not only in pixels, but also in other units of measurement. Most often it is set in pixels, but it can be done differently. For example, in percentage. The font of the parent element is taken as 100%.

For example, if we set the text size in percentage to a paragraph and it lies in the body tag, then 100% for it will be equal to the size specified for the body. Accordingly, if a tag has a font set to 12 pixels, then to set the paragraph size to 24 pixels, you need to write this:

p(font-size: 200%)

p(font-size: 200%)

This is if you use percentages. Another popular relative value is em, or the font height of the parent element. Prescribing relative values the better that when the text size changes, everything will change proportionally and will be displayed well.

You can also adjust the size using the larger and smaller keywords, which set the text size to be larger or smaller, respectively, than the parent element.

selector(font-size: larger)

selector (font-size: larger)

The text in an element with the desired selector will become larger than its parent. HTML size tags exist, but it is still not recommended to use them. These are the big and small tags. Enclosing text within them allows you to slightly increase or decrease the size of the letters compared to parent element. But today it is better to use css if you need to set a value.

Size of main elements on a web page

Regarding setting the sizes for other elements, everything is the same: you need to use css for this purpose, not html. In general, you can set attributes such as width and height in a tag, but this is inconvenient. And most importantly, it does not meet the standards that determine what appearance and the structure needs to be separated from each other, taken out into separate files.

For this reason, it is common to use the CSS properties width and height to determine the width and height of an element.

img( width: 50px; height: 50px )

< img width = "50" height = "50" > < ! -- такненужнопрописыватьширинуивысотудляэлемента-- >

HTML only places blocks on a web page, but the format of this language itself does not allow it to be a convenient tool for specifying values. In order to somehow visually influence a block, you need to frame it with certain opening and closing tags, which is not so convenient.

To set the appearance of elements today you need to use CSS rules, because that’s what they are designed for. That’s all for today, and don’t forget to subscribe to blog updates to have a lot of useful materials on website building at your fingertips.

< FONT SIZE =… COLOR =... FACE =...>text

SIZE - sets the font size that will be used by text contained within the FONT element. You can specify an absolute font size by specifying an integer between 1 and 7. You can also specify a relative font size by assigning the attribute a signed integer (for example, this could be SIZE="+1" or SIZE="-2").

COLOR - indicates the color with which this piece of text will be highlighted. Colors are specified as an RGB value with hexadecimal notation, or a symbolic value of one of the standard colors is selected.

FACE - specifies the font typeface, for example FACE=ARIAL.

text - teletype text (monospace).

text- style with italic font(italics).

text - bold style.

text - style with text underlining.

text - prints text in a larger font size (larger than the surrounding text).

text - prints text in a reduced font size (smaller than the surrounding text).

text - print text with a downward shift (subscript or subscript).

text - print text with an upward shift (superscript or superscript).

text or< S >... - style with text strikethrough.

Special html tags

Tag< ADDRESS >used to highlight the author of the document and his address (for example, e-mail).

Some characters are control characters in HTML and are added to text only using escape sequences:

    left angle bracket "" ->

    ampersand "&" - &

    double quotes """ - "

There are a large number of ESC sequences for special characters, such as " " for  and "®" for . One of the features is the replacement of characters in the 2nd part of the symbol table (after the 127th character) with escape sequences for transmission text files with national languages ​​on 7-bit channels.

ESC sequences are case sensitive: CANNOT be used instead

DD tag – sets the descriptive part for the definition list element

DFN tag – text enclosed in tags is formatted as a definition

DL tag - Create a list of definitions containing tags< dt >And< dd >

DT tag – specifies a descriptive-conditional part for an element of the list of definitions

EMBED tag – start and end tags that allow you to describe an object embedded in a document. Depending on the type of embedded object, additional parameters may be included in addition to those listed below

Attribute

Function

Specifies the URL of the embedded object. This attribute is required

height= n

Specifies the height of the zone that the built-in object will occupy

name= Name

Specifies the name of the embedded object

Specifies the width of the zone that the built-in object will occupy

FONT tag – setting the size, color or typeface of the text enclosed in tags

Attribute

Function

Set the color of text enclosed in tags

face=list

Setting the typeface of the tagged text (sets the first font name listed in a comma-separated list)

size= meaning

Set the base font size. Range – from 1 to 7

tag Hn – the text enclosed in tags represents a heading of level n. Possible values ​​for n are from 1 to 6

Attribute

Function

align= type

Specifies how the title should be aligned: left (default), center, or right (right)

HR tag – breaks the current text stream. A horizontal ruler will be inserted at the break point.

Attribute

Function

align= type

Specifies how the ruler should be aligned: left, center (default), or right

Do not use volumetric shading when displaying a ruler

Setting the ruler thickness to an integer number of pixels

width= meaning

tag I – text enclosed in tags will be displayed in italics

IMG tag – an image is inserted into the current text stream

Attribute

Function

alt= text

Sets alternative text for browsers that do not support images

Border= n

Set the thickness (in pixels) of the border of images contained in hyperlinks

Adding playback controls for embedded video clips (I.E.2 and higher)

Dynasrc= url

Specifies the URL of the video clip to be imaged ( I.E.2 and higher)

Height= n

Sets the image height in pixels

Hspace= n

Sets the placement to the left and right of the image of areas of free space with a width of n pixel

Indicates that when using this tag within a tag image is selected using the mouse

loop= meaning

Set the number of video playback repeats. Meaning can be an integer or infinite (I.E.2 and higher)

Lowsrc= url

Specified by a low-resolution image that the browser should load first. It is followed by an image specified by the attribute ( I.E.2 and higher)

Specifies the source URL of the image to be played. This attribute is required

start= Start

Specifies when to play the video clip (options: fileopen or mouseover)

Usemap= url

Specifies the area of ​​the image that is sensitive to mouse movement

Vspace= n

Specifies the placement of npixel areas of free space above and below the image

Specifies the width of the image in pixels

KBD tag – text enclosed in tags is entered character by character (as when typing from a keyboard)

LINK tag – in the header (< head>) of a document, a link from this document to another document is determined

Attribute

Function

href= url

methods= list

Sets a list of display methods for this link, depending on the browser (separated by commas)

rel= connection

The relationship of this document with the target document is determined. For Internet Explorer 3.0, rel=style means the existence of an external style sheet

rev= connection

The feedback of the target document with the data is determined

Specifies the URL of the external style sheet that will be used to format the document ( I.E.2 and higher)

title= line

Sets the title of the target document

type= text/css

A universal resource name is specified for the target document, independent of its location

MAP tag – defines an area of ​​the image that is sensitive to mouse movement

Attribute

Function

name= line

Specifies the name of this area. This attribute is required

NOBR tag – breaks are not allowed in the text enclosed in the tags

P tag – paragraph start and end tags

align= type

Sets how text in a paragraph is aligned: left, center, or right

PLAINTEXT tag - specifies that the rest of the document should be displayed unprocessed, as pre-formatted text

PRE tag – text enclosed in tags will be displayed like this. how it was pre-formatted, without processing, with precise line breaks and spacing

The browser will place the text so that (if possible) n characters fit on the line

tag S

SAMP tag – the text enclosed in the tags is a template

SMALL tag – text enclosed in tags will be displayed in a smaller font size

SPACER tag – insert a separator into the document (OnlyN3)

type= type

The type of separator is specified: vertical – an area of ​​empty space of the specified size is placed between two lines of text; horizontal – an area of ​​empty space of the specified size is placed between words or characters; block – insertion of a rectangular area

Specifies (in pixels) the width of a horizontal separator or the height of a vertical separator

Specifies the width of the block separator

height= n

Specifies the height of the block separator

align= meaning

Specifies how the block delimiter is aligned relative to the surrounding text.

SPAN tag – text enclosed in tags will be formatted using a style sheet (OnlyI.E.3 and above)

Attribute

Function

style= elements

Style sheet elements are specified for text within a given spacing

STRIKE tag – text enclosed in tags will be displayed with a horizontal line through it

SUB tag – text enclosed in tags will be displayed as a subscript

SUP tag – text enclosed in tags will be displayed as a superscript

TT tag – text enclosed in tags will be displayed in a monospaced font

VAR tag – the text enclosed in the tags represents the name of the variable

46.4K

Often, novice webmasters are tormented by the question of why some sites rank higher and outperform competitors in search results. The reason for this may be incorrectly placed tags h1, h2...h6. If these tags are placed incorrectly, without taking into account the specifics of the resource, then it is more difficult for search engines to obtain accurate information about the articles and the keywords contained in them.

The h1 - h6 tags allow you to highlight headings at different levels. They make it clear which parts of the text more accurately reflect the topic of the article and provide ranking advantages.

Proper placement of tags allows search engines to more accurately display the page for queries in the results, which has a beneficial effect on the position of the resource:

Why are h1-h6 tags needed?

Tags contain the site name, headings and subheadings of the text:


In HTML, header tags are denoted by h from the English “header”, which translated means “heading, header”. Here's an example of what it looks like:

Heading

Heading tags should be placed on each page of the resource. In this case, the importance of the heading will depend on its number; the smaller it is, the more important the heading:

- most important tags - less important tags... - last most important tags

However, their placement should be treated with caution. Incorrect use may result in your resource being sanctioned by search engines.

Syntax of h1-h6 tags

Title of the text Subtitle 1 ... Subtitle 2 Subtitle 3.1 ... Subtitle 3_2 Subtitle 3


The most popular tags are h1 h2 h3. How to use h1 tag correctly?

By ignoring the h1 tag, webmasters are depriving themselves of such an important advantage as content optimization. On engines it is often registered automatically, but not always, and this fact should be taken into account.

The h1 HTML tag is the most significant of its kind. It contains the name of the site and the title of the article. However, it should not be confused with a tag (page title). The Title is displayed in the browser at the top of the screen on the left side when the resource page is opened. Title is written in the page header between , while h1 - h6 are indicated in the “body” of the page itself and are enclosed in tags.

There can only be one h1 tag on a page. If you specify several headings with the h1 tag, search engines may regard this as overspam, which in turn may result in a ban:


Rules for composing the main heading h1:
  • The tag should use keywords used to promote the page;
  • You shouldn’t make the h1 heading too long; a few words are enough;
  • The title text should be readable;
  • The h1 meta tag should not contain anything other than the text itself. If you want to highlight it, put the codes outside the tag;
  • Before manually writing h1 , make sure that the engine does not set it automatically;
  • The content of h1 should correspond to the topic specified in the title of the page;
  • When creating an h1, be sure to use the key phrase that the page is being promoted by;
  • The content of the title should be unique, succinct and thematic. You shouldn't make h1 a complete copy of the Title tag. It is important that unique h1 - h6 be written on each page of the resource, so avoid repetition;
  • You cannot list key phrases in the title separated by commas. The content of h1 should be understandable not only to search engines, but also to resource visitors.
How to use h2-h6 tags correctly?

In addition to h1, h2, h3, h4, h5, h6, etc. tags are used to place headings that are identified by search engines.

h2 tag

Typically used for post titles in a feed located on the home page or for subtitles in an article.

Tags h3, h4

They are often used to highlight the names of subheadings, categories and widgets in the sidebar.

Tags h5, h6

Designed for even smaller page elements that should be separated from the rest of the text.

The arrangement of headings h1 - h6 in different versions of engines can be implemented differently.

Rules for placing h2 -h6:

  • Heading structure. A hierarchy of headings must be observed;
  • Font size. The lower the title level, the smaller the font. Font editing is done in styles. But generally, fonts are the correct sizes by default;
  • Heading tags cannot be used in conjunction with other accent tags. It is recommended to use keywords in the headings by which this page will be promoted in searches;
  • Unlike h1, h2 - h6 tags can be written several times on a page.

I am the head of the hierarchy of headings My children My grandchildren My grandchildren My grandchildren My children My grandchildren My grandchildren My grandchildren My great-grandchildren My great-grandchildren My great-grandchildren

  • There should be no spam;
  • The composition of the text h1 - h6 should be done using synonyms and taking into account the rules of morphology;
  • It is better to place the main keywords closer to the beginning of the title;
  • Key phrases written in headings must appear in the text of the page;
  • Tags h1 - h6 should be short, succinct and informative:

We looked at an example of creating a simple page where comments were given on some html tags, since it seems to me that it is better to first show something with an example and then move on to a more detailed description. That is why creating a page was discussed in the second lesson, and in more detail in the third.

So, below are descriptions of common HTML tags that are used on almost every page of the site. Believe me, there are already enough of them to write an entire website.

List of html tags 1. HTML tag (for paragraphs) - displays a text paragraph (allows style, class, id attributes). The most common tag, since text is most often placed in it (however, this is what it was created for).

For example, html code:

Text paragraph number one

And this is another paragraph

Text paragraph number one

And this is another paragraph

You can also add a style parameter to the tag:

These different values ​​can be used to edit the appearance of the font. You can read about these parameters in a separate lesson: styles in html and the css font property.

You can also specify the CLASS and ID attributes. For example:

2.
HTML tag and (in bold)

And - two tags that allow you to make the font bold. There is no difference between these tags.

Let's give an example. HTML code:

thumbnail

Converts to the following on the page:

thumbnail

You can also specify the CLASS and ID attributes (as in the case of Note

These tags have little impact on the ranking of documents in search engines, so it’s better not to use them aimlessly.

3. HTML tag (create italics)

- italic font (allows style, class, id parameters)

For example, html code:

italic text

Converts to the following on the page:

4. HTML tag (underlined text)

- underlined font (allows style, class, id parameters)

For example, html code:

underlined text

Converts to the following on the page:

underlined text

5. HTML tag (creating a hyperlink)

Creates a link on the page (allows for style, class, and other parameters).

For example, html code:

link text

Converts to the following on the page:

All tag parameters and attributes will be covered in a separate lesson: html tag.

6. HTML tag (headings in content)

,..., - header tags inside the content (allows the style, class, id parameter). Moreover, the smaller the number, the greater the weight and size (by default) of the text enclosed in these tags.

For example, html code:

Heading h1

The tag is used for the title of the page (as well as the title)

These tags should only be used for their intended purpose, i.e. only when the article needs a title. This is due to the fact that tags,..., have a great influence on search engines. If you use them correctly, then the chances of getting to the top of the search results are very high.

7. HTML tag (alignment)

- aligns content in the center.

For example, html code:

This text will be in the center

Converts to the following on the page:

This text will be in the center

Note
  • - for text
  • ... - for everything (for example, an image)
8. HTML tag (subscript text)

- displays subscript font.

For example, html code:

Plain text, interlinear text

Converts to the following on the page:

Plain text, interlinear text

9. HTML tag (superscript text)

- displays superscript font.

For example, html code:

Plain text, superscript text

Converts to the following on the page:

Plain text, superscript text

10. HTML tag,

, - displays a font one pixel larger/smaller than the current size (allowed by the style, class, id parameter).

For example, html code:

Regular font, this font is one pixel larger

Converts to the following on the page:

Regular font, this font is one pixel larger

11. HTML tag
    (creating lists)

    Outputs a list (accepts style, class, id parameters). Each new element is written between

  • And
  • .

    For example, html code:

    List:
    • first element of the list
    • second element of the list

    Converts to the following on the page:

    List:

    • first element of the list
    • second element of the list
    12. HTML tag (creating tables)

    - creates a table (allows the style, class parameter). Each
    new line created by tags , and the column .

    For example, html code:

    1-line 1 element1st line 2nd element
    2-line 1 element2-line 2 element

    Converts to the following on the page:

    All tag capabilities

    13. HTML tag
    (line break)


    - transition to the next line, is a single tag.

    For example, html code:

    Line 1
    2-line
    3rd line And this text will be on the 3rd line, since there was no transition

    Converts to the following on the page:

    1-Line
    2-line
    3rd line And this text will be on the 3rd line, since there was no transition

    14. HTML tag (horizontal line)

    - draws a line, represents a single tag (allows the style, class parameter).

    For example, html code:

    Some text above the line and this text will be below the line

    Converts to the following on the page:

    Some text above the line and this text will be below the line

    15. HTML tag (picture output)

    For example, html code:

    http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">

    Converts to the following on the page:

    All tag capabilities will be discussed in a separate lesson: .

    16. HTML tag (text formatting)

    - to format text, change style, etc. (allows parameter style, class, id). Its weight in the eyes of search engines is absent, so you can use it as much as you want.

    For example, html code:

    This text is green and its size is 15 pixels

    Converts to the following on the page:

    Note

    A similar tag is .

    17. HTML tag (form creation)

    - creating a form on the page (allows the style, class parameter).

    For example, entering a login and password, any buttons, any registration form - all these are forms.

    18. HTML tag (creating blocks)

    - used to create blocks on the page (allows the style, class parameter). Previously, tables were mainly used to mark up pages. After the tag appeared, the task became easier. Almost all websites contain blocks as a convenient alternative to tables.

    HTML is a hypertext markup language. It is based on so-called tags. Tags are some wrapper elements that specify the format and properties of web page elements. We have compiled an up-to-date reference of HTML tags for you on one page.

    There are more than a hundred markup elements in total. Each has a number of attributes and its own syntax. The HTML Tags Reference will help you quickly find the element you need.

    List of HTML tags

    The table below presents a list of HTML5 tags with a brief description in Russian.

    Tag Short description
    A comment.
    Defines the document type.
    Link, hyperlink, anchor.
    Defines text as an abbreviation.
    Contact Information author or owner of the document.
    Defines an area on an image map
    Article
    Content aside (content is not the main content on the page)
    Allows you to insert a currently playing audio file.
    Bold text.
    Specifies the base URL or target attribute for relative links in the document.
    An area where writing text can take a different direction.
    Sets the direction of writing text. In contrast to direction, the physical direction is indicated
    Quote.
    Specifies the body area of ​​the document.

    Line break.
    Clickable button
    Used to draw graphics using scripts
    Table signature.
    Footnote to the title of the material.
    Used to insert computer code in text form.
    Specifies the characteristics of the columns in the table.
    Defines a group of one or more table columns to format.
    Used to define predefined options to choose from when you type in a text field
    Defines the description of a term from a tag in a list of terms
    Text that is deleted in new version document.
    Defines Additional information, which the user can view or hide
    Indicates that the content is a term.
    Defines a dialog box or interactive element
    Block element- one of the main elements of layout.
    Defines a list of definitions
    Name of the term in the list of definitions
    text highlighted for meaning (usually text in italics).
    Container for external application
    Group of related elements in a form
    Title for element
    Defines an autonomous group of several elements (for example, a picture with a caption)
    footer
    Defines a user input form
    - HTML headers of different levels: , , , , , .
    Specifies the head area of ​​the document.
    Header block
    Horizontal line- thematic separator.
    Root element. Tells the browser that this document is an HTML document.
    Italics text.
    Defines an inline frame
    Image, picture.
    Input field
    Text that has been added to the new version of the document.
    Text entered from the keyboard or names of keyboard buttons. Typically in monospace font.
    Label for the input field. Indicates the binding of an element (usually text) to an input field.
    Element header
  • List item
    Defines an external resource binding (most often a table binding CSS styles)
    Main content
    Container for . Defines a custom map on an image
    Selected text (usually using background highlighting).
    Container for a list of menu items
    Defines elements that the user can call from context menu
    Used to define document metadata.
    Meter of values ​​in a given range
    Container for navigation elements
    Alternative content for users who have disabled scripts
    Defines a built-in object
    Defines a numbered list
    Defines a group of related options in a drop-down list. Gives the name to the group
    Parameter (choice option) in the drop-down list
    Calculation result

    Paragraph.
    Sets options for built-in objects
    Container for multiple images
    Pre-formatted text.
    Progress bar
    Quote in text.
    Alternative text if the browser does not support the .
    Annotation for the content of the tag.
    Container for symbols and their decoding (mainly for East Asian symbols, hieroglyphs).
    Crossed out text.
    Text that is the result of execution computer program(usually displayed in monospace font).
    Defines a script or script connection from an external resource.
    Chapter
    Defines a dropdown list
    Text in smaller font size.
    Defines a resource for the , and .
    Inline element.
    Text highlighted by meaning. Typically displayed in bold.
    Defines a container for defining document styles
    Displays text as a subscript.
    Heading inside a tag
    Displays text as a superscript.
    Defines a table.
    Defines a content area in a table.
    Cell in table .
    Multiline input field
    Defines a group of rows at the bottom of a table - footer. More details
    A place where a line break is allowed.
    Legacy HTML tags

    How to replace the obsolete HTML tag? In most cases, CSS Cascading Style Sheets will do. There are also alternatives to tags not used in the new specification within HTML. The table below shows deprecated HTML tags with options for replacing them.

    Tag Brief Description
    Acronym. Use a tag instead.
    Built-in applet. Use or instead.
    Specifies the color, size, and font family of all text in the document. Use it instead
    Larger text. Use it instead
    Centered text. Use it instead
    List of directories. Use
      instead of him
    Specifies the color, size, and family of the font. Use it instead
    Frame inside. Use it instead
    Defines a frameset. To add multiple inline frames, use multiple elements
    Alt text if frames are not supported
    Crossed out text. Use or instead
    Monospace text. Use it instead
    Underlined text. Use it instead