This is text with smaller letters.

This is text with capital letters.

Example: reduced and enlarged font

• Try it yourself »

This is normal text.

This is text with smaller letters.

This is text with capital letters.

HTML tag

Tag used to highlight or highlight text because of its relevance in context. A good example is highlighting a word that the user searched for in a document. Typically in browsers the background color of the text inside the container is highlighted in yellow like an ink marker.

HTML tag

Tag used to highlight text that has been removed in a new version of the document. This formatting allows you to track what changes have been made to the revised text of the document. Browsers typically mark text within a container like crossed out .

HTML tag

Tag is intended to highlight text that has been added to a new version of the document. This formatting allows you to track what piece of content was added when the document was last updated. Browsers typically mark text within a container .

HTML tag

Tag _{displays text in subscript. The text is located below the baseline of the remaining characters of the line and is of reduced size. Such text can be used in practice, for example, to write various formulas in subscript .}

HTML tag

Tag ^{displays text in superscript. The text appears smaller and higher than the baseline of the rest of the characters in the line. Such text can be used in practice, for example, to write various formulas or footnotes in superscript .}

Line breaks and horizontal lines

Tag
(line translation)

As you have seen before, the tag

Allows you to logically and physically separate one paragraph of text from another, but what if you need to move text inside a paragraph to a new line? A single tag is designed specifically for these purposes.
. One of the visible differences between this tag and

Is the absence of indentation after and before the tag
. This allows adjacent lines of text to be placed closer to each other. The ability to independently determine the location of the transfer can be useful when recording poetry or for separating various elements in a document. Add an element
on any line where you want to break the flow of text and insert a line break.

Tag

---

(horizontal line)

Horizontal lines allow you to divide long, formally open-ended text into separate subsections. Horizontal lines in a web document play the same role as ornamental stripes in printed publications. A single tag is used to insert a horizontal line

Example: line breaks and horizontal lines

• Try it yourself »

These lines are separated from each other using a paragraph (p):

This is the first paragraph.

This is the second paragraph.

This is the line:

These lines are separated from each other using the br tag:
Our Tanya is crying loudly
Dropped a ball into the river

HTML code with tags , , , _{, ^:}

The text contains the word: luck.

Word trouble has been removed from the text.

Word victory has been added to the text.

Water formula: N ₂ O.

Wind speed: 20m ³/sec.

Example: Text Formatting

• Try it yourself »

There is a word in the text: luck. The word trouble has been removed from the text. The word has been added to the text. Water formula: H 2 O. Wind speed: 20m 3 /sec.

The text contains the word: luck.

Word trouble has been removed from the text.

Word victory has been added to the text.

Water formula: N ₂ O.

Wind speed: 20m ³/sec.

Tasks

Final task

In this lesson, you learned about elements designed to mark small phrases and individual words. Particular attention was paid to the logical layout of the text using tags to indicate the importance of a word or phrase, and not just visual formatting.

It's time to review what you've learned and complete five simple tasks:

Semantically strong word

• Decide for yourself"

Highlight the word “professional” in bold, thereby indicating the special semantic importance of this word.

You must become a professional in your field

You must become professional your business

Emphasis on the word

• Decide for yourself"

Emphasize the word "full." In this case, visually this word should be displayed in italics.

HTML Beautifier & Formatter

Load URL Load URL

HTML Formatter

Enter your messy, minified, or obfuscated HTML into the field above to have it cleaned up and made pretty. The editor above also contains helpful line numbers and syntax highlighting. There are many options to tailor the beautifier to your personal formatting tastes.

When do you use HTML Viewer, HTML Formatter, HTML Formatter

Often when writing HTML your indentation, spacing, and other formatting can become a bit disorganized. It is also common for multiple developers to work on a single project who have different formatting techniques. This tool is helpful for making the formatting of a file consistent. It is also common for HTML to be minified or obfuscated. You can use this tool to make that code look pretty and readable so it is easier to edit.

Examples

The minified HTML below:

• Javascript Minify
• CSS Minify
• CSS Beautify
• Javascript Beautify
• HTML Beautify
• Perl Beauty
• PHP Beautify
• GO Beautify
• Ruby Beauty
• SQL Beauty
• XML Beautify

• Javascript Minify
• CSS Minify
• CSS Beautify
• Javascript Beautify
• HTML Beautify
• Perl Beauty
• PHP Beautify
• GO Beautify
• Ruby Beauty
• SQL Beauty
• XML Beautify

Until now, we have aligned elements only to the left. More precisely, you and I didn’t do this at all, and the browser itself aligns elements to the left by default. Of course, it would be too boring to align everything to the left. Therefore, there are different ways to center and right align.

Alignment of elements is something you just need to know when doing this. The first thing you need to do is type a simple page.

Once upon a time there was a tag

I don’t advise you to use it now, due to the availability of more modern methods, but I can’t help but mention it. It is very, very simple to use. Everything you need to be centered, you place inside this tag. For example, here we align the 1st level heading to the center.

You can add a picture, also aligned to the center, let's also move to the next line using the tag
:

1st level heading, center aligned

It was a tag

, which is already outdated, in addition, contrary to your expectations of tags And simply doesn't exist. Let's say left aligned by default, center aligned using tag , but what about the right one?

To solve this problem, the developers came up with a universal way to align elements HTML. The method is to use so-called containers, which are created using the tag

. That is, everything that needs to be placed in a specific container is placed inside the tag

. And this tag already has the attribute " align", the value of which determines the position of this container. There are three values: " left", "center", "right". By default, it is " left“However, I think that this does not surprise you.

Let's write the same one now HTML code, but using containers, in addition, let's align not to the center, but to the right.

As you can see, everything works. I advise you to also change the values ​​of the attribute " align" to look at other types of container content alignment.

Another way to align elements HTML- these are tables, but this topic deserves a separate discussion, so we’ll talk about it in one of the following articles.

For now, your page should look like this:

1st level heading, center aligned

1st level heading, right aligned

Sincerely, Mikhail Rusakov.

P.S. If you want to know more about HTML, then take a look at my free course with an example of creating a website at HTML:

Sometimes our code is not always perfect. And I really want it to be not only functional, but also beautifully designed and formatted. Time is our main enemy; it rarely allows us to follow the rules of code design. We try to quickly finish the layout, or describe a dozen CSS styles, and we do this at the expense of readability. In this article, I will provide a list of services that will help you format your code so that it is pleasant to look at.

Should you trust the program or do everything manually?

Surely you have a question: how to make the code readable? Can a program correctly arrange all the indents and line breaks so that the human eye receives only aesthetic pleasure from viewing the code? Of course it can! Don’t be mistaken that since a robot is essentially doing the work for you, it will be done “dirty.” The services that will be presented in the article below have saved me more than once. For example, in situations where it was necessary to copy the same html code from another site, and when pasting the tags, they were simply placed in some chaotic order along the lines: a lot of tabs, non-logical line breaks, absolutely no nesting was visible! This is probably familiar to many. And I really want your website to look different: neat and easy to read. After all, first of all, we do this for ourselves, for the convenience of further support of this or that code.

Let's format your code

Less words, more action. As practice has shown, formatting code online is quite simple. All you need to do is copy your dirty code and paste it into the special text fields on one of the specified sites. Then press the button, wait a little and - voila! You get beautiful, formatted and easy to read code.

Here is a list of all the code "purifiers" I know of for various languages.