HTML tags and their meanings. The main tags of the HTML language. Tags to form lists

The HTML language is based on the concept of "tag" (eng. tag.-Labe, label). Tags consist in angular brackets (< >) and form pairs - containers (opening tag and closing). For example, the HTML document container is a pair of tags and. The Web page includes containers responsible for the document header (head) and contain additional information, as well as containers responsible for the content of the document (body). They are presented in the figure.

So HTML document lies in the container , title in container , and the content of the document in the container . Container located in the title (container ) Contains the text displayed in top string Browser window. The title container can also add tags containing encoding, keywords Web page, as well as code for connecting cascading files styles CSS., JaVascript programming language, VBScript, etc.

An example of the simplest HTML page containing only the main tags:

Contents of the simplest page

The result of the specified code is shown in the figure.

As you can see from the example, the text "Content of the simplest page" is displayed in conventional text. In order to format this text, special tags must be used. An example of using formatting tags is shown in the figure.

To change the font, its colors and size is used by TEG With the parameters "Face", "Color" and "Size". For example, in order to set the "Arial" font of red and 14 size, you must write the following code:

Formatomatest

To highlight paragraph in the text, a tag is used

In a container of which each paragraph of text is placed. Tags are used to create a header

,

,

,

,

,

.

Containers are used to generate lists in the document of the document. And tag.

