Head tag: creation, configuration and purpose. HTML tags html, head, body. Tags that are on any Internet page
The element is the only required title tag and serves to give the document a title. The text placed inside the tag appears in the title bar of the web browser. The title should be no more than 60 characters long to fit completely in the browser window title. The title text should contain as much as possible Full description web page content.
For every document, the element is not only necessary, but also very useful for a number of reasons:
- the absence of a document title will force the browser, when interpreting the HTML code, to display a phrase like Untitled Document (Untitled document) that does not correspond to the theme of your site or its content;
- when trying to add a created HTML document without an element to the browser “bookmarks”, the user will have to independently enter the name of the page to be added;
- search engines, when faced with an unnamed page, will enter it into their databases under the title Untitled, which will make such a document faceless and similar to millions of other HTML documents posted on the Internet.
website - online textbooks in HTML, CSS, JavaScript.
Main content...
Element
Using the element, you can specify a description of the page content and keywords for search engines, the author of the html document and other metadata properties. An element can contain multiple elements because they carry different information depending on the attributes used.
HTML page encodingThe encoding of an HTML page must be specified so that the web browser can correctly display the text on the page. If you do not explicitly specify the encoding, then the browser will automatically determine it when displaying the page. If the encoding is determined incorrectly, hieroglyphs will be displayed instead of text.
The most common modern encoding — utf-8.
Tell the user's browser what encoding is used on this page:
Meta elements and search engines
Some search engines look at meta elements when indexing a page.
For example, the meta elements below define the description for the HTML document and keywords ( this information can be used by search engines when displaying a document in search results):
Description of page content and keywords:
The attributes available for the element are charset , content , http-equiv , name , as well as global attributes.
| charset | Specifies the character encoding for the current HTML document: |
| content | Defines the return value for the property. Contains arbitrary text that specifies the value associated with the http-equiv or name attribute. |
| http-equiv | Controls browser actions on a given web page (equivalent to HTTP headers). When rendering the page, the browser will follow the instructions specified in the attribute: default-style - Specifies the preferred style to use on the page. Attribute content must contain the ID of the element that references the CSS stylesheet, or the ID of the element that contains the stylesheet. refresh - indicates the time in seconds before the page is reloaded or the time before redirecting to another page, if in the attribute content after the time there is a line "url=page_address". Automatically reload the page after a specified period of time, in in this example, after 30 seconds: If you need to immediately transfer the visitor to another page, you can specify the URL in the url parameter: |
| name | Provides additional description tag. If this attribute is omitted, it is considered equivalent to the http-equiv attribute. Should not be used if the element already has the http-equiv , charset , or itemprop attributes set. application-name - Specifies the name of the web application used on the page. author - used to indicate the name of the author of the web page: description - is a description of the page, it is most often used by search engines to determine what it is dedicated to, for example: generator - specifies one of the packages software, used to create a document, for example: keywords - contains a list keywords, separated by commas, corresponding to the content of the page, for example: pragma - prevents the browser from caching the page, for example: expires - can be used to indicate when a page should expire (and be removed from the cache), for example: robots - indicates whether search engines should include this page in search results. For example, the value nofollow specifies that search engines can include this page in search results, but should not show pages linked to from it: viewport - allows developers to control the size of the original viewport on different devices: width=device-width— tells the browser to set the width of the viewport equal to the width of the device screen, whatever it may be; initial-scale=1.0— sets the initial zoom level when the browser first loads the page. |
An element in an HTML document tells the browser where it is located. external file CSS used to format the page.
The element must use the following three attributes:
- href - specifies the path to the CSS file, which is often located in a folder named css or styles;
- type - determines the type of document that the link points to. A value must be specified text/css;
- rel - defines the relationship between the HTML page and linked file. When linking to a CSS file, the stylesheet value must be specified.
You can enable CSS rules into an HTML page by placing them inside the element, which is usually found within the element.
ElementThe element allows you to attach various scripts to a document. The script code itself can be located either inside this element or in an external file. If the script text is located in an external file, then it is connected using element attributes.
The following example connects an external script.js file to an HTML document and generates a popup when the user clicks a button:
The element is used to specify the full base URL of the document against which all relative addresses. This will help avoid problems if your page is moved to another location. In other words, all links will work as before.
The main element attribute is href . The address of the base folder is used as its value, relative to which relative addresses will be calculated. By default the root address is domain name site.
Another useful attribute of this tag is target . target attribute determines into which window pages will be loaded based on links found in the HTML document. By default, links open in the same browser window.
Today we will look at how to set up a website so that you won’t be embarrassed to send clients to it. Most likely, you have already prepared the design. All that remains is to configure the domains and publish the site!
Site name and descriptionGo to the “Settings” of the site, and enter SEO text (text for search engines).
Tab title (visible to visitors) = description of the site that appears in the browser tab. In the title, describe your field of activity with specifics.
Example "Italian sliding wardrobes with delivery in Moscow"
Keywords (not visible to visitors) = enter the keywords that characterize your site.
IMPORTANT: these keywords are in no way associated with Yandex.Direct. The words may be different.
Example "Italy, kitchens, wardrobes, compartments, Moscow, delivery"
Description (not visible to visitors) = description of your site in 200 characters. Briefly describe your site in 1-2 sentences.
Example "Company LLC" is engaged in direct deliveries Italian furniture with delivery in Moscow. We provide a 10-year guarantee on all fittings. More than 100 models in stock and on order."
Insert in Head tag and Insert in Body tag = optional. Used by professional users to insert special code.
Domain connectionAny website created in our service receives a free subdomain (site.lpmotortest.ru). IN this section You can change it.
Or you can connect your domain. To do this, click "Attach domain" and enter the domain name. In order for the domain to be attached, you need to register the correct dns:
DNS1: ns1.site
DNS2: ns2.site
For each landing page, you can set up notifications about new applications and clients. Initially, all notifications are turned on automatically. You can change the settings at your discretion at any time.
Hi all. I haven’t written anything for a long time, but today I decided to please you with an interesting article about optimization, and more specifically, optimization of the head service block in html code e site. So let's get started.
For search robots An important role is played by the structure and content of the head service tag, which contains information not displayed on the page (scripts, style files, plug-ins and meta tags).
All contents of the head area are displayed on the site using the service wordpress file header.php the contents of which you can view by going to the admin panel/appearance/editor:
If you look closely at the HTML wordpress code blog in the head area, and then compare it with the header.php file, you will find that in addition to the calls specified there: meta tags, CSS styles and header, there are many other lines. They usually appear when using various plugins that add their own styles or scripts to HTML. Sometimes, the resulting code turns out to be very large and cluttered, which has a bad effect on website promotion.
Structure and contents of the correct headAccording to HTML standards, only a few tags can be placed in the head section. These tags are: , , , , and .
The most important of these tags in terms of page optimization are title, which indicates the title of the current document window, and meta, which is used to indicate information about the HTML document that helps browsers display pages correctly, and search engines- index them and rank them in search results.
But often these tags are either absent altogether or, due to plugins, end up at the very end of the head block, which in turn does not favorably affect the site’s ranking in the search results. The most in a simple way add these tags for a wordpress site - install one of the plugins:
One of best plugins For WordPress optimization blog for search engines. Allows you to enter meta tags for each page, change the title output format, etc.
More advanced version of All in One SEO Pack. Additionally can add nofollow tag to links.
After installing one of these plugins, you should ideally have head content for wordpress the following type:
Optimizing the head block of a website on WordPress
Well, let's try to bring the code to this form? Of course yes!
Getting rid of unnecessary code in headThe first thing you need to do is combine all of your theme's stylesheets into one shared file style.css. To do this, open sequentially additional files styles, copy the code from them and paste it at the end of the style.css file. After these steps, you can remove the code for displaying additional styles from header.php. As a result, in the html you should only have one line for connecting your theme’s styles:
In the template file code, the function implements most of the " additional inserts» not needed for the head block. You cannot simply remove this function, as this will certainly entail certain consequences, which could negatively affect the work of the blog.
Therefore, it would be better to simply deactivate the connection in the head area of the plugin styles, through the functions file functions.php.
Very important! Before making any changes to the functions.php file, be sure to make a copy of it.
We use the following algorithm:
1). Before you start disabling adding plugins to head, copy the html code that they add.
2). Create in the Body area additional block for example, called header:
And here is the plugin code
In this block we need to insert the code that plugins add so that they do not stop working correctly.
3). You need to carefully review the main php file plugin whose hooks you are planning to remove. Using the Ctrl+F key combination, find the following structure there:
Add_action("wp_head", "plugin_function_here");
4). To correctly get rid of this call, you need to add it to the functions.php file next line:
Remove_action("wp_head", "plugin_function_here");
5). We save the template and check what we got.
There are also unique cases in which using remove_action for wp_head() does not work. Let me give you an example of WP-PageNavi (version 2.5.0), there is no explicit function call in wp_head(), despite this, the plugin loads its own styles file. Take a close look at the original wp-pagenavi.php code, there is such a function “Enqueue PageNavi Stylesheets”, adding styles through:
Add_action("wp_print_styles", "pagenavi_stylesheets");
Add the following line to the very end of the function file fuctions.php before ?> to get rid of this call:
Add_action("init", "remheadlink"); function remheadlink() ( remove_action("wp_print_styles", "pagenavi_stylesheets"); )
There is a certain principle in working with unnecessary calls and hooks - you are looking for the desired function and turn it off.
You can also get rid of other unnecessary elements that you don't use by using hacks for functions.php, for example:
Add_action("init", "remheadlink"); function remheadlink() ( remove_action("wp_head","feed_links_extra", 3); // links to additional rss remove_action("wp_head","feed_links", 2); // links to the main rss and comments remove_action("wp_head" ,"rsd_link"); // for the service Really Simple Discovery remove_action("wp_head","wlwmanifest_link"); // For Windows Live Writer remove_action("wp_head","wp_generator"); // removes the wordpress version)
Add_action("init", "remheadlink"); function remheadlink() ( remove_action("wp_head","start_post_rel_link",10,0); remove_action("wp_head","index_rel_link"); remove_action("wp_head","rel_canonical"); remove_action("wp_head","adjacent_posts_rel_link_wp_head ", 10, 0); remove_action("wp_head","wp_shortlink_wp_head", 10, 0); )
On latest versions WordPress a strange script appears in the head block:
Script type text javascript window. wpemojiSettings baseUrl http: s.w.org images core emoji 72x72 ext png source concatemoji http: medicinahouse.ru wp-includes js wp-emoji-release.min.js? ver 4.2.4 !function a, b, c function d a var c b.createElement canvas d c.getContext c.getContext 2d return d d.fillText? d.textBaseline top
This script adds a set of standard Emoji emoticons, I don’t even know why WordPress added it, but oh well. You can remove this script by adding the following construction to the very end of the functions file, before the ?> sign:
Add_action("init", "remheadlink"); function remheadlink() ( remove_action("wp_head", "print_emoji_detection_script", 7); remove_action("admin_print_scripts", "print_emoji_detection_script"); remove_action("wp_print_styles", "print_emoji_styles"); remove_action("admin_print_styles", "print_emoji_styles") ; )
In addition to everything said above, through the functions file, you can remove the version of scripts and styles. All you need to do is add the code:
Function _remove_script_version($src)( $parts = explode("?", $src); return $parts; ) //This is to hide the script version add_filter("script_loader_src", "_remove_script_version", 15, 1); //This is for styles add_filter("style_loader_src", "_remove_script_version", 15, 1);
That's all for me. Thank you for your attention.
It can be seen that it consists of three main sections.
- – the root of any HTML document in which all other sections are located (this tag must be in a single copy and must be present on every page).
- – a header that contains service information and instructions to the browser for displaying content.
- – the main section in which the content is located, that is, all helpful information(text, pictures, video). In addition to the content, this section contains the site grid, or its layout - the locations of the main sections of the site are described, such as: header, footer, main menu, side speakers, etc.
The tag is no different, except that it is the root element - a container for all other blocks. So let's get down to more detailed consideration sections.
Elements of this section are not directly displayed on the web page. The only tag from this section that will display information is the tag. In the tag, section, the title of the web page is written; this text will be displayed in the title bar of the browser window.
The title will be displayed in the browser title bar
This tag is a single mandatory tag in section.
In addition to the tag, the following tags can be placed in this section: , , , .
TagThis tag tells the browser where certain external resources, such as external styles (CSS), are located. Also, using a tag and specifying the corresponding rel attribute, you can specify the address of the RSS feed, a favicon for the site, and other external resources.
Tag
This is a generic tag that describes data. The tag provides metadata about the document HTML browser. Metadata is not displayed, but is only used for service purposes, either by the browser engine or by search spiders. Meta elements are typically used to describe a page ( description), specifying keywords ( keywords), indication of the author of the document ( author), indications of the content type and its encoding, and other metadata.
Tag
By using of this tag, you can tell the browser where it should look for external scripts:
or, insert the script directly into this section:
document.write("Hello World!")
TagThis tag can be used to set the styles required only for this page, and also, if there is no need to include an external style file, using the tag. You can specify more than one tag
h1 (color: red) p (color: blue)
That's all the information you need to know about the section. Next, we will consider the section, which will contain the main content of the web page.
Hello, dear blog readers! We continue the section “Creating a website from scratch,” and in particular the topic of tags... And today we will look at the tags that are present on any Internet page -, and. There is one more tag that must be in every HTML document and which I already wrote about in one of the previous articles - so we will not touch on it.
In previous articles of this section I wrote about the creation empty file in html format. In fact, it was used in the article about (that's where the title tags were applied). Now we will directly edit this file with full descriptions.
And we’ll start the article by editing the created file. Personally, I named it index.html, but the name can be anything. Open it using any text editor(it’s better to use Notepad++, as it has code highlighting and other useful features). And we’ll immediately add tags to it, and exactly in the order in which they are written. Don't forget to close them, as shown in the screenshot. The document will look like this:
Now let's look at the meaning of each tag separately. It’s not for nothing that they are in every HTML document.
Tag functions So, the tag is a container (). It contains all the visible and invisible content of a web page (including tags and ). The opening tag comes immediately after the Doctype declaration, and the closing tag comes at the end of the document. Thus, it makes it clear to the browser where to start processing the document and where to end it.Theoretically, he himself can understand what and how. After all ? This is translator HTML language and it is unlikely that he will start processing from the middle of the document and finish it before reaching the end. The question is, of course, controversial, but I always thought (and now I do not give up my opinion) that writing this tag is mandatory.
Even taking into account the fact that the function of this tag is only to indicate the boundaries of the content, it has its own attributes (which are now either not used at all or are used extremely rarely). IN different sources attributes that are different from each other are indicated, so I don’t dare put forward the correct version.
The only thing I can say for sure is that most attributes are not supported by HTML 4.01 or are undesirable. Although I will still give one example.
— a tooltip anywhere in the document. For example, when you hover your mouse over an image, you may see text pop up. Also in the case of this tag:
Here's what you'll see when you hover over a document with this content: It is preferable to use title attribute
not in the tag, but in any other specific areas of the page. Firstly, it’s convenient, and secondly, search engines will treat your site better. This tag does not directly affect resource optimization. Let's move on. Tag function And next in line is the tag. It contains everything Technical informationabout a page that serves to help the browser and search engines. The tag is container and comes immediately after, only unlike the latter, the closing tag does not come at the end of the document, but before the opening tag. What information can be seen in? But none. Everything that is within this tag is accessible to the human eye only by viewing pages. All content in this tag is intended for search engines and browsers. The only thing you can somehow see is the tag, which is responsible for the title of the web page window. Here's an example:
The text after the icon is the content of the tag. Now let's look at the content that we cannot see, but which is very important part creation and promotion of the site. First of all, this is the line
This is a meta tag responsible for the content type of the page (Content-Type). IN in this case, this is html code in UTF-8 encoding (content="text/html; charset=UTF-8"). Next comes title tag described above. Then there are lines starting with the tag. It indicates a link to an external document. For example, the line
indicates that a (rel="stylesheet") file with (type="text/css") is connected, which is located at such and such an address (to reduce the length of the line, I replaced half the address with dots). After the browser processes this string, it will determine where to get the cascading style sheets from.
In general, the head tag contains a lot of information that you can talk about endlessly. The last thing worth noting (specifically in the case of ) is the presence of description tags, keywords and canonical. I use the All in One SEO Pack plugin, which is why they are present within.
