You can use the i tag. HTML5: old tags with a new purpose

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)


Kittens "adopted" by pet rabbit


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.


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 was nothing more than crossed out text. Now represents information that has lost its relevance.
We also have an element , the default result of processing in visual user agents is strikethrough text. It means changes to a document, and at first glance their purpose may seem the same. However, there is a subtle point here. Let's look at an example of a product page in an online store.
It may indicate two prices, one of which is crossed out. We mark it with the element . This means that the old price has lost its relevance (it doesn’t matter when it was, the fact itself is important). How to check that it is not ? implies changes made to the document(the important thing is that at some point in time the document was changed). In our case, the new document already contains irrelevant information.

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, except are not even invalid. In addition, HTML5 was designed with backward compatibility in mind, and the same applies to the new semantics of old elements. Nothing has changed radically, but only a semantic spice has been added.

Now 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 tag , which specifies the title of the page, which will be visible in the browser tab, and the tag <meta>, which specifies the page encoding (it is placed in the attribute <b>charset</b> and usually matters <b>utf-8</b>, more about this in the video, which will be a couple of paragraphs lower).</p> <p>Also, before the tag <html>the construction is usually written <b>doctype</b>, 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 -<!DOCTYPE html> .</p> <p>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 <b>.html</b> and open in a browser, if you have problems with this, watch the video below the example):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is the title title This is the main content of the page.

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 the title title

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.

All headers are bold by default and have different sizes (this can be changed via CSS, but more on that later). See example:

This is the title title

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 the title title

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 the title title

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