> >

Html tags and their meanings. HTML Tag Attributes

In HTML, everything you write in an HTML document will be displayed on the browser screen as solid text, that is, the browser ignores line breaks, and several spaces you type in a row are replaced by one.

Tags are control commands that were invented in order to format text, i.e. tags tell the browser exactly how to display the portion of text enclosed in the tags. To create a tag, you enter HTML code between the angle brackets, which is intended for browsers only. Site visitors do not see tags.

As noted above, all tags begin with an angle bracket< и заканчиваются угловой скобкой >. The opening angle bracket is followed by the name of the tag (command).

For example, a tag is intended to emphasize text; browsers display such text in italics. When the browser encounters this tag, it switches to formatting the text following the tag in italic font.

Let's look at an example:

This text is normal. This text is in italics.

The tag is called the start or opening tag, which means the browser has included a specific command (in this case, writing it in italics). Most tags have a pair in the form of a closing tag that disables the command.

The closing tag looks the same as the starting tag, but begins with a slash. So, the end tag for italics is .

Let's look at an example:

This text is normal. Attention! Italics. This is again a regular font.

As you may have noticed, the browser sequentially analyzes the HTML document in search of commands (tags) and applies or disables various text formatting options. The browser displays formatted text (everything that is not a tag) in its window.

The process of inserting tags into plain, unformatted text is called markup in an HTML document, and tags are called markup characters. When writing tags, the case of letters is not taken into account; a tag can be written in both lowercase and capital letters, but it is still recommended to use capital letters.

Below are examples of basic HTML tags, with an explanation of their use, as well as examples of how they can be used in an HTML document.

Headings

There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML, ranging from those for the most important announcements, to those for the least important.

Example HTML: Try it yourself Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 HTML paragraphs

WITH using HTML tag

You can define a paragraph.

Paragraphs are used to group text logically. Before and after paragraph text, the browser automatically indents one line.

Example HTML: Try it yourself

This is a paragraph

This is another paragraph

The href attribute specifies the URL of the document to navigate to.

Attributes are used to provide additional information about HTML elements.

Inserting Images

Using HTML tag You can insert any image into an HTML document.

The width and height of the image can be set using the width and height attributes.

Hello, dear readers of the blog site! In the last article, we figured out what a document type is and how browsers determine the language used using . The tag was considered, but the concept (term) itself was not. In this article I will tell you what a tag is, why it is needed and what types of tags there are. As I said in the last article of this section, we will create a file page, which we will experiment with, based on the knowledge we have acquired. But this is at the end of the article, but for now let’s look at the HTML tag.

What is an HTML tag, types of HTML tags, examples of writing HTML tag - translated from English tag - to mark -characters enclosed in angle brackets and which are elements of the hypertext markup language (HTML). Symbols can be of some use English language(the entire Internet is built on it). The tag looks like

This is a tag for making text bold. Tags have three types:

  • The opening tag is the tag that comes at the beginning. In the example discussed above, the tag is the opening tag and stands before the text that needs to be highlighted.
  • The closing tag is the tag that comes at the end. A distinctive feature is the slash “/” before the characters in angle brackets. Let's look again at the example discussed above. The tag is a closing tag and comes after the text, which should be highlighted in bold
  • Single tags are tags that do not have a closing tag. An example would be
    Here is an example of an opening and closing tag:

The entire design, including the text, will look like this:

This text will be highlighted in bold

And this is what this text will look like when the browser processes it and provides it to us: This text will be highlighted in bold. There is also such a thing as container tags, but this is just a generalized name for opening and closing tags. As I wrote above, in addition to container tags, there are also single tags. The difference is that such tags do not need to be closed. The clearest and most common example is the newline tag.

Basically, single tags are used to insert an element, such as an image or a table.

What are attributes, writing rules and why are they needed? In addition to tags, there are also so-called attributes. More precisely, not besides, but in tags. Using attributes, you can set additional parameters for a tag. Each tag has its own attributes, and in this topic we will experiment with the tag, which, in fact, does nothing meaningful without attributes.

Font is a container tag used to format text. Using this tag, you can make the text bold, change the size, and the distance between lines - in general, everything that you can do with the text. Let's look at an example with text size. First, let's enclose the text in a Font tag.

Text

Now a little about the rules for writing attributes. Attributes are always written in the opening tag and after the characters of the tag itself. You can write multiple attributes in one tag in any order. You can find the attributes on the W3C validator website (which I will write about below). So here's an example of a font tag with a size attribute:

Text

This attribute in the font tag changes the size of the Text enclosed in the tags.
If you open source page, you will see that the place where the large word “Text” is located looks like

Text

You have already seen how attributes are written. They are written in exactly the same way in other tags: first we write the attribute itself (in this case size), then we put “=” and enclose the attribute parameter in double quotes. You can find all the attribute parameters on the same World Wide Web Consortium website.

What is a W3C validator, writing rules and list of tags As I wrote, there are a great many tags. But where can you find them all? For this purpose, there is a W3C validator W3C - World Wide Web Consortium, or in Russian - World Wide Web Consortium. Not entirely clear, right? This is the place where web standards are developed - (hypertext markup languages ​​are their brainchild). At the head of the entire consortium is Tim Berners-Lee, known from the previous article, the creator of HTML. The website of this organization is w3.org. I warn you, the site is entirely in English, so have a dictionary or translator in your browser. By the way, the Google rating for this site is 9, and 37,000 (this is all a lot, if anyone doesn’t know).

