Tags are HTML words. With their help, you can turn a simple flow of text into a beautifully designed document with a clear structure. The full list of HTML tags contains about a hundred items, however, in practice, much less is constantly used. They perform different functions - from building a visual frame of the page and formatting text to connecting third-party files and complying with official Internet rules.
Document structure
In order for a web page to be adequately displayed by a browser and well perceived by robots, it must have a certain structure.
The very first document tag should be, declaring what type it is. 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:
The page must have a root element that wraps all of its content. This function is performed by the tag
html.
Opening and closing HTML tags
All service information is placed inside the section
head
, and the actual content,which will be visible to the user can be enclosed in the tag
body.
Using the
body tag is optional, but considered good practice. This allows you to clearly define the structure of the web page, indicate the beginning and end of the content part.
Each tag is a complete section with content, so it has an opening and closing part.
Service information
The
head tag contains data that is not visible to the user, but is important for the web document.
The title of the page that will be displayed in the browser tab is indicated in the tag
title.
FB.ru
Web page title
Various useful service information can be presented in the form of meta tags that do not have a closing part. Meta information is described by tag attributes
meta:
name - the name of the described property;
content - its value;
http-equiv - an indication that this meta tag should be converted into an HTTP header;
charset - encoding in which the document was saved.
The following is a list of html tags with attributes that can be useful for passing important data:
Web page encoding
Description of the content of the document and keywords for the SEO robot
Page creator and copyright
Email or author's website
Message to the search robot that in five days the page will change and it will need to be indexed again
Tells the browser how long to cache a web document
Commands for the seo robot that allow or prohibit indexing a page and tracking links on it. Possible values:
index,
noindex,
follow,
nofollow,
all,
none
Redirect to another URL after the specified number of seconds
File connection
A web page often requires additional resources, such as styles and scripts, to function properly. They can be included from third-party files or defined in the document itself.
Styles must be specified inside the
head
tag to ensure the page displays correctly. To connect the stylesheet, a non-closing link tag is used with the attributes
href="file address"
and
rel="stylesheet"
, which indicates to the browser that the downloaded file is a CSS table. The definition of style rules within the page itself should be done in the tag
style.
Including scripts in the service section can slow down loading, so they are often declared at the very bottom of the document before the closing tag
body
. The
src attribute is used to specify the file address. Besides,the script can be written inside the tag itself, but the address does not need to be specified for the browser to see it.
Example of connecting files:
Example of defining scripts and styles inside the page:
To visually break up a continuous flow of unformatted text into semantic groups, create columns and separate sections, structural HTML tags are used. They form block containers that can be styled with CSS.
The most popular hypertext markup tag is without a doubt
div. It does not carry any semantic load and can be used to group any content segments.
Semantic HTML5 Structural Tags
In addition, there are several semantic structural tags introduced by the HTML5 standard. They help to give their content a certain semantic meaning, designating it, for example, as a navigation block or site footer.
List of HTML tags that have semantic meaning at the whole page level:
Tag
Semantics
header
site header, usually contains the name, contact details and the main menu
main
main content
footer
site footer
nav
navigation block
article
highlights an independent area of content, such as a single article or comment
section
logical section of a web page with title
aside
sidebar with additional information
In addition, the new standard allows captioned media content to be semantically grouped using figure and figcaption tags.
Headings at different levels
Hyperlink design
Hyperlinks linking different pages are the basis of the World Wide Web, so their design in HTML is given special attention. Links should stand out from the rest of the text, by default they are blue and underlined. This design is provided by the tag.
Full list of HTML hyperlink tag attributes:
all generic attributes like 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 target is the current tab, the value
blankdetermines the opening of a new tab.
download - instead of switching, the specified file will be downloaded to the user's computer;
rel - designed for search engines, with the value
nofollow prohibits the robot from following the link;
type - indicates the MIME type of the target file.
Media content
The web would be veryboring without pictures, videos and other media content. The HTML standard has several tags for inserting it into a page.
The
img tag with the following specific attributes is intended for placing images:
src - image address;
alt - alternative text that will be displayed if an error occurs while loading the image;
width
,
height - dimensions.
Embedded objects can be placed inside the
object
or
embed
tags, in addition, the HTML5 standard introduced special tags
video
and
audio. 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 manipulate them dynamically with high efficiency using JavaScript.
Text formatting
The list of HTML tags for formatting text content is very long.
b
,
strong - bold style;
i
,
em
,
dfn - italic;
q
,
blockquote - highlight quotes;
code
,
kbd - monospace font;
del
,
s - strikethrough;
ins
,
u - underline;
mark - highlight in yellow;
sub - subscriptindex;
sup - superscript;
small - text smaller than current size.
Forced hyphenation can be placed using the tag
. prompts the browser for possible line breaks. In addition, there is a tag
with no formatting applied, all spaces and hyphens are preserved.
Thetag will help you format the text in the form of paragraphs
, and to separate them with a thin gray line -.
Interactive elements
Very important for the operation of Internet sites forms and various interactive elements. 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 tag. It can take many different forms depending on the value of the attribute
type.
Other form elements:
button - button;
select - dropdown list;
textarea - multiline input field;
label - label for the field.
The
form
tag groups interactive elements and sends data to the server, and
fieldset - combines meaningfully related fields into groups.
List design
There are three kinds of lists in HTML: bulleted, numbered, and definition lists.
Types of lists in HTML
The list of definitions consists of:
container -
;
term names -
;
term descriptions -
.
Term 1
First term description
Term 2
Description of the second term
HTML numbered list tag -
(ordered list), marked -
(unordered list). Their items are wrapped in the tag
(list item).
each
hunter
wish
know
where
sitting
pheasant
Format tables
Another important element of the web are tables that allow you to organize and conveniently present large amounts of information.
List HTML table tags:
table - table container;
thead - header, usually containing headings;
tbody - table body with basic data;
tfoot - footer summarizing;
tr - row of cells;
td - ordinary cell;
th - header cell, has its own default style;
col - allows you to select a table column and apply styles to it;
colgroup - group of columns;
caption - caption for the table.
HTML document structure
This partial list of HTML descriptive tags demonstrates the power of hypertext markup in web page design. The layout designer can present any information in a user-friendly form and at the same time provide goodthe perception of the page by search robots, which is very important for its promotion.
E-mail is an integral part of any modern project or business. Nowadays, speed and responsiveness are of great value, especially when it comes to customer feedback. This is a decisive factor that users consider when making purchases
Shareware has battled the stigma of misunderstanding for decades. While enterprise software giants can no longer ignore the marketing potential of a trial, small startups still struggle with new software challenges and costs
Variable var is a name that the user assigns to computer memory cells and uses to store values in a computer program. It defines the type of information stored, describes the format of the value of the occupied memory and methods for manipulating the content
Experienced Java developer has extensive knowledge of APIs including JDK, libraries for everyday projects including Log4j, JSON parsing, Jackson. The problem is that not all Java library designers think about their users, how the API will be used in practice, and how the code will look and be tested
Currently, processor processing power is increasing faster than storage capacity and network bandwidth. Therefore, in order to compensate for the increase in the amount of data, they compress them. The compressor uses an optimization algorithm of the appropriate type. For subsequent recovery, a decompressor with the opposite direction of the process is required
