Everyone knows that tags , , , are presentational, and therefore, based on the “structure, presentation, behavior” paradigm, their use is not encouraged. The elements seem much more familiar , , . This has been the case for many years of development practice. However, a lot has changed in the semantics of these elements with the advent of HTML5. Now we have 4 new tags with meaning and a mess in our heads.
vs
If previously all layout textbooks were full of phrases like “use instead of ”, and this was half true, then today such a habit can play a cruel semantic joke. The point is that the authors of HTML5 propose to use to highlight passages of text in order to attract the reader's attention, but without implying increasing the significance of the text or intonation. The specification provides examples of how keywords can be used to mark up a document.
The frobonitor and barbinator components are fried.
And leads (first paragraph of an article in journalism)
Six abandoned kittens have found an unexpected new mother figure - a pet rabbit. Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
Kittens "adopted" by pet rabbit
In its turn , as before, means the increased significance of its contents.
vs
From now on contains text that stands out from the general environment, but has no emotional overtones. In my opinion, It is logical to use where typographic tradition requires italics (for example, words in a foreign language, terms, etc.)Per aspera ad Astra— translated from Latin, the saying means “Through thorns to the stars.”
it means emphatic stress, emotional emphasis on a given passage of text. This is the case when in speech we highlight words with voice (intonation, volume, etc.)
Execute it is forbidden, have mercy.
Read the contract carefully!
“Fine text” (information that is a legal formality, such as an enterprise license or legal address, etc.) we, as a rule, marked with an element with a class that specifies a smaller font in visual user agents. Now a new old one has appeared in our arsenal semantic element - .Holivar o
Earlier We also have an element
It may indicate two prices, one of which is crossed out. We mark it with the element
New semantics and old doctype
If for some unknown reason you cannot replace the doctype with a new one and are formally layout in HTML 4.01, do not despair. Use old new elements with new meaning and in time you will thank yourself. Perhaps someone will say that this is wrong, but these elements, exceptNow we will study the main tags. Let's start with what tags are required on the page, forming its structure.
Block. Simple page structure
A website page is a regular text file with the extension .html. The text of the HTML page along with tags is stored inside this file. This file must have the following tags: tag , which should contain the text of the entire site (everything written outside this tag will be ignored by the browser), and inside it there should be two more tags: tag
for service page content and tag - for the main text, which is visible on the browser screen.Into the service content, which is located inside the tag
, there are many different things included, but for now we only need two of them. This is a tagAlso, before the tag the construction is usually written doctype, which indicates the version of HTML in which the site is made. The current version of the language is number five and the doctype for it should look like this - .
So let's look at the basic structure of the page (to run this example in a browser, copy it into a text file with the extension .html and open in a browser, if you have problems with this, watch the video below the example):
See this link to see what this example looks like in a browser.
I think after you've read about the basic structure of a page, you're still a little confused about what it all looks like in practice. Therefore, I made a special video in which I will show you how to make your first HTML page and run it in the browser (in it I will also talk about the title of the page, about encodings, about code design). Watch it and only then proceed to further reading:
Well, now, having learned to create simple pages, we will move on to explore useful tags that should be used inside the tag
. These will be tags for paragraphs, headings, lists, links and other useful things. So let's get started.Block. Paragraphs
One of the main elements of the page is paragraphs. They can be compared to paragraphs in a book - each paragraph begins on a new line and has a so-called red line (this is when the first line of the paragraph text is slightly indented to the right). By default there is no red line, but it is easy to create (more on this later).
A paragraph is created using a tag
Thus:
This is a paragraph.
That's one more paragraph.
And one more paragraph.
This is a paragraph.
That's one more paragraph.
And one more paragraph.
Block. Headings h1, h2, h3, h4, h5, h6
In addition to paragraphs, important things on the page are headers. They can also be compared to headings from a book - each chapter has its own heading (the title of that chapter) and is divided into paragraphs, which also have their own headings. Well, the main text of the page is located in paragraphs.
Headers are created using tags
,
,
,
,
,
. They have varying degrees of importance. In the title h1 should be located title of the entire HTML page, V h2- Name blocks pages, in h3- the name of the subblocks and so on.
,
,
,
. They have varying degrees of importance. In the title h1 should be located title of the entire HTML page, V h2- Name blocks pages, in h3- the name of the subblocks and so on.
,
. They have varying degrees of importance. In the title h1 should be located title of the entire HTML page, V h2- Name blocks pages, in h3- the name of the subblocks and so on.
All headers are bold by default and have different sizes (this can be changed via CSS, but more on that later). See example:
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
This is how the code will look in the browser:
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
Block. Fatty
You already know that headers are by default fatty. However, you can make it bold and plain text- just tag it . See example:
This is normal text, and this is fatty text.
This is how the code will look in the browser:
This is normal text, and this is fatty text.
should be used inside some other tag, such as a paragraph. In this case, paragraphs create the overall structure of the page (paragraphs and headings), and the tag b makes individual pieces of text bold.
Block. Italics
In addition to fatty, you can also make italics using tag :
This is normal text, and this is italic text.
This is how the code will look in the browser:
Block. Lists
Along with paragraphs and headings, there is another important element of the page - this lists. Such elements are probably familiar to all Internet users. They represent a listing of something (list) point by point. Next to each item on the list there is usually a filled circle (it’s called marker list).
Lists are created using a tag
- , which must contain tags
- . Tag ul specifies the list itself, and the tags li list items should be placed (that is, one li corresponds to one list marker). Please note that li tags cannot be used separately. See example:
This is the title title - First item on the list.
- Second item on the list.
- Third item on the list.
This is how the code will look in the browser:
- First item on the list.
- Second item on the list.
- Third item on the list.
Lists created via tag ul, are called disordered lists. This name was given to them because there are also ordered lists that have number markers instead of dot markers. Such lists, instead of the ul tag, have the tag
- , and items of such lists are also created through tags li.
- First item on the list.
- Second item on the list.
- Third item on the list.
- First item on the list.
- Second item on the list.
- Third item on the list.
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
- Draft ( Draft specification) - the first draft version of the standard.
- color – sets the text color;
- size – font size in conventional units.
- face – used to set the text font family that will be used inside the tag . Several values are supported, separated by commas.
- - sets in html bold font. Tag similar in action to the previous one;
- — the size is larger than the default;
- — smaller font size;
- — italic text (italics). Similar tag ;
- — text with underlining;
- crossed out;- — display text only in lower case;
- - in upper case.
- In pixels;
- In absolute terms ( xx-small, x-small, small, medium, large);
- In percentages;
- In points (pt).
- normal – normal spelling;
- italic – italic;
- oblique – font slanted to the right;
- inherit – inherits the spelling of the parent element.
- bold – sets the html font to bold;
- bolder – bolder relative to normal;
- lighter – less saturated relative to normal;
- normal – normal spelling;
- 100-900 – sets the font thickness in numerical equivalent.
- caption – for buttons;
- icon – for icons;
- menu - menu;
- message-box – for dialog boxes;
- small-caption – for small controls;
- status-bar – status bar font.
- normal - normal font;
- italic - italic style;
- oblique - oblique style.
Let's make an ordered list using tag ol:
This is the title title
This is how the code will look in the browser:
The convenience of ordered lists is that I can insert a new list item anywhere - and the numbering will rearrange itself (that is, I don’t have to keep track of it in case of any changes, as would be the case if I arranged it manually ).
Block. Links
Links are the elements that make the Internet an Internet. By clicking on links, we can move from one page of the site to another. If they didn’t exist, the Internet would be just a collection of pages not connected to each other in any way.
This is the title title Link to phphtml.net site.
This is how the code will look in the browser:
There are links absolute And relative, in addition, they can lead both to your site and to someone else’s. It is better to show these difficult moments rather than describe them in text, so I made the following video for you. Watch it and only then proceed to further reading:
Block. Images
Let's now figure out how to place image on your website page. This is what the tag is for having a required attribute src, which stores the path to the image file.
Let's see how this works in the following example:
This is the title title
This is how the code will look in the browser:
Please note that the tag does not require a closing tag.
Block. Links in the form of pictures
Link there may be not only text, but also picture- a tag is enough for this put in tag , as done in the following example. Click on the picture and you will follow the link to the phphtml.net website (to then return back to the book, click the “back” button in the browser):
This is the title title
This is how the code will look in the browser:
Block. Line break
Remember what will happen if, for example, you make two paragraphs side by side - in this case, the text that lies in each of them will begin with new lines.
Let's see this with the following example:
This is the title title This is the first paragraph.
This is the second paragraph.
This is how the code will look in the browser:
This is the first paragraph.
This is the second paragraph.
There are, however, situations where we would like to have one paragraph, but some text in it starts on a new line. Why might this be needed? For example, I want to type a poem, but I don’t want to break each line into a separate paragraph, since that wouldn’t be very logical.
To do this, in the place where there should be a line break, you should write a tag
. Please note that this tag is special and does not have a closing tag.Let's see how it works using the following example:
This is the title title This is the first line of text,
and this is the second one.
This is how the code will look in the browser:
This is the first line of text,
and this is the second one.Block. HTML comments
Almost all programming languages have such a concept as “comments”.
Description
Sets the italic style of the font. It is acceptable to use this tag in conjunction with other tags that define the style of text.
Syntax
TextClosing tag
Required.
Attributes
Similar to CSS
Example. Using a tag
Tag I Lorem ipsum dolor sit amet
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.
Note
Although the use of the tag is not frowned upon in HTML; the use of styles provides more control over the style of text.
Specification ?
✖
Specification
Each specification goes through several stages of approval.
Alive stands apart HTML standard(Living) - it does not adhere to traditional version numbering, since it is under constant development and is updated regularly.
Browsers: Desktop Mobile ?
Internet Explorer Chrome Opera Safari Firefox 2 1 2 1 1 Android Firefox Mobile Opera Mobile Safari Mobile 1 1 6 1 In html, font size plays an important role. It allows you to draw the user's attention to important information, posted on the site page. Although not only the size of the letters is important, but also their color, thickness and even family.
Tags and attributes when working with html fonts
Hypertext language has a wide range of tools for working with fonts. After all, text formatting is the main task of html.
The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.
Let's look at the tags that are used to work with fonts in HTML and their attributes. The main one is the tag . Using the values of its attributes, you can set several characteristics of the font:Positive attribute values from 1 to 7 are supported.
Only the text located between the parts is formatted tag pair font. The rest of the text is displayed in the standard default font.
Also in html there are a number of paired tags that specify only one formatting rule. These include:Plain text
Thumbnail
Thumbnail
More than usual
Less than usual
Italics
Italics
With underscore
Crossed outStyle attribute capabilities
In addition to the described tags, there are several more ways to change the font in html. One of them is to use the generic style attribute. Using the values of its properties, you can set the display style of fonts:
1) font-family – the property sets the font family. It is possible to list multiple values.
Changing the font in html to the next value will happen if the previous family is not set to operating system user.Writing syntax:
font-family: font-name [, font-name[, ...]]
2) font-size – the size is set from 1 to 7. This is one of the main ways you can increase the font in HTML.
Writing syntax:font-size: absolute size | relative size | meaning | interest | inherit
You can also set the font size:
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style – sets the font writing style. Syntax:font-style: normal | italic | oblique | inherit
Values:
An example of how to change the font in html using this property:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant – converts all capital letters to capital letters. Syntax:font-variant: normal | small-caps | inherit
An example of how to change the font in html with this property:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – allows you to set the thickness of the text (saturation). Syntax:font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Values:
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
HTML font property and font color
Font is another container property. Inside itself, it combined the values of several properties intended for changing fonts. font syntax:
font: font-size font-family | inherit
The value can also be set to the fonts used by the system in the labels on various controls:
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif
To set the font color in HTML, you can use the color property. It allows you to set the color using keyword, and in rgb format. And also in hexadecimal code.Italics is one of the most popular ways to highlight a piece of text and give it some significance. It is ideal for quotations, footnotes, titles and proper names. There are two special tags in HTML for displaying italic style. In CSS, italics are controlled by the font-style property.
Italic or italic?
The same font may appear differently in italic style.
The picture shows three blocks of text typed in the same Playfair Display font. The first one has the usual roman style, while the second and third ones have italic style. They are open in the same Google browser Chrome, but look completely different.
The fact is that some fonts have their own italic character sets. If the browser does not have access to this set, but encounters text that should be rendered as italic, it will try to italicize it on its own.
In the second block there is just such a version processed by the browser, and in the third there is an original italic version of the Playfair Display font, which has a unique style, more like a handwritten one. The browser simply tilts each character of the text at a certain angle, simulating italics.
When figuring out how to make italic in CSS or HTML, it is important to remember that in the case of specific fonts, you need to provide the browser with access to their italic sets. In some cases, the result of browser tilt algorithms may be unsatisfactory.
HTML italic
There are two special tags for displaying italic text in HTML: i (from the word italic) and em. The style of a text fragment enclosed in any of these descriptors will be the same.
The difference lies in the logical selection. The em tag indicates the special significance of the fragment. This is important for search robots and screen readers, who will highlight the specified text using intonation.
font-style property
In CSS, italics are controlled by the font-style statement. It can take one of three basic values:
Currently the majority modern browsers treat oblique and italic values the same way, but it was originally assumed that the former was the result of special browser algorithms that tilt each character to the right.
If the font you are looking for is not found by the browser, then italic will look exactly the same as oblique.
Unlike the em tag, it does not give the selection any special importance; it rather corresponds to the i descriptor.
Examples
Quotes are often used in italics. Let's try to make it look nice.
Quote ( font-style: italic; border-left: 5px solid purple; padding-left: 20px; )
In addition to the decorative border on the right and indents, the quote block has a font-style rule with the value italic.
Use it to set italics in CSS.