How to use http-equiv and name attribute at the same time? - html

I was researching about meta tags in HTML and I ended up on a website that suggested that I don't set the name and htt-equiv attribute at the same time. I read somewhere that if I need to support IE8 OR IE9 then it's recommended to use the http-equiv attribute with X-UA Compatible value. My website needs to be supported by older versions of IE so i use the following line of code:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
But at the same time, i also want to provide extra information such as description of my webpage and also specify keywords. Those are set by using the name attributes. Like this:
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
But according to several webpages, I cannot use the http-equiv and name attributes at the same time. So how do I ensure compatibility with older versions of IE and extra information about the webpage at the same time?
I'm quite confused, please enlighten me.

Related

Is the Open Graph prefix attribute necessary in HTML 5?

I've read conflicting information about whether the prefix attribute is needed in HTML 5.
For example, is this code correct for Open Graph data in the head? Would it be okay to remove the prefix attribute?
<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article# fb: https://ogp.me/ns/fb#">
<meta property="og:site_name" content="example">
<meta property="og:title" content="example">
<meta property="og:description" name="description" content="example">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="article">
<meta property="article:author" content="https://example.com/profile">
<meta property="article:section" content="Products">
<meta property="fb:app_id" content="123">
It depends on what consumers of the mark-up do. Since og: is named as a predefined prefix in the RDFa 1.1 Core Initial Context, any RDFa 1.1 compliant consumer will work fine if you omit the og: prefix.
Similarly, even if the consumer isn't RDFa 1.1 compliant, but "knows" the prefix anyway, you can omit it.
On the other hand, neither article: nor fb:are defined in the Core Initial Context, so you're relying that much more on the consumer just "knowing" (or "guessing") that prefix.
None of this is really HTML5 related. RDFa is not an explicit part of HTML5 in the way microdata is, but can be regarded as an "add-on" or applicable specification in HTML5 terminology
So, in general, it could be regarded as safer to include the populated prefix attribute. If, however, you know all the consumers you're targeting will interpret the prefixes correctly anyway, then you would be free to omit the attribute.

Is this safer to update IE=EmulateIE8 to IE=edge

I have come across a website that needs to be compatible with IE 11. While inspecting its source I have notice following meta tag;
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
And checked that its document mode is also 8. In these settings It has a lots of issues. When I updated it to latest i.e. Edge, things become fine again.
Therefore, I have updated the meta tag to;
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
But I just want to know is this safer to update the meta tag I don't know what was there reason of adding IE=EmulateIE8. Or I need to add a some condition for specifically IE11?

Doctype over Meta X-UA-Compatibility

If I use <!doctype html>, do I have to use <meta http-equiv="X-UA-Compatible" content="IE=edge"> to prevent Internet Explorer's compatability message?
Thanks guys!
Using <meta http-equiv="X-UA-Compatible" content="IE=edge"> will override such settings as "Display intranet sites in Compatibility View" (which is enabled by default). I've found using the meta tag is helpful when working on new pages which share a server with old (IE7 and older) pages, but I'm not sure if it's the preferred technique.

"X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
Actually what is the meaning of this statement ?
Some of the examples use , to separate versions of IE, while some use ;; which is correct?
The order IE=9; IE=8; IE=7; IE=EDGE has some importance, I wish to know that.
Edit: I am using <!DOCTYPE html>
If you support IE, for versions of Internet Explorer 8 and above, this:
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />
Forces the browser to render as that particular version's standards. It is not supported for IE7 and below.
If you separate with semi-colon, it sets compatibility levels for different versions. For example:
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" />
Renders IE7 and IE8 as IE7, but IE9 as IE9. It allows for different levels of backwards compatibility. In real life, though, you should only chose one of the options:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
This allows for much easier testing and maintenance. Although generally the more useful version of this is using Emulate:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
For this:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
It forces the browser the render at whatever the most recent version's standards are.
For more information, there is plenty to read about on MSDN,
In certain cases, it might be necessary to restrict the display of a webpage to a document mode supported by an earlier version of Internet Explorer. You can do this by serving the page with an x-ua-compatible header. For more info, see Specifying legacy document modes.
- https://msdn.microsoft.com/library/cc288325
Thus this tag is used to future proof the webpage, such that the older / compatible engine is used to render it the same way as intended by the creator.
Make sure that you have checked it to work properly with the IE version you specify.

What meta tags to include on a modern website?

Currently all I have on each page is <meta http-equiv="content-type" content="text/html; charset=UTF-8" />. Do people still include meta tags like keywords, description, and author? If so, should they go on every HTML page or just the home-page?
Well you defiantly should have the meta charset
<meta charset="utf-8">
The http-equiv is not needed because it represents the HTTP header equivalent. For the web however the Content-Type HTTP header supplied via the web server (probably apache) should do. You can override the server defaults via .htaccess or using the PHP header() function.
It is also not a bad idea to include
<meta name="description" content="">
<meta name="author" content="">
Paul Irish's html5 boiler plate also recommends using:
<!-- Always force latest IE rendering engine (even in intranet) this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
http://html5boilerplate.com/docs/#The-markup★make-sure-the-latest-version-of-ie-is-used
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://html5boilerplate.com/docs/#The-markup★mobile-viewport--creating-a-mobile-version
I don't think keywords have any impact on the ability to find your site using search any more. If you're going to use a description, you might want to include it on every page as it will help search engines to display a more usable description than they otherwise might for that page. I don't think it would be worth developing a separate description for each page, use use the same one on all. It wouldn't hurt to omit all of them, see http://en.wikipedia.org/wiki/Meta_element
Meta tags like Keyword , Description author used from a long time to tell search engine about the content current page.
Like a product website the description should be information about product and Keyword about the tags product have and Author is a book writer. it's help search engine like google to tell them what is content on the page.
their is no need of it but it's help to improve the SEO.