Tags are HTML words. With their help, you can turn a simple stream of text into a beautifully designed document with a clear structure. A complete list of HTML tags contains about a hundred items, however, in practice much less is always used. They perform various functions - from building a visual frame of a page and formatting text to connecting third-party files and matching design with official Internet rules.
Document structure
For a web page to be adequately displayed by the browser and well perceived by robots, it must have a certain structure.
The very first document tag should be <!DOCTYPE> , declaring what type it belongs to. It is in accordance with the doctype that the browser will render the layout. The most popular type is the HTML5 standard, which is declared as follows:
<!DOCTYPE html>
The page should have a root element that wraps all its contents. This function is performed by the html tag.
All service information is placed inside the head section, and the actual content that will be visible to the user can be enclosed in the body tag.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Using the body tag is optional, however, considered good practice. This allows you to clearly define the structure of the web page, mark the beginning and end of the content part.
Each tag is a full-fledged section with content, therefore it has opening and closing parts.
Service information
Inside the head tag, data is written that is not visible to the user, but important for the web document.
The title of the page that will be displayed in the browser tab is indicated in the title tag.
<head> <title>FB.ru</title> </head>
A variety of useful service information can be presented in the form of meta tags that do not have a closing part. Meta information is described by the meta tag attributes:
name - the name of the described property;content is its value;http-equiv - an indication that this meta tag should be converted to an HTTP header;charset - the encoding in which the document was saved.
Below is a list of html tags with attributes that may be useful for transferring important data:
<meta charset="utf-8"> | Webpage Encoding |
<meta name="description" content=" ">
<meta name="keywords" content=", , ">
| Description of document content and keywords for SEO robot |
<meta name="author" content=" ">
<meta name="copyright" content=" ">
| Page Creator & Copyright |
<meta name="Publisher-Email" content="mail@mail.ru">
<meta name="Publisher-URL" content="http://www.site.ru">
| Email or author site |
<meta name="Revisit-After" content="5 days"> | A message to the search robot that in five days the page will change and it will need to be indexed again |
<meta http-equiv="expires" content="Sun, 25 Feb 2018 23:59:59 GMT+03:00 "> | Tells the browser how long the web document should be cached |
<meta name="robots" content="INDEX">
<meta name="robots" content="NOINDEX,NOFOLLOW">
| Commands for seo-robot that allow or prohibit indexing a page and tracing links to it. Possible values: - index,
- noindex,
- follow
- nofollow,
- all
- none
|
<meta http-equiv="Refresh" content="8, URL="http://www.site.ru"> | Redirect to another URL after a specified number of seconds |
File connection
For a web page to work properly, additional resources, such as styles and scripts, are often required. They can be connected from third-party files or defined in the document itself.
Styles must be specified inside the head tag to ensure that the page displays correctly. To connect the stylesheet, use the non-closing link tag with href=" " and rel="stylesheet" attributes, which tells the browser that the downloaded file is a CSS table. The definition of style rules within the page itself should be done in the style tag.
Connecting scripts in the service section can slow down loading, so they are often declared at the very bottom of the document before the closing body tag. The src attribute is used to indicate the file address. In addition, the script can be written inside the tag itself, but for the browser to see it, the address should not be specified.
Example file connection:
<html> <head> <link href="style.css" rel="stylesheet"> </head> <body> <script src="script.js"></script> </body> </html>
An example of defining scripts and styles within a page:
<html> <head> <style> h1 { color: green; } h2 { color: blue; } </style> </head> <body> <script> var header = document.getElementById('header'); header.style.border = "2px solid red"; </script> </body> </html>
Page layout
To visually break a continuous stream of unformatted text into semantic groups, to create columns and separate sections, structural HTML tags are used. They form block containers for which you can set any layout using CSS.
The most popular hypertext markup tag is, without a doubt, a div . It does not carry any semantic load and can be used to group any segments of content.
In addition, there are several semantic structural tags introduced by the HTML5 standard. They help to give their content a specific meaning, designating it, for example, as a navigation block or basement site.
List of HTML tags that have semantic meaning at the level of the whole page:
| Tag | Semantics |
header | site header, usually contains the name, contact details and the main menu |
main | main content |
footer | basement site |
nav | navigation block |
article | highlights an independent content area, such as a single article or comment |
section | logical section of the web page with a heading |
aside | sidebar for more information |
In addition, the new standard allows semantically grouping signed media using the figure and figcaption tags.
<figure> <img src="elefant.jpg" alt="" /> <figcaption> </figcaption> </figure>
Header Tags
There is a whole group of tags from <h1> to <h6> to highlight headings of different levels. The letter h is the first letter of the word header, and the index next to it is the header level.
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
In practice, the first three types are most often used.
Hyperlink Design
Hyperlinks linking different pages are the backbone of the World Wide Web, which is why special attention is paid to their design in HTML. Links should stand out from the rest of the text, by default they are blue and underline. This design is provided by the <a> tag.
A complete list of hyperlink HTML tag attributes:
- all universal attributes, such as class, id, style;
- href - address of the page to which the transition will be made;
- target - indicates exactly where to open a new page. By default, the current tab is the target; the
blank value determines the opening of a new tab. - download - instead of the transition, the specified file will be downloaded to the user's computer;
- rel - designed for search engines, with a value of
nofollow prevents the robot from clicking on the link; - type - indicates the MIME type of the target file.
Media content
The web would be very boring without pictures, video and other media content. There are several tags in the HTML standard for inserting it into a page.
The img tag with the following specific attributes is intended for image placement:
src - image address;alt - alternative text that will be displayed if an error occurs during the image loading process;width , height - sizes.
Embedded objects can be placed inside the object or embed tags, in addition, the HTML5 standard introduced special video and audio tags. They have an impressive list of attributes that control the display and playback of media content.
The iframe tag creates a separate floating frame into which another web document can be loaded.
Canvas allows you to create various images and dynamically manipulate them with high efficiency using JavaScript.
Text formatting
The list of HTML tags for formatting text content is very long.
b , strong - bold;i , em , dfn - italics;q , blockquote - selection of quotes;code , kbd - monospace font;del , s - strikethrough;ins , u - underline;mark - highlighting in yellow;sub - subscript;sup is the superscript;small - the text is smaller than the current one.
Force hyphens can be set using the <br> tag. <wbr> tells the browser possible line breaks. In addition, there is a <pre> , the formatting of which does not apply to the content, all spaces and hyphenation are preserved.
The <p> tag will help you style the text as paragraphs, and the <hr> tag will separate them with a thin gray line.
Interactive elements
Forms and various interactive elements are very important for the operation of Internet sites. They allow you to receive and transmit the necessary data, interact with the user, create dynamic content.
One of the most important form elements is the input field represented by the <input> . It can take many different forms, depending on the value of the type attribute.
Other form elements:
button - button;select - dropdown list;textarea - multi-line input field;label - label for the field.
The form tag groups interactive elements and ensures that data is sent to the server, and fieldset - combines the meaningful fields into groups.
Making Lists
HTML has three kinds of lists: bulleted, numbered, and a list of definitions.
The definition list consists of:
- container -
<dl>; - the name of the term is
<dt>; - descriptions of the term -
<dd>.
<dl> <dt> 1</dt> <dd> </dd> <dt> 2</dt> <dd> </dd> </dl>
The HTML tag of the numbered list is <ol> (ordered list), and the bullet is <ul> (unordered list). Their items are wrapped in an <li> (list item).
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Table formatting
Another important element of the web are tables that allow you to organize and conveniently present large amounts of information.
List of HTML table tags:
- table - table container;
- thead - a header usually containing headers;
- tbody - the body of the table with the main data;
- tfoot - footer in which the results are summed up;
- tr is a series of cells;
- td is an ordinary cell;
- th - header cell, has its own default layout;
- col - allows you to select a table column and apply styles to it;
- colgroup - group of columns;
- caption - a caption to the table.
This partial list of HTML tags with a description demonstrates how wide the possibilities of hypertext markup are in the design of web pages. The typesetter can present any information in a user-friendly way and at the same time provide a good perception of the page by search robots, which is very important for its promotion.