We looked at an example of creating a simple page where comments were given on some html tags, since 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 creating a page was discussed in the second lesson, and in more detail in the third.
So, below are descriptions of common HTML tags that are used on almost every page of the site. Believe me, there are already enough of them to write an entire website.
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, this is what it was created for).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 a style parameter to the tag:
With these different values you can edit appearance font. You can read about these parameters in a separate lesson: styles in html and the css font property.
You can also write CLASS attributes and ID. For example:
2. HTML tag And(highlighted in bold)
AND - two tags that allow you to make the font bold. There is no difference between these tags.
Let's give an example. HTML code:
thumbnail
Converts to the following on the page:
thumbnail
You can also specify the CLASS and ID attributes (as in the case of Note
These tags have little impact on the ranking of documents in search engines, so it is better not to use them aimlessly.
3. HTML tag (create italics)
- italic font (allows style, class, id parameters)
For example, html code:
italic text
Converts to the following on the page:
4. HTML tag (underlined text)
- underlined font (allows style, class, id parameters)
For example, html code:
underlined text
Converts to the following on the page:
underlined text
5. HTML tag (creating a hyperlink)
Creates a link on the page (allows for style, class, and other parameters).
For example, html code:
link text
Converts to the following on the page:
All tag parameters and attributes will be covered in a separate lesson: html tag.
6. HTML tag (headings in content)
,...,- header 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 h1
Tag
used for the title of the page (as well as the title)
These tags must be used only for their intended purpose, i.e. only when the article needs a title. This is due to the fact that tags
,...,have a great influence on search engines. If you use them correctly, then the chances of getting to the top of the search results are very high.7. HTML tag (alignment)
For example, html code:
This text will be in the center
Converts to the following on the page:
This text will be in the center
Note- - for text
- ...- for everything (for example, image)
8. HTML tag (interlinear text)
- displays subscript font.
For example, html code:
Plain text, interlinear text
Converts to the following on the page:
Plain text, interlinear text
9. HTML tag (superscript)
- displays superscript font.
For example, html code:
Plain text, superscript text
Converts to the following on the page:
Plain text, superscript text
10. HTML tag ,
, - displays a font one pixel larger/smaller than the current size (allowed by the style, class, id parameter).
For example, html code:
Regular font, this font is one pixel larger
Converts to the following on the page:
Regular font, this font is one pixel larger
11. HTML tag (creating lists)
Outputs a list (accepts style, class, id parameters). Each new element is written between
For example, html code:
List:
- first element of the list
- second element of the list
Converts to the following on the page:
List:
- first element of the list
- second element of the list
12. HTML tag
For example, html code:
1-line 1 element 1st line 2nd element 2-line 1 element 2-line 2 element
Converts to the following on the page:
All tag capabilities
| Tag | What does it mean | More details |
|---|---|---|
| Basic | ||
| !doctype | Defines the document type | Determines exactly how to process the page. |
| html | Entire document | Is a container for all elements on a web page |
| body | Page body | All page content that will be displayed on the screen, its structure |
| head | Important information about the page | It will not be displayed on the screen, but is needed for the site to work (encoding, connecting a style sheet, etc.) |
| title | Page title | The main title will be displayed in the search engine and in the top line of the browser |
| link | Includes external files | Using this tag, style sheets and other external files are included |
| script | Includes javascript files | The required attribute is src, which specifies the path to the file |
| meta | Specifies meta information | Meta information includes encoding and meta tags. |
| Semantic tags html5 | ||
| header | Creates a site or section header | There may be several such tags on a page. Header can form the header of the site as a whole, and the title of the article, etc. |
| footer | Tag for creating a site footer or section | Similar in meaning to the previous element, but created to create the bottom part of the site in it |
| article | Container for displaying content (basic text information) | The main text that is present on your page should be enclosed in this tag. |
| aside | Displays side information not related to the main one | A container for displaying various widgets and other information that is not directly related to the main text. |
| Formatting | ||
| p | Paragraph | The tag creates a paragraph that is separated from other elements by vertical indentation. |
| h1-h6 | Headings | h1 is the most important heading (of an article, website), h6 is the smallest. |
| hr | Horizontal line | Creates a horizontal line across the entire width of the block in which it is placed. Its height usually 1 pixel. It doesn't make any sense, it's just a separator. |
| br | Forced line break | Can be used when a new paragraph is not created, but you need to write text on a new line. Single tag, like hr. |
| span | Universal inline element | Span is designed to be used to wrap the desired pieces of text and apply to them unique design. |
| div | Universal block element | Doesn't make any semantic sense. Essentially a regular container with block properties. Used for a variety of purposes. |
| pre | Tag for displaying text as it was typed in the editor | The text will be output with all spaces, line breaks and indents preserved. |
| figure | A container for grouping elements. The simplest example is grouping pictures and captions for them. | The tag appeared in the html5 specification. |
| figcaption | Title for the elements collected in figure. | Can be positioned above or below the figure, depending on how it is positioned in the code. |
| Links | ||
| a | Link | The tag has a required href attribute, which specifies the url address document to which the link leads. |
| nav | Container for important links | Tag from html5, which was created specifically to place the most important links in it On the page. In fact, it was created to form the main menu on the site. |
| Lists | ||
| ol | Numbered list | Container for list items that will be numbered |
| ul | Bulleted list | Container for list items that will be marked with the same marker |
| li | List item | Each individual list item is placed in this paired tag. By default it has block properties. |
| Images | ||
| img | Displays any image | The required attribute is src (path to the image). Single tag. |
| For text | ||
| b | Bold font | Paired tag. All text that is framed within it becomes bold. Doesn't make any logical sense. |
| strong | Highlights text as important + makes it bold | Works similar to the b tag, but also gives words extra importance. |
| i | Italicizes text | Gives italic style |
| em | Italics text + emphasizes words | Adds logical highlighting of words against the background of others |
| q | A small quote | Designed to highlight small quotes on a page |
| s | Displays text with a strikethrough | Acts only on design, without adding any meaning |
| u | Displays text underlined | Like s, this is a purely design tag. |
| pre | Outputting text while preserving formatting | Preserves all spaces and line breaks that are made while typing. |
| sub | To display the font in subscript | Also reduces the font size itself |
| sup | To display the font in superscript | Works similarly with sub |
| Frames | ||
| iframe | Outputs a floating frame | The required parameter is src. You can also set the width and height. |
| Forms | ||
| form | Container for mold | It contains all the fields that need to be filled out. Has required method parameters and action so that sending it works. |
| input | Displays various form fields | The field type depends on the type attribute. This could be a field for entering text, password, selecting a date, etc. |
| fieldset | Separates one part of the form from another | For example, if some fields are for general registration data and others are for selection of interests, then they can be separated by such tags, since these are different groups of fields. |
| legend | Displays a title for a group of fields | This is the name for the fieldset container |
| label | Field caption | Allows you to establish a connection between the input field and this element. When you click on the label it happens moving focus to the field it is associated with. And if the label is associated with a checkbox or radio buttons, then when you click on it the corresponding button is automatically selected. The binding is done using the for attribute. |
| select | Dropdown list of options | When you click on it, you can select one of the previously specified options. With multiple attribute You can select multiple values from such a list. |
| option | Displays one option for a dropdown list | This tag is single, the required text is written to the value attribute. |
| textarea | Multiline text field | Used when you need to write a lot of text. For example, for comments, reviews, etc. |
| Tables | ||
| table | Main container for table | It contains all its contents - rows and cells. |
| caption | Table title | Can be located anywhere in the table container; in any case, it will be displayed at the top or bottom. |
| tr | Creates one table row | There can be an unlimited number of cells in a row. There is no point in placing anything other than cells in the row itself. |
| td | Creates one cell | This text is also written in the cell. You can insert other HTML elements into it. For example, pictures video and even other tables |
| th | Creates a header cell | The text in it becomes bold and aligned to the center |
| Multimedia | ||
| audio | Allows you to insert an audio file | Insertion occurs using single source tags, which include the path to the file. So far for Cross-browser compatibility, web developers have to insert multiple file formats so that any web browser could identify him. |
| video | Inserts video | The process is the same as in the case of audio. An empty controls attribute adds elements video controls, poster attribute - adds a thumbnail image. |
| source | Specifies the path to the media file (audio or video) | Inserted inside audio or video tags, between their opening and closing parts. The path is specified using the src attribute, codecs are also specified. |
These are not all tags
In this table you can find all the main tags, but that's not absolutely everything. However, these are the ones that will be useful to you, the rest will be used only in 5-10% of cases and you can look them up in some detailed reference book.
Hello, dear readers of the blog site. In fact, this term has several meanings that do not fit together in any particular way. I will try to talk about each of them in this publication.
You will learn, what are HTML tags and how they differ from meta tags, and also learn how tags are used as tags on sites (their variety is ), and finally, let’s take a general look at musical tags in audio files. That's how multifaceted this term becomes.
But in all cases the word "tags" means markup either a web page using Html code, or the entire site using tags, or your music collection by indicating the album and song.
What are tags on a website (tags for creating navigation)
Let's start simple. You've probably all seen that under some articles on websites there is a field called tags or tags, where some words are listed. Why is this being done? In general, to facilitate navigation on this site ().
The so-called tags are used keywords, a set of which briefly characterizes the publication (for example, the following set of tags would be suitable for the main page of my blog: website creation; promotion; website promotion; earnings).
With the help of these words it will be possible to clearly determine what this article was about. But their main value is not this, but the fact that a visitor can click on any tag and see a list of all the articles on the site in which it appeared. Essentially, it is a powerful tool for classifying information.
In order not to search for the necessary tags under articles, website owners very often create the so-called Tag Cloud, which can be placed in the left or right column of the site or in its footer (bottom). This disgrace in practice may look like this:
It usually lists the most popular tags, and you can view all the tags by clicking on the corresponding link. Sometimes, more frequently used tags (they appear in more articles on this site) are displayed in a larger font, and less frequently used ones in a smaller font.
Sometimes a separate page is created to display them, as shown in the previous screenshot.
Why is this markup method using tags not used on all websites, if it is user friendly? They are not on my blog either, for which there are a number of explanations. Although their use is provided by default, there are also a lot of plugins for working with tags.
Yes, tags work great when you have few articles and you remember well all the tags that you have already created and used in other articles. But with an increase in the number of materials, the number of tags increases sharply; they begin to be partially duplicated when keywords that are close in meaning are used.
It results in a huge mess, the value of which in terms of improving navigation, in my opinion, is rather doubtful. For this purpose, on a large web project, it is better to use site search. Although tags work well in social networks, where you can use tags to combine information from different users and view it in one place. .
What are HTML tags?
I first decided to study them fifteen years ago, but I didn’t progress beyond the Title tag then. Then I came across a free video course by Evgeniy Popov on Html and things went well. Of course, that course was only the initial stage, but it is precisely this simple presentation that beginners often lack.
These lessons cover basic tags, with which you can then easily create tables, insert pictures and hyperlinks into the text, add various forms to the site, and much more. Total 33 free videos on HTML topics.
But the video course is a video course, and I have to interest you so that you download it and watch it. From general phrases it is not clear what tags are in the HTML language and why you need to study them. Oh this is great and simple thing, which will allow you to become the master of your own website. Why do you need a website?
Well, probably, first of all, for self-expression and effort, and secondly - . Just be quiet, otherwise everyone will hear and run to study what tags are, make websites and earn everything that only you could earn, and I’m in the company. Therefore, I will continue to speak exclusively in a whisper.
The Internet can be compared to television, where you make your own small program (create a website using tags) and receive income from advertising. The more popular your show (Internet project) is, the more you will earn. There is no upper limit, although there is no lower limit either. But you don’t need to invest money, just your labor and time spent studying tags, how the engine works and, in fact, filling the site with content.
So, tags are the simplest markup elements of a web page so that the browser, when loading it from the server, understands exactly how to display a particular element (text, image, video). Previously, the Html language was responsible for this whole matter alone, but then they came to his aid and it became much easier for him. Popov also has a free video course on them, which you can download from here .
Guys, when you master Html tags, you will understand that it was as easy as shelling pears. The most important thing is to start and somehow stimulate yourself. I’m not just telling you about the financial side. The site can become your main source of income and the whole family can feed from it. You need luck, perseverance and not being afraid to try new things.
Tags are different, but there are not many of them (of those that remained relevant after the introduction of CSS). Look how simple it is. Let's say you want to create a paragraph - you simply surround the text of the future paragraph with the opening and closing tags P (this is a Latin letter and in the code it is better to write it small, but here I made it capital for clarity). This is what it will look like:
Text text...... text text
Do you understand the difference between the opening Html tag (at the beginning) and the closing tag (at the end)? Well, of course, I just added a forward slash after the triangle bracket.
Oh, I forgot to say By what criteria does the browser separate tags?(markup) from the main content. Did you guess it yourself?
That's right, that's triangle brackets, in which we enclose them. The browser saw such a bracket when parsing the code of a web page and realized that it was a tag, and processes everything contained in it according to a certain algorithm (makes paragraphs spaced apart in height, increases the font of headings, etc.).
If you need to use an opening triangular bracket in your text, be sure to do it with so that the browser understands you correctly. This must be remembered.
In code they can look, for example, like this:
In fact, they contain a description and keywords the web page for which they are registered. Read more about them in the article just above.
Meta tags are written in the web page code in a strictly defined place. Do you know which one? That's right, in the so-called “head” of the document, which consists of an opening and closing HEAD tags.
Anything written inside them (including META tags) will not be displayed on the web page. This is strictly proprietary information. The above description and keywords tell search engines about the content of this web page, and the meta tag given just below.
What are music tags in audio files?
When you played music in the car or on your player (phone), you probably noticed more than once that some creepy gibberish was displayed instead of the title of the track and the name of the author-performer. One might assume that the names of the downloaded music files are written in the wrong Russian language encoding.
If you rename files using , you will still see an unpleasant picture on your player. What to do? And who is to blame for this situation? Oddly enough, but the reasons are wrong prescribed tags in this music file.
They are sewn directly into the audio file (at its beginning or end) and can contain information about the composition, its author, album, track duration and something else not so important. In the latest incarnations of music tags, even images of CD covers can be sewn into them (generally a plague).
But the problem arises, as a rule, not in their availability, but in obtaining ability to edit them. There comes a time in the life of every self-respecting music lover when he is “ready to tear and throw,” just to put things in order in his collection and add correct tags to all tracks that are readable on any device. How to do it?
Using special software. The tags themselves appeared in audio files for the first time at the end of the last century. For MP3 files, the standard for adding them was called ID3, and for music files that are compressed without loss of quality (such as FLAC and the like), the standard for adding tags (meta data) was called Vorbis comment.
For music recorded in the Windows WMA format there is WM metadata, and for Apple MP4 there is iTunes metadata (by the way, I recently wrote about that).
So, you can edit tags using special programs. The most popular of them is probably Mp3tag(official site, but be careful when downloading - don’t accidentally click on an ad that offers to download something completely different). I think that you will find all the other programs yourself, especially since this one will be quite sufficient to complete this task.
This is how diverse the tags turned out to be, which in all these cases performed their main role - markup (of articles on a site, content on a web page or meta data in music files). I hope that now you have fewer questions on this topic.
Good luck to you! See you soon on the pages of the blog site
You might be interested
Tags for Instagram - why they are needed and where to see the most popular ones 
Hashtags - what are they and how hashtags are used on Twitter, Instagram and other places How to Automatically Add an Alt Attribute to Your WordPress Blog's Img Tags (Where They Don't Have Them) 
Radikal - free photo hosting with fast and easy photo uploading via Radikal.ru 
Link - what is it and how to create it What is cache - how to clear the cache in Opera, Mozilla, Chrome and other browsers 
The Big Question - how to make money from a question and answer service 
How to create your own channel on YouTube video hosting?
A man cannot live by words alone,
no matter how much he swallowed them.
Adlai Stevenson.
In general, HTML is not a programming language. This is the HyperText Markup Language. That is, call it " HTML language" is not correct.
To put it simply, HTML is list of tags(control words) that allow you to present plain text in formatted form. For example, select it bold, or italics etc. But the text can be presented in this way only in special programs (programs with which you surf the Internet).
About them show only formatted text and hide HTML tags, which were used for formatting. To make it clearer to you what I’m talking about, right-click on this page and select “ Source" or something similar. This page will open before you in its present form.
You can create HTML code both in regular and use special programs, so called . Visual editors differ from text editors in that they are designed for typing HTML, CSS, JavaScript, PHP, etc. code, i.e., for web programming. In addition, they allow you to immediately view the fruits of your labors in the built-in browser and highlight some errors in the typed code.
I strongly recommend typing all the code by hand (to improve the directness of these same hands), but visual editors greatly facilitate this process. Personally, I use . This is far from the most latest version, but its capabilities are more than enough for me.
I do this: I type the code in Dreamweaver, then save and click the “View in Browser” button (you edit the list of browsers in this menu yourself), then return to Dreamweaver and continue editing. Here . That's it for the tools, now let's move on to the HTML tags.
Let's start with the structure of an HTML page, or rather with its main tags.
Required HTML page tags
The required (basic) HTML tags that are used in every HTML document include the following:
Note. In order for the browser to output the HTML code as text (not interpret it into code), after each opening angle bracket " "I leave a space. When you type the code, spaces DO NOT LEAVE.
As you see, all tags are paired(there is an opening tag and a closing tag), almost all tags in HTML are like this. The difference between the opening tag and the closing tag is that the closing tag is preceded by a slash " / " Such tags are also called container, because other tags can be inserted between them, i.e. place in a container. You can see for yourself that between the tags there are other tags.
You can type tag names in capital letters or in capital letters, there is no difference. That is, records of the type and for the browser have no differences and are interpreted the same way. Now let's talk in more detail about what these tags mean.
So, the main tags show browsers and other programs for viewing hypertext pages that they are dealing with a hypertext document. Any html document must start with and end with. That is, between these tags there is ENTIRE HTML page code.
Between the tags are meta tags (page title, description, keywords, etc.). They store information about the html page and technical information. In general, this tag is optional, i.e. without it, the HTML document will be displayed normally by browsers. But even if you don’t plan to use the title area, at least write it simply. This is necessary for compatibility between different versions programs.
All information located between the “HEAD” tags is not displayed in any way by the browser (except for the information between the tags, where the name of the html document is located, displayed in top panel browser). But they can have a big impact on the appearance of an html page, its life on the Internet and ranking. We will talk more about the tags that are located in the header of a hypertext document later.
The main content of an HTML document is located between the and tags. Here is everything that we see when we open an html page: text, graphics, menus, buttons, etc. This is the main “body” of the page.
All other tags used when creating an HTML document are located between (i.e., inside) these required tags. Almost all tags in HTML have various attributes, properties and parameters that allow you to display information exactly as the developer intended. For example, if you write:
Then the background of the entire page will be red.
Here tag- this is, in fact, a tag; bgcolor- its attribute; "#FF0000"- attribute value (a tag can have several attributes).
Note. All tag attributes and their values are specified in opening tag (the one that without slash), but in no case in the closing one.
And so, we figured out the main tags of an html document. Now it's time to study the rest in more detail. Here I want to make a small digression.
How I suggest learning HTML
By putting into practice the knowledge gained from, I realized what a mistake most of the authors of these books and tutorials made. All these textbooks, firstly, are intended for beginners, secondly, learning the basics of HTML goes in order.
T . That is, the title tags of the html document () are considered first, and then the “body” tags ().
Based on my own experience, I dare to say that this procedure for learning the basics of HTML is categorically unacceptable for a beginner. A beginner makes an attempt to study all these numerous and little-understood title tags, firstly, without seeing the results of his learning (let me remind you, title tags are not displayed by the browser). And secondly, without even suspecting that most of these tags will not be needed to create the site he planned (at least at the beginning of work).
Thus, he only wastes time and desire to continue learning HTML. At the same time, maintaining the opinion that only “gurus” can do it for good money. I would also give up this activity if I didn’t give a damn about what I don’t yet understand and didn’t move on.
Therefore, I suggest that you first consider the tags related to the “body” of the html document (), and only then move on to the rest. Moreover, the “body” of the html page contains the information that site visitors will come for. And creating or finding it is much more difficult than writing code.
Well, now, without hesitating for a minute, click the “Next” button and continue to find out how these unshaven and sleep-deprived guys create websites.