Let's return to the topic of the article. We are interested in the HNTML 4.01 language standards. Follow the link HTML 4.01 Specification, after which we see the elements tab at the top, click on it. Here the page with all the tags opens. These tags were developed and adopted as a standard by the consortium. Everything, again, is in English. Immediately after the words “Index of Elements” we see a legend (the meaning of the letters in the columns):

And immediately after the legend there is a table of the tags themselves:

  • In the first column - Name - the name of the tag itself - what should be in angle brackets (< и >).
  • The second column - Start Tag - the presence of an opening tag. In this column you can see the letter “O”, which means “Optional”, and translated from English - Optional. This letter is present only opposite the tags , , and and means that you can put an opening tag, or you don’t have to – the browser will do everything itself.
  • The third column - End Tag - the presence of a closing tag. Opposite this tag you can see both the letter “O” and the letter “F”. The meaning of the first one has not changed. The second letter - “F” - literally “forbidden” in English - means that it is prohibited to put a closing tag, it simply does not exist. For example, there is no tag, because there is nothing to hide in it.
  • The fourth - Empty - means that the tag is single (empty). All tags that have the letter “E” in front of them in this column also have the letter “F” in the previous column. After all, single tags do not have closing tags. An example is the same tag .
  • The fifth column is Depr. or Deprecated - from English “not recommended”. If this column contains the letter “D” (which stands for exactly the same) it means that this tag is not recommended for use in HTML. Looking ahead a little, today for the design of both text and appearance The entire site and HTML document uses cascading style sheets (CSS). In short and simply, one file is created in which all the text parameters that can be called by certain tag attributes are written. So, this function used only on websites, because CSS is not applicable when sending news by email or RSS. And here these same tags come to the rescue. Most of these tags, by the way, relate to text design (and are an example)
  • The sixth column - DTD - can contain either the letter "L" or "F". The first one - “L” - Loose DTD - means that the tag opposite which this letter appears can only be used in a transitional document type (- Transitional, which I wrote about in the previous article). The second - “F” - Frameset DTD - means that the tag can only be used in a document of type FRAMESET ( - Frameset). If the letter is missing, then the tag can be used in all types of documents.
  • And the last, seventh column - Description - short description tag, again in English

The attributes are contained on the same page of the HTML 4.01 specification, but in the “attributes” tab. There are many more attributes than tags. And again I’ll write everything down point by point.

  • The first column is Name - as in the case of tags, the name of the attribute. Everything is in English, but with basic knowledge you can guess what this or that attribute does.
  • The second column - Related Elements - is a list of all tags that use any attribute. All tags have links, so you can immediately go to information about the tag.
  • The third column - Type - is all possible values ​​for a particular attribute. For example, opposite the size attribute we selected in the Font tag is the CDATA value. We'll look at it later, but in short, it's a special set of size options (in this case). After all, you can write both pixels and percentages
  • The fourth column - Default - means whether the attribute is required in specific tag. For example, in the Img tag the src attribute is required, as it indicates the source from which to take the image.
  • Columns 6, 7, and 8 mean the same as in the case of tags.

All of the above applies only to HTML version 4.01. We will talk about HTML 5 in another article, and we will also touch on XHTML. And now, as I promised, we will create a page in HTML, which we will experiment with.

Creating a file in html format - HTML document

First of all, let's figure out what an HTML document is. And this, in fact, is the file in HTML format. And all Internet pages are HTML documents. For example, when you get to a website in the address bar at the end you can see “.html” or “.htm” after the address. This is the file we will create with this extension. In general, if you want to experiment with a website rather than a page, then it’s better to create local server— Denver (about which I want to write everything).

Considering that I didn’t even talk about the tags present on each page, we’ll simply create a file with any name and extension.html. It is possible (and best) to use Notepad++ because in this case text editor Code highlighting is used, which is very convenient when editing code, and files can be saved in a variety of formats. There are also programs in which, when you type a code, the result immediately appears in processed form.

So, we just need to open Notepad++ and save a file with arbitrary text (can be empty), but in .html format. To do this, as usual, click on the file label, then “save as” and look for “HyperText Markup Language file (file extensions)” among the large list of extensions. That's all, actually. We will add the first lines to this file in the next article from the section “Creating a website from scratch”

Basic html tags are the basis on which almost any website/blog is built. From this article you will learn exactly those 20% of tags that you will always need.

As in any language, and even here, the Pareto rule of 20/80 applies (20% of things are 80% important for achieving the desired result), which means that it is enough to know only 20% of the codes to confidently achieve your goals in website building.

HTML is not a programming language, because it is a hypertext markup language, which speaks for itself, it allows you to mark up blocks on pages for correct display, and mark up text for web pages. It is also used to create links from one page of the site to another. All links on the Internet are created using the hypertext part html code.

- this is the most the simplest language! If you decide to study it, then it is important to understand from the very beginning that there is no difficulty in it. We can say with confidence that children have a much more difficult time in computer science classes at school.

So let's get started. It is better to write codes in the notepad that is included in standard programs operating system Windows or free program"Notepad++".

First, let's define what a tag is. A tag is a cell itself html language, from which it is generally built. Using tags, browsers understand how to display text and where to insert images. Tags are the markup elements themselves.

HTML tags to create a website framework

Tags can be paired or unpaired. Paired ones open and close, i.e. the closing ones contain a backslash “/”.

The first thing that should be in any html document when creating a blog page, this is: