Menu
homeWindows 7

What tags are used to declare a table? What are HTML tags and what types of tags exist

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 Html tags are and how they differ from meta tags, and you will also learn how tags are used as tags on sites (their variety is), and finally, we will take a general look at music tags in audio files. That's how multifaceted this term becomes.

But in all cases, the word “tags” means marking up 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 make it easier to navigate this site ().

So-called keywords are used as tags, a set of which briefly characterizes the publication (for example, for the main page of my blog the following set of tags would be suitable: 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 a 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 tagging method not used on all websites if it is convenient for users? 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. A total of 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 a great and simple thing that 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 can be downloaded 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.

There are different tags, but there are not many of them (of those that remained relevant after the implementation 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, these are triangular 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 the description and keywords of 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 the 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 a given web page, and the meta tag 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, the reason is incorrect 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 (a real plague).

But the problem arises, as a rule, not in their availability, but in gaining the 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 website, 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 can watch more videos by going to ");">

You might be interested

Tags for Instagram - why they are needed and where to see the most popular ones
Hashtags - what they are 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 exist)
Link - what is it and how to create it
Radikal - free photo hosting with fast and easy photo uploading via Radikal.ru

Everyone who reads this lesson probably knows what HTML is. But reviewing the basics helps increase your knowledge and sharpen your skills, especially with ever-evolving web technologies.

There is a lot of talk these days about the changes that HTML 5 brings. Every tag mentioned in this article is supported in both HTML 4.01 and HTML 5. While some of these tags are widely used, it will be very helpful to review the techniques involved.

1.

Every book about programming mentions that it is very useful to explain what your code does. Why is commenting a good practice? This really helps the person reading your code to understand what's going on.

For HTML, commenting can seem like a point that adds weight to the page. However, comments can be useful for defining sections and for maintaining the structure and organization of page code. Marking the start and end of different sections can really help when working on a project.

  • Menu item 1
  • Menu item 2

This is the main content.

...

2. Table styles: , , and

To make a good table design, you need to use the tags mentioned in the subheading. They all affect table rows and you can easily set styles for them.

Item Qty
Sum 7
#1 3
#2 4

Wrap table rows in . This is how the table title is formed.

Wrapping the strings in We form the total rows at the bottom of the table. Strings must be defined before the lines , so the total rows are displayed before the rest of the table rows.

We wrap data lines in .

Paragraph Qty
Sum 7
#1 3
#2 4

3.

A dropdown list is a great way to present data for the user to select. Not only do they take up little space, but they are also familiar to users and easy to use. A wonderful property is the ability to create categories (or subheadings) for list items.

Detroit Tigers Chicago Cubs Detroit Lions Chicago Bears

Detroit Tigers Chicago Cubs Detroit Lions Chicago Bears

4. Headings - ,,,,, and

Of course, everyone uses headings. But to be honest, when was the last time you used or an even lower level heading? Headings allow you to build fewer semantic structures, such as additional styles for text in .

There is no need to create additional work for yourself. Remember title tags.

5. and

Everyone loves sites where it's easy to find the information you need among logically grouped items. Groups form elements together by drawing a rectangular frame around them. It is also possible to add a title to such a section using .

General Information: Name: Email: Date of birth:

6.

Tag does not affect the style in any way. It affects the functionality of the page.

used to define the label of the input element. The label itself perceives mouse clicks, making the corresponding input field active. This label property works for text fields and radio buttons.

Name: Man: Woman:

7.

If you need to give a dramatic effect to some expression, you can use . By default, an empty line will be inserted before and after the element. Indentation will also be added to separate the text contained in the element from the rest of the content.

Example of using a tag

Example of using a tag

8.

It can't be said that refers to , but they are usually used together.

Remember the tag , when you need to quote someone.

An example of using a tag together with a tag. This offer is included in the tag.

An example of using the blockquote tag together with the cite tag. This offer is included in the tag.

9.

Using lists provides great opportunities for organizing information. Everyone knows about

    , but how often do you use And ? Perhaps the name "definition list" can confuse a novice developer and make him think that such a list can only be used to insert definitions and conditions. However, this situation does not correspond to reality.

    Types of lists
  • Unordered list (ul)
  • Ordered list (ol)
  • List of definitions (dl)
    • What are they doing
    • Unordered list (ul): list with dotted indicators
    • Ordered list (ol): a numbered list
    • Definition List (dl): List with element definitions
    Reasons to use lists
    • Consistent content style
    • Just create
    • Versatile

    The way each list type displays information is different from the other. Surely there is no need to stop at

      And , but the structure of the list of definitions requires further clarification.

      List Item #1 Definition for List Item #1 List Item #2 Definition for List Item #2

      Instead of defining a list element (

    • ), we use two tags: And . defines each item on the list, and describes the above point. Below is the list according to the definition list code shown earlier.

      List Item #1 Definition for List Item #1 List Item #2 Definition for List Item #2

      10. "(and other ASCII characters)

      When using HTML, you need to use ASCII codes when you need to insert a character. This rule requires additional steps, but it ensures that all characters are correctly displayed on the user's screen and that the browser does not perceive them as part of the markup. Have you ever come across some text that doesn't display correctly? Typically, problematic text is created using quotation marks, apostrophes, greater-than-less signs, and so on. There are actually not many such characters, and it is worth remembering their ASCII codes.

      HTML tags are the basis of the HTML language. Tags are used to delimit the beginning and end of elements in markup.

      Each HTML document consists of a tree of HTML elements and text. Each HTML element is identified by a start (opening) and an end (closing) tag. The opening and closing tags contain the name of the tag.

      All HTML elements are divided into five types:

      • empty elements - , ,
        , , , , , ,
        Used to store additional information about the page. This information is used by browsers to process the page, and by search engines to index it. There can be several tags in a block, since depending on the attributes used they carry different information. Indicator of measurement in a given range. A section of a document containing navigation links for the site. Defines a section that does not support scripting. Container for embedding multimedia (e.g. audio, video, Java applets, ActiveX, PDF and Flash). You can also insert another web page into the current HTML document. The tag is used to pass the parameters of the plugin. Ordered numbered list. Numbering can be numeric or alphabetical. A container with a title for a group of elements. Specifies an option/option to select from the , or , drop-down list. Field for displaying the result of a calculation calculated using the script.

        Paragraphs in the text. Defines parameters for plugins built using the element. A container element containing one element and zero or more elements. By itself it does not display anything. Allows the browser to select the most appropriate image. Outputs text without formatting, preserving spaces and text breaks. Can be used to display computer code, email messages, etc. An indicator of the completion of a task of any kind. Defines a short quotation. Container for East Asian symbols and their decoding. Defines its nested text as the base component of the annotation. Adds a brief description above or below the characters contained in the element, displayed in a smaller font. Marks embedded text as additional annotation. Displays alternative text if the browser does not support the element. Displays text that is not current with a strikethrough. Used to display text representing the result of program code or script execution, as well as system messages. Displayed in monospace font. Used to define a client-side script (usually JavaScript). Contains either script text or points to an external script file using the src attribute. Defines a logical area (section) of a page, usually with a header. A control element that allows you to select values ​​from a proposed set. Variant values ​​are placed in . Displays text in a smaller font size. Specifies the location and type of alternative media resources for the , , . Container for inline elements. Can be used to format passages of text, such as highlighting individual words with color. Places emphasis in the text, highlighting it in bold. Includes embedded style sheets. Specifies subscript writing of symbols, for example, element index in chemical formulas. Creates a visible title for the tag. Displayed with a filled triangle, clicking on it allows you to view the title details. Specifies the superscript spelling of characters.

        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). The symbols can only be in English (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, without attributes, actually does nothing meaningful.

        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 the source code of the 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 forbidden 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 cascading style sheets (CSS) are used to design both the text and the appearance of the entire website and HTML document. 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 is used only on websites, because CSS is not applicable when sending news by mail 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 - a brief description of the 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 - indicates whether the attribute is required in a particular 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 is, in fact, a 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 on a website, and not on a page, then it is better to create a local server - Denver (which I want to write about).

        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 this text editor uses code highlighting, which is very convenient when editing code and you can save files 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”

        A tag is a special reserved word enclosed in angle brackets (for example, ). A tag is the main component of HTML: the code begins with it, it ends with it, and 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 the types of 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 that is 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 tags. They, unlike paired tags, do not need to be closed, because they do not work with the content, but perform some function on their own. Example of a single tag -
        . It sets the text to wrap to the next line.

        If we draw parallels with the Russian language, we can say that paired tags are quotes or brackets that affect the properties of the text contained in them (try not to close the quotes in time), and single tags (marks) are punctuation marks (exclamation, question or dot).

        Any tag consists of:

        • Open angle bracket (< ).
        • A special word (tag name). For example, hr , iframe , b .
        • Closing angle bracket (> ).
        Basic HTML Tags

        Since tags are the basis of markup language, it is not surprising that there are quite a lot of them. Let's look at the main, most important tags.

        Tag for creating a table.
        Defines the body of the table.
        Creates a table cell.
        Used to declare HTML code fragments that can be cloned and inserted into a document by a script. The content of a tag is not a child element.
        Creates large text input fields.
        Defines the table footer.
        Creates a table cell title.
        Defines the table title.
        Defines date/time.
        The title of an HTML document that appears at the top of the browser's title bar. May also appear in search results, so this should be taken into account when providing a title.
        Creates a table row.
        Adds subtitles for elements and .
        Highlights a passage of text by underlining, without additional emphasis.
        		Creates a bulleted list.
        Highlights variables from programs by displaying them in italics.
        Adds video files to the page. Supports 3 video formats: MP4, WebM, Ogg.
        Indicates to the browser where a long line might break.
        , , , are used when creating tables and are discussed in detail in a separate article.
      • - a tag that adds interactivity to a page, that is, allowing 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 active actions from you 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 a container. But why do we need separate ones if there is a universal one? allows you to create a button with advanced parameters. For example, you can place a picture on a button. This cannot be done on an element created through .
      • 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. Quite an 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 just one line of text, but entire paragraphs.
        •
        , And