A tag is a special reserved word enclosed in angle brackets (eg ). The tag is the main component of HTML: the code begins with it, it ends with it, the information displayed on the web page is contained within the tags. It is recommended to write them in lowercase, that is, in ordinary small letters: not, but.
What are tags?Most HTML tags are paired: there is an opening tag (for example, ) and a closing tag, which is distinguished from the opening tag by a slash (/ ) after the first angle bracket (for example, ). Everything inside a pair of tags is called their content.
Content Text placed inside these tags becomes bold
There are also unpaired (single) tags, which are called labels. They, unlike pair tags, do not need to be closed, because they do not work with content, but perform some function on their own. Single tag example -
. It sets the text to wrap to the next line.
If we draw parallels with the Russian language, then we can say that paired tags are quotation marks or brackets that affect the properties of the text contained in them (try not to close the quotation marks in time), and single tags (labels) are punctuation marks (exclamation mark, question mark or dot).
Each tag consists of:
- The opening angle bracket (< ).
- Special word (tag name). For example, hr , iframe , b .
- The closing angle bracket (> ).
Since tags are the basis of the markup language, it is not surprising that there are quite a lot of them. Consider the main, most important tags.
- - a single tag inside which a comment is placed. A comment is text that is not processed by the browser. You can write anything inside the tag, even other tags - they will not work, they will not be displayed on the screen. Developers comment on the code either to make it easier for other webmasters to understand it, or so that after a long time they can quickly understand it themselves.
- , , , , are tags that should be present in any decent HTML document (for details, see "How to create a website in Notepad").
- - the tag contains auxiliary information for browsers and search engines. Inside it, you can write keywords, page description, document encoding, author's name, etc.
- contains a link to a script file or the code itself.
- - a tag that sets the style of the document and / or its elements using CSS. An HTML document can contain many tags that define different styles for different parts of the page.
- - complete opposite, complementary to it. The tag sets the "header" (title) of the section or the entire page.
- stores the "legs" of the site or section. Inside it, you can place auxiliary information, copyright, contact information, etc.
- contains the main content of the page. Neither the header, nor the menu block, nor the “legs” of the site, but what the page was created for. For example, on the page you are currently reading, this article should be located inside.
- designed to create links. Links are the root of hypertext, so they are dedicated to.
needed to add pictures to a web page (dedicated to this action is at your service).
-
,
, - , , ,, , , and other text formatting tags make up a large group of HTML tags and are described in the Formatting Text in HTML article.
- - block element. The text inside is formatted using CSS (Cascading Style Sheets, which is the subject of the second part of the tutorial).
- . Do you have a paragraph
or block. The text in it is designed in the same style, but you would like to make several words have a different font size or color without breaking the structure. This is exactly what the tag is for.
-
,
-
,
- - list tags. Marked, numbered - the work of these tags. There are also lists of definitions for which the tags are responsible, and , but you will learn more about all these six from the article "Creating Lists".
, , ,
, And are used when creating tables and are discussed in detail in a separate article. - - a tag that adds interactivity to the page, that is, allows the user to interact with the website. Of course, the form needs a handler, but with the help of tags inside you can create an interface. Checkboxes, buttons, radio buttons, input fields, and other objects that require you to take action are all form elements whose code is placed inside a container.
- - a tag that creates an interactive button. In order for something to happen when you click on it, the button must be in the form (located between the tags).
- creates form elements: switches, checkboxes, buttons, all kinds of input fields. inserted into the container. But why do we need it separately, if there is a universal one? allows you to create a button with advanced options. For example, you can place an image on a button. On an element created via , this cannot be done.
- and - menu creation tags in HTML 5. - this is a container inside which elements are placed, the addition of which leads to the creation of menu items. Pretty interesting couple. For example, with its help you can create your own context menu for a page or its individual element.
- - another form tag that creates a large field in it, into which you can enter not one line of text, but entire paragraphs.
In the HTML language, everything that you write in an HTML document will be displayed on the browser screen in 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 how to display the part of the text enclosed in tags. To create a tag, HTML code is entered between angle brackets, which is intended only for browsers. Site visitors do not see the tags.
As noted above, all tags start with an angle bracket.< и заканчиваются угловой скобкой >. The opening angle bracket is followed by the name of the tag (command).
For example, a tag is designed to emphasize text, browsers display such text in italics. When the browser encounters this tag, it switches to italic formatting of the text following the tag.
Consider an example:
This text is normal. This text is italic.
The tag is called the start or opening tag, which means that the browser includes a specific command (in this case, writing in italics). Most tags have a pair in the form of a closing tag that disables the command.
The end tag looks the same as the start tag, but starts with a slash. So, the end tag for italics is .
Consider an example:
This text is normal. Attention! Italics. This is again a regular font.
As you can see, 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 HTML document markup, and tags are markup characters. When writing tags, the case of letters is not taken into account, the tag can be written in both lowercase and uppercase letters, but the use of uppercase letters is still recommended. The following are examples of basic HTML tags, with an explanation of their use, and examples of how they are used in an HTML document.
TitlesThere is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML, ranging from the most important declarations to the least important.
We looked at an example of creating a simple page, where comments were given on some html tags, because 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 the creation of the page was considered in the second lesson, and more detailed in the third.
So, below are descriptions of common html tags that are used on almost every page of the site. Believe me, they are already enough to write a whole site.
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, it was created for this).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 the style parameter to the tag:
With these different values, you can 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 set the CLASS and ID attributes. For example:
2. HTML tag and (bold)And - two tags that allow you to make the font bold. There is no difference between these tags.
Let's take an example. HTML code:
thumbnailTransforms on the page to the following:
thumbnail
You can also set the CLASS and ID attributes (as in the case of Note
These tags have little effect on the ranking of documents in search engines, so it's best not to use them pointlessly.
3. HTML tag (creating italics)- italic font (allows the style, class, id parameter)
For example, html code:
italic textTransforms on the page to the following:
4. HTML tag (underlined text)- underlined font (allows style, class, id parameter)
For example, html code:
underlined textTransforms on the page to the following:
underlined text
5. HTML tag (create hyperlink)Creates a link on the page (allows the style, class, and other parameters).
For example, html code:
link textTransforms on the page to the following:
All tag parameters and attributes will be discussed in a separate lesson: html tag.
6. HTML tag (headings in content),..., - heading 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 h1The 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 because the tags ,..., have a big impact on search engines. If you use them correctly, then the chances of getting to the top lines of the issue are very high.
7. HTML tag (alignment)- aligns the content in the center.
For example, html code:
This text will be in the centerTransforms on the page to the following:
This text will be in the center
Note- - for text
- ... - for everything (like an image)
- Displays subscript font.
For example, html code:
Plain text, subscript textTransforms on the page to the following:
Plain text, subscript text
9. HTML tag (superscript text)- Displays superscript font.
For example, html code:
Plain text, superscript textTransforms on the page to the following:
Plain text, superscript text
10. HTML tag,, - displays the font one pixel more/less than the current size (allows the style, class, id parameter).
For example, html code:
Regular font, this font is one pixel largerTransforms on the page to the following:
Regular font, this font is one pixel larger
11. HTML tag- (create lists)
- And .
- first element of the list
- second element of the list
- first element of the list
- second element of the list
- elements of the list are placed. An example of the code for displaying lists, presented in the form of numbered and bulleted lists, is shown in the figure.
To link two or more Web pages to each other, hyperlinks are used, which are created using the tag . Moreover, additional attributes are used in hyperlink tags, allowing either to go to another web page or move within this page. The second method is desirable to use in a large document that has several semantic sections.
An example of using hyperlinks is shown in the figure.
When specifying the URL of another page, you must specify either the full absolute path to the page "full path/folder/page" or the relative (relative to this page) "folder/page". The “target” parameter allows you to open the web page in a new or existing browser window.
The tag is used to insert an image into a web page.
with parameters src (path to the image), width (image width), height (image height), border (frame around the image). Image embed code example:
Often when creating Web pages, it is necessary to specify a background color or background image. For this, the attributes of the "bgcolor" or "background-image" tag are used. An example of inserting a background color:
An example of inserting a background image:
The specified attributes can be used not only for the tag, but also for table tags, area tags, and others, which will be discussed in the following topics.
In the life of every copywriter, there comes a stage of acquaintance with html tags. Usually this happens spontaneously and looks like a request from the customer to "prepare the text for publication." This means that in the article you need to highlight headings, paragraphs, significant places and lists, but not with Word capabilities, but with a special html code of the language. Tags for a copywriter will help with this. The list required for work is usually small, but it is enough for formatting text with standard requirements. What is included in the necessary html tags for a copywriter? (If you are too lazy to read, then scroll down - there is a simple and understandable thematic infographic about html tags!)
The questions the copywriter asks are traditional. And they all start with the wording "what tag is given ...":
- title;
- paragraph;
- thumbnail;
- italics;
- list marked/unmarked/
All this gives TK piquancy and stimulates the development of new knowledge. The situation is aggravated when the task is to use the bold text tag to increase the attractiveness of the key in the PS. But all this is solved very simply, which we will deal with now.
Tags for creating headersHeading tags are represented by h1-h6 elements. They got their letter from the English Header (header). To set the required type of header and emphasize its significance for the PS, use the following code:
Heading h1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6
On the site it will look like this.
Heading h1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6The h1 heading has the most significance – and visibility –. It is used as the title of the post, and it is used once. For subheadings in the text, h2 and h3 are recommended. They help emphasize the importance of the material under consideration and divide the article into informational levels.
Headings h4-h6 are practically not used, but they are in demand to highlight logical blocks and important fragments.
For large articles, it is best to use h1-h3 headings, for small ones, h1 and h2.
Lists: marked and unmarkedStructured good text always has one or more lists. By their appearance, the lists are:
- marked - they have numbering;
- unmarked - elements are marked with symbols.
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
Outputs a list (allows the style, class, id parameter). Each new element is written between
For example, html code:
List:Transforms on the page to the following:
List:
(create tables)
- creates a table (allows the style, class parameter). Each new line is created by tags
, and the column . For example, html code:
1-row 1 element 1-line 2 element 2-row 1 element 2-row 2 element Transforms on the page to the following:
All tag features
13. HTML tag
(line break)
- transition to the next line, is a single tag.For example, html code:
Line 1
2-line
3-line And this text will be on the 3rd line, since there was no transitionTransforms on the page to the following:
1-line
14. HTML tag (horizontal line)
2-line
3-line And this text will be on the 3rd line, since there was no transition- draws a line, is a single tag (allows the style, class parameter).
For example, html code:
Some text above the line And this text will be already below the lineTransforms on the page to the following:
Some text above the line And this text will be already 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 ">
Transforms on the page to the following:
All tag features
16. HTML tag (text formatting)will be discussed in a separate lesson: .
- for formatting text, changing style, etc. (allows the style, class, id parameter). It has no weight in the eyes of search engines, so you can use it as much as you want.
For example, html code:
This text is green and its size is 15pxTransforms on the page to the following:
NoteThe 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 (block creation)- serves to create blocks on the page (allows the style, class parameter). Previously, tables were used mainly for markup on pages. After the appearance of the tag, the task was simplified. Almost all sites contain blocks as a convenient alternative to tables.
The HTML language is based on the concept of a tag. tag label, label). Tags are enclosed in angle brackets (< >) and form pairs - containers (opening tag and closing). For example, the container of an HTML document is a pair of tags and . The web page includes containers that are responsible for the title of the document (head) and contain additional information, as well as containers that are responsible for the content of the document itself (body). They are shown in the figure.
So the HTML document is wrapped in a container, the header is in a container, and the content of the document is in a container. The container located in the header (container ) contains the text displayed in the top line of the browser window. Tags can also be added to the header container, containing the encoding, keywords of the web page, as well as code for including CSS files, javascript, VBScript, etc.
An example of a simple HTML page containing only the main tags:
Title of the pageContent of the simplest page
The result of this code is shown in the figure.
As you can see from the example, the text "Contents of the simplest page" is displayed in plain text. In order to format this text, you must use special tags. An example of using formatting tags is shown in the figure.
To change the font, its color and size, a tag with the “face”, “color” and “size” parameters is used. For example, in order to set the font “arial” in red color and size 14, you need to write the following code:
Formatting the text
The tag is used to highlight a paragraph in the text.
In the container of which, as a rule, each paragraph of text is placed. The tags , , , , , are used to create a title.
The , and containers are used to form lists in the body of the document. Moreover, the tag forms a numbered list, the tag
- - bulleted list, and in tags
But all the Word design is not suitable for publishing on the site, so you should learn how to format lists in HTML tags correctly.
The bulleted list tag looks like this:Tag an unlabeled list like so:
In addition, each element of the list has its own html-frame:
It turns out that in order to highlight a bulleted list in the text using html code, you will need to combine both types of elements used. It will look like this:
For an unlabeled list, similarly:
Got the lists sorted out. You can move on.
text accent tags: bold and italicUnderstanding which tag allows you to correctly format the text, you almost immediately come across two code options for each case. This causes bewilderment among non-programmers and the question: what kind of tag does the customer need.
Everything is very simple! Tags offer options for physical and logical formatting. The former are needed for users, the latter for search engines. "Search engines", seeing the html code suitable for themselves, take into account the selected area and use the information received when ranking, so highlighting text using logical formatting will not be an error.
The use of html tags makes it possible to please search engines and visually highlight the text for the user. Decide which is more important:
Highlighting a phrase in bold for PS and users Highlighting a phrase in bold for users Italicized phrase for PS and users Italicize a phrase for users
I have a large and very controversial article on the topic of bold tags, which is called .
If one of the programmers suddenly looks into the topic, then I hasten to note once again that the review is for copywriters: how to put tags, what they are and what is important to consider when choosing. And finally, one more popular html code needed to select paragraphs. This
The opening tag is placed before the beginning of the paragraph, the closing tag is placed at the end. If the paragraph ends with a list, then
is placed after all tags used for the list.Well, some simple thematic infographics at the end:
When the discussion of the topic began in the comments, in the Club of Successful Copywriters, interesting feedback was given to the infographic and the article. Here is a screenshot of the opinion of an authoritative participant in the discussion.
Read: 3 365
Top Related Articles