forms a valve list, tag
- labeled list, and in tags
• Place the elements of the list. An example of the display code of the lists, presented in the form of a numbered and marked lists is shown in the figure.

  

  To communicate two or more web pages, hyperlinks are used to create a tag to create . Moreover, in the tags of the hyperlinks, additional attributes are used, allowing you to either go to another web page, or move inside this page. The second way is desirable to use in a large document having several sense sections.

  An example of using hyperlinks is presented in the figure.

  

  When you specify the URL address of another page, you must specify either a complete absolute path to the "Full Way / Folder" page or relative (relative to this page) "Folder / Page". The "target" parameter allows you to open a Web page in a new or existing browser window.

  To insert images on the Web page uses tag With the SRC parameters (path path), Width (image width), Height (image height), Border (frame around the drawing). An example of an image insertion code:

  

  Often, when creating Web pages it is necessary to task the background color or background image. For this, tag attributes are used "BGColor" or "Background-image". An example of insertion background color:

  An example of insertion of the background image:

  These attributes can be used not only for tag But also for tags, areas and others that will be considered in the following topics.

  Everyone who reads this lesson is probably knowing what HTML is. But the basic overview helps increase knowledge and hone skill, especially in the conditions of constantly developing web technologies.

  Now there are many talks about the changes that HTML brought 5. Each tag that mentioned in this article is supported in HTML 4.01 and in HTML 5. Although some of these tags are widely used, it will be very useful to revise the methods involved.

  1.

  Each programming book contains mention that it is very useful to explain what makes your code. Why is commenting is good practice? It greatly helps to someone who reads your code, understand the essence of what is happening.

  For HTML, commenting may seem to be a paragraph that increases the weight of the page. However, comments may be useful for determining sections and to save the structure and organization of the page code. The mark of the beginning and the end of various sections can really help when working on a project.

  • Menu item 1.
  • Menu item 2.

  This is the main content.

  ...

  2. Table styles: , , I.

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

  Item.	Qty
  SUM.	7
  #1	3
  #2	4

  Turn the rows of the table in . Thus, the title of the table is formed.

  Wrapped lines B. We form the final lines at the bottom of the table. Strings must be determined to strings Thus, the final strings are displayed to the other rows of the table.

  Mounting with data turn in .

  Paragraph	Number of
  Sum	7
  #1	3
  #2	4

  3.

  The drop-down list is a great way to submit data to select a user. They not only take up little space, but also familiar to users and easy to use. Wonderful property Is the ability to create categories (or subtitles) for list items.

  Detroit Tigers Chicago Cubs Detroit Lions Chicago Bears

  Detroit Tigers. Chicago Cubs. Detroit Lions Chicago Bears.

  4. Headers -

  ,

  ,

  ,

  ,

  , I.

  Of course, everyone uses headlines. But if you are honest, then when you last used

  Or the headline even lower? Headlines allow you to build less semantic structures, such as additional styles for text in

  .

  No need to create an additional work. Remember about header tags.

  5.

  and

  We all like sites on which it is easy to find the necessary information among logically grouped elements.

  Groups together form elements, drawing a rectangular frame around them. It is also possible to add a name to such a section using

  .

  General Information:

  Name: Email: Date of Birth:

  6.

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

  Used to define the input element label. The label itself perceives the mouse button pressing, making the appropriate input field active. This property of labels is valid for text fields and radio buttons.

  Name: Man: Female:

  7.

  If you need to give the dramatic effect to some expression, you can use

  . By default, an empty string will be inserted before and after the element. Also added indentation to the separation contained in the text element from the rest of the content.

  An example of using tag

  An example of using tag

  8.

  It is impossible to say that refers to

  But usually they are used together.

  Remember about Teg When you need to quote someone.

  An example of using tag

  Together with the tag . This offer is concluded in the tag .

  An example of using the Blockquote tag in conjunction with the Cite tag. This offer is concluded in the tag .

  9.

  The use of lists gives excellent opportunities for organizing information. Everyone knows O.

  but how often do you use
  and

  ? Probably the name "List of Definitions" can confuse a novice developer and make it think that this list can only be used to insert definitions and conditions. However, this provision is not true.

  Types of lists

  1. Unordered List (UL)
  2. Ordered List (OL)
  3. List of Definitions (DL)

  What are they doing

  • Unordered List (UL): List with pointers points
  • Ordered List (OL): Numbered list
  • List of Definitions (DL): List with definitions of elements

  Causes of the use of lists

  • Content Style Content
  • Just create
  • Universal

  The way to display information by each type of list differs from the other. Surely you do not need to stop on

  and
  But the structure of the definition list requires additional clarification.

  List point # 1

  Definition for list item # 1

  List point # 2

  Definition for list view # 2

  Instead of determining the list item (

  1. ), we use two tags:
     and
     .
     defines each list of list, and
     Describes above the standing point. The following is a list in accordance with the previously shown definition list code.

     List Item # 1 Definition for List Point # 1 List Item # 2 Definition For List Point # 2

     10. "(And other ASCII characters)

     For using HTML You need to use ASCII codes when you need to insert some character. This rule requires additional actions, but it ensures that all characters will be properly displayed on the user screen, and the browser will not perceive them as part of the markup. Have you ever come across any text that is displayed wrong? Usually the problem text is created using quotes, apostrophes, more and less signs and so on. There are not many such characters, and it is worth remembering their ASCII codes.

     Today we will look at HTML tags to create a website. It is not everything in a row, but those that are most commonly used when creating websites and layout. Because there is just a mass of tags that are needed 1 time per year, and there are those that you will use constantly. Well, let's go. At the end, we will have a simple web page with all the main elements.

     HTML document tags

     These are global tags that need us in any case. On the web page, they are not displayed in any way, but allow you to place the structure. For example, HTML tag. Today it is very often not even written, this is really no need. In general, it is a common container for the entire HTML document. Invested everything else.

     Next go 2 sections - head and Body.. In the first place various kinds of web page settings are connected. external files etc. For example, the site encoding is specified here, the meta tags, TITLE, are prescribed, CSS-styles and web scenarios are prescribed. In general, for the performance of the site, the Head section has a crucial role.

     Well, Body is the body of the page. Here we already write what is directly displayed. Next, we will directly consider the tags that are used in the body of the page.

     Text formatting

     Usually, formatting is always said primarily when it comes to HTML. Indeed, what could be more important than the text on the page and its competent clearance?

     For example, create three paragraphs. One will be simple, in the second text will be highlighted in fat, and in the third - they will emphasize.

     Some text in the paragraph, mimic filling

     Some text in the paragraph, mimic filling

     That's about this spirit, we make text using the tags referred to in that article.

     HTML tags for pictures (images)

     For pictures there are only 1 main tag - img. And he, in turn, only 1 mandatory parameter - SRC, that is, the path to the file. Everything else can be configured through CSS. Actually, in detail about inserting the picture, I also wrote, well, and here is the example of the simplest insertion:

     

     The tag, as you can see, single, that is, the closing part is not needed. The path is set based on the location of the HTML page. My picture lay in the same folder as the web page, which means the path turned out to be as short as possible.

     

     You can change the size of the downloads using attributes width and heightBut optimally still do it through CSS. But besides the IMG tag in HTML5, there were still tags, which one way or another helps to issue a picture. This is Figure and FigCaption. That is, the figure and signature to it. In general, the scope of these tags is more wide, but we will look at an example with a picture:

     

     Well, a couple of CSS rows:

     Figure (Width: 300px;) FigCaption (Text-Align: Center; Color: Gray;)

     These tags simply simplified the process of adding signatures to pictures:

     

     Tags for links

     Anchor

     That is, there is also 1 mandatory attribute - href. Without him, the browser simply will not understand where to go. The address must be specified with the http: // protocol. Well, between the opening and closing tag, we specify the Anchor himself directly, that is, the text that we will see on the page.

     

     Lists on web pages

     With lists, everything is also quite simple. There are 2 types of lists - marked and numbered. Differences are only in appearance Numberman. That is, the numbers are, or simply markers.

     The numbered list is created by the OL tag, and the items themselves are li tags. In this tag, you can invest how other tags and any content.

     1. Remove on the table
     2. Cook food
     3. Go to football

     By default, the list is already displayed with defined deposits.

     

     The labeled list, respectively, is created using the UL tag, and inside it all the same Li.

     

     Tables

     Details about tags for the table I wrote here. If you say briefly, it is:

     1. table - Container for table;
     2. tR - a number of tables, also performs the role of a container;
     3. tD is one cell, it is here that the content is placed;

     Create a simple table:

     Cell 1.	Cell 2.
     Cell 1.	Cell 2.

     Well, through CSS, I set it a little:

     Table (Border Collapse: collapse;) TD (Border: 1px Solid Red; padding: 15px;)

     

     If you are not clear what CSS is, I invite you to read at the same time, everything will immediately become clear.

     Forms

     Forms are also very important when creating sites, as they apply completely and nearby. I still have no explanatory article on the form of a blog yet, it means to write. In the meantime, let's create a simple form:

     Login:
     Password:
     I agree with the rules
     

     

     The main elements of the form:

     1. form - directly the container of the form in which all fields are placed. To work correctly correctly, it needs to prescribe Action and Method attributes, but this is already working with PHP.
     2. input - Form field, which it will be, depends on the value in the Type attribute. For example, Text is a field for entering a conventional text, Password - a password input field, checkbox - check mark, submit - button send button. Of course, this is not all values, but I will write about the other in more detail in a separate article about the form (soon it will be).
     3. Well, auxiliary elements. In our case, these are text and lines.

     The possibilities of forms, especially with the arrival of HTML5, became very high. You can do in them an unlimited number of fields, marvel them as mandatory, set patterns, etc. Again, I will write about all this separately.

     Block and lowercase elements

     In general, all elements in HTML rude can be divided into two categories: block and lowercase. The line includes, for example, tags: b. (Fat selection), img (picture), a (link), etc. That is, they can be used several times on one line.

     The block is completely different. The block can only be one in its row. Examples of blocks: paragraphs, tables, lists. That is, on one line can not be 2 paragraphs, right?

     In HTML there are tags that simply denote a block and lowercase element without giving it any more properties. This is Span and Div. The first line, and the second block. Used in layout. So you understand the difference, here is an example:

     Text

     Text

     Text

     Text text text

     

     Here is probably all the main HTML tags to create a site that are really applied to completely and beside and who really need to know.

     The main HTML tags are the base on which almost any site / blog is built. From this article you will learn exactly the 20% of the tags that you always need.

     As in any language, yes, and in here there is a passage rule 20/80 (20% of cases has 80% of importance to achieve the desired result), which means it means enough to know only 20% of the codes in order to confidently achieve its goals in the site building.

     HTML is not a programming language, because it is a language of hypertext layout of the text, which speaks for itself, it allows you to place blocks on pages for the right mapping, make text marking for webons. Also with it, references are made from one site page to another. All links on the Internet are created using the hypertext part of the HTML code.

     - This is very pretty Language! If you decide to study it, it is important to understand from the very beginning that there is no difficulty in this. With confidence, it can be said that at school children, in the lesson of informatics much more difficult to have.

     So proceed. Writing codes are better in notepad, which is included in standard programs operating system Windows or B. free program "NotePad + +".

     First, we will define what the tag is. The tag is the cell of the HTML itself, from which it is generally built. On tags, browsers understand how to display the text where to insert pictures. Tags - this is the marking elements themselves.

     HTML Tags to create a framework of the site

     Tags are pair and not pair. Pairies open and closed, that is, in the closing there is a reverse slash "/".

     The first thing that should be in any hTML Document When creating a blog page, this is:

     • - report to the browser that everything that is between them is, it is HTML code;
     • - From English. "Head" contains the name, encoding, meta tags for search engines;
     • - meta tag, mainly for search engines, inside contains the name of the document, is displayed at the top of the browser;
     • - single tag indicating the browser language encoding, where Windows-1251 - suggests that the text of this page in Russian (Windows-1252 is for English);
     • - for keywords of the site;
     • - a summary of the page;
     • Body of the document - From English. "Body", contains the entire page of the site.

     These were standard HTML Code TagsWith which all the site pages / blog must be started without any changes in this form:

     
     
     
     
     
     
     
     
     

     List of HTML tags located in pages

     Between tags There will be a site page itself where:

     • title

       - the most important Level 1;
     • from

       subtitle

       by

       subtitle

       - respectively subtitles 2, 3, 4, 5 and 6 levels;
     • anchor link - link, where "target \u003d" _ blank "" - an attribute responsible for the opening in a new window, "title \u003d" "The name of what will be reference;
     • And - tags for highlighting fat. "" Are outdated and recommended to use " »;
     • - for allocation in italics;
     • - the same tag that is responsible for inserting the image on the page;
     • - "P" from the English. "Paragraph", which means divides text to paragraphs. Default aligns to the left edge;
     • 
       - logic tag meaning the end of the string and the transition to the following;
     • - attribute leveling text in the center;
     • - attribute leveling text on the right edge;
     • —
     • color \u003d "Green" is responsible for the color of the text. In this case, it is green. Instead of the word "Green", the code is usually set from a hex color system, for example: "# 088F47";
     • face \u003d "VERDANA" - attribute indicating font in the text;
     • size \u003d "3" - font size;
     • 1. first
       2. second
       3. third
       - numbered list;
     • • word
       • word
       • word
       - a marked list;

     HTML Tags to create a table

     The tags within the table itself can be a lot, these are changes in the color of the table of the table, leveling words inside the table, etc., but since the article on the main tags, then we will dwell only on tags to create the table itself.

     • - Tag responsible for creating a table, where "1" is the width of the border of the table, where "450" \u200b\u200bthe width of the table, and "Center" you already know;
     • - tag located inside "And creates a string in the table;
     • - Creates a column in a string, is located inside the tags " " "150", as you probably guessed - the width of the column;

     Fully hTML Tags Table They look like this:

     
     
     
     
     
     
     
     
     
     
     
     

     cell №1	cell No. 2.	cell number 3.
     cell number 4.	cell number 5.	cell number 6.

     Once again, we emphasize that these are the main tags of the HTML code and you can make a lot of changes to it. And it is also worth noting that by itself HTML code is a template, without CSS, in general, something worthwhile to make it will be impossible. Only all together, HTML and CSS are creating miracles, but something is simple, it is quite possible to perform without deep knowledge CSS, purely on HTML.

     Video lesson on the topic - "What is HTML? File index html ":
     

     Share please, if you like it:
     
     Perhaps you will be interested else to know:

     
     

     We looked at an example of creating a simple page, where there were comments by some HTML tags, since it seems to me that it is better to first show something on the example, and then proceed 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 the descriptions of common HTML tags that are used almost on 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 (admits the attributes of Style, Class, ID). The most common tag, because the text most often is placed (however, it is 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 still attribute the STYLE parameter to the tag:

     Using 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 CSS Font property.

     You can also register the Class and ID attributes. For example:

     2. HTML Tag and (Selection of fat)

     AND - Two tags that allow you to make a font bold. There is no difference between these tags.

     Let us give an example. HTML code:

     thumbnail

     Converted to the page Next:

     thumbnail

     You can also register the Class and ID attributes (as in the case of a note

     These tags have a slight impact on the ranking of documents in search engines, so it is better not to use them.

     3. HTML tag (Cursive Creation)

     - Round font (allows you to parameter Style, Class, ID)

     For example, HTML code:

     round text

     Converted to the page Next:

     4. HTML Tag (underlined text)

     - underlined font (admits the STYLE, CLASS, ID parameter)

     For example, HTML code:

     underlined text

     Converted to the page Next:

     underlined text

     5. HTML Tag (Creating a hyperlink)

     Creates a link on the page (allows the STYLE, CLASS parameter and others).

     For example, HTML code:

     link text

     Converted to the page Next:

     All parameters and tag attributes Will be discussed in a separate lesson: hTML tag.

     6. HTML Tag

     (titles in content)

     ,...,

     - header tags inside the content (allows the STYLE, CLASS, ID parameter). And the smaller the number, the greater weight and size (by default) has the text enclosed in these tags.

     For example, HTML code:

     H1 title

     Tag

     Use for the title of the page (as well as Tistle)

     It is necessary to use these tags only by appointment, i.e. Only when the article requires a header. This is due to the fact that tags

     ,...,

     Have a big impact on search engines. If used correctly, the chances of getting to the top lines of extradition are very high.

     7. HTML Tag (alignment)

     - Levels content in the center.

     For example, HTML code:

     This text will be in the center

     Converted to the page Next:

     This text will be in the center

     Note

     • - For text
     • ...
       - For all (for example, image)

     8. HTML Tag _{(substitution text)}

     - Displays a substitution font.

     For example, HTML code:

     Ordinary text _{substiturate text}

     Converted to the page Next:

     Normal text, substitting text

     9. HTML Tag ^{(Support text)}

     - Displays a font.

     For example, HTML code:

     Ordinary text ^{padded text}

     Converted to the page Next:

     Normal Text, Padded Text

     10. HTML Tag ,

     , - Displays a font to one pixel more / less than the flow size (allows the STYLE, CLASS, ID parameter).

     For example, HTML code:

     Ordinary font this font is more than one pixel

     Converted to the page Next:

     Normal font, this font is more than one pixel

     11. HTML Tag

     (Lists)

     Displays a list (allows the STYLE, CLASS, ID parameter). Each new item is written between

     and

     .

     For example, HTML code:

     List:

     • first element of the list
     • the second element of the list

     Converted to the page Next:

     List:

     • first element of the list
     • the second element of the list

     12. HTML Tag (Creating Tables)

     - Creates a table (allows the STYLE, CLASS parameter). Each new line is created by tags , and column .

     For example, HTML code:

     1-line 1 element	1st line 2 element
     2-line 1 element	2-line 2 element

     Converted to the page Next:

     All the features of the tag

     13. HTML Tag
     (line break)

     
     - The transition to the next line is a single tag.

     For example, HTML code:

     Row 1.
     2-line
     3-string And this text will be on the 3rd line, because there was no transition

     Converted to the page Next:

     1st line
     2-line
     3rd and this text will be on the 3rd line, since there was no transition

     14. HTML Tag

     ---

     (horizontal line)

     ---

     - draws the 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 under the line

     Converted to the page Next:

     Some text above the line and this text will be under the line

     15. HTML Tag (Conclusion Pictures)

     For example, HTML code:

     http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_m.jpg">

     Converted to the page Next:

     

     All the features of the tag Will be discussed in a separate lesson :.

     16. HTML Tag (text formatting)

     - for formatting text, styled change, etc. (Permits the STYLE, CLASS, ID parameter). His weight in the eyes of search engines is not enough, so you can use it how much you want.

     For example, HTML code:

     This text is green, and its size is 15 pixels

     Converted to the page Next:

     Note

     The same tag is.

     17. HTML Tag

     (Creating a form)

     - Creating a form on the page (allows the STYLE, CLASS parameter).

     For example, entering a login and password, any buttons, any form of registration - all this forms.

     18. HTML Tag

     (block creation)

     - Used to create blocks on the page (allows you to parameter STYLE, CLASS). Previously, for marking on the pages, we used mainly tables. After the appearance of the tag

     The task has been simplified. Almost all sites contain

     Blocks, as a convenient alternative to the tables.

     Last

     • Solaris (Operating System) Programming on the Solaris operating system
     • Comparison of Windows operating systems, Mac OS, Linux
     • Keeloq and Dual Dynamic Code VS Codograbber Dynamic Alarm Code
     • Bonus program "Discount for experience federal special 650 from megaphone
     • Which offers the tariff "Federal Special" from MegaFon Federal Special FV
     • Description Viasat Premium, price how to connect
     • Installing alarm on BMW
     • Useful MTS commands for SMS, Internet, tariffs and other services
     • What do cellular operators logos mean?
     • Caution: Telephone scammers!

     It is necessary to know

     • MTS updated their "egg" download MTS emblem
     • MTC Brand Style History: Creating a new logo download MTS emblem
     • "The number of limitless love of infinite love MegaFon
     • MTS services: Paid and free MTS Options Self-service
     • Review of the functions and auto alarm features StarLine E60 Slave Alarm Starline E60 Operating Instructions
     • Transport Monitoring Services Satellite Auto Login
     • Reference service Beeline
     • How to find out the arrears of MGTS without registration
     • MegaFon service "Waiting for a call
     • Service Conference Communication from MTS

     TPL_TPL_FIELD_SCROLL