CINXE.COM
How to detect Internet Explorer using HTML
<!DOCTYPE html> <!-- ssi1 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> <link href="/home/include/master.css" rel="stylesheet" type="text/css"> <script src="/home/include/master.js"></script> <link rel="shortcut icon" type="image/png" href="/favicon.ico"> <!-- / ssi1 --> <title>How to detect Internet Explorer using HTML</title> <meta name="description" content="How to use simple conditional statements to detect whether the user has Internet Explorer and if so, which version they have."> <meta name="keywords" content="Internet Explorer, ie, detection, version, browser, conditional statements, HTML, code"> <!-- ssi2 --> </head> <body><div id="boundary"><div id="header"><div id="hlogo"><a href="/" target="_top"><img src="/images/ihome/homebtn.png" id="home" width="100" height="40" alt="Home"></a></div><div id="mc_mobilemenu" onclick="mc_menu();">MENU</div><div id="nav"><ul><li><a href="/video/">Video</a></li><li><a href="/audio/">Audio</a></li><li><a href="/lighting/">Lighting</a></li><li><a href="/photography/">Photography</a></li><li><a href="/graphics/">Graphics</a></li><li><a href="/computer/">Computers</a></li><li><a href="/internet/">Internet</a></li><li><a href="/glossary/">Glossary</a></li><li><a href="/equipment/">Equipment</a></li><li><a href="/downloads/">Downloads</a></li><li><a href="/misc/">Misc</a></li><li><a href="/links/">Links</a></li></ul></div></div> <div id="bc"><div id="bc1"><a href="/">Home</a> : <!-- / ssi2 --> <a href="/internet/">Internet</a> : <a href="/internet/samples/">HTML Samples</a> : <a href="/internet/html/validate/">Detect IE</a> <!-- ssi3 --> <div id="bc2"> </div> </div> </div> <div id="content"> <!-- / ssi3 --> <h1>Detect Internet Explorer Using HTML</h1> <p>This method allows you to use simple code in your HTML to detect Internet Explorer (IE). You can determine whether or not the end user is using IE, and if so, which version. This allows you to provide content based on which browser is being used.</p> <p>This method does not require JavaScript, but it is not as versatile as JavaScript techniques which can also identify different browsers. This technique can only identify IE - all other browsers are lumped together as "not IE".</p> <p>The code snippets used in this technique are called called <em>conditional comments</em>. The following example simply says "If the browser is Internet Explorer, show this content".</p> <div class="code1"> <!--[if IE]><br> Place content here to target all Internet Explorer users.<br> <![endif]--> </div> <p>The next example is the opposite: "Only show this content if the browser is NOT Internet Explorer".</p> <div class="code1"> <![if !IE]><br> Place content here to target all users not using Internet Explorer.<br> <![endif]> </div> <p>The next example shows the content if the browser version is greater than or equal to 8.</p> <div class="code1"> <!--[if gte IE 8]><br> Place content here to target users of Internet Explorer 8 or higher.<br> <![endif]--> </div> <p>A similar example shows the content if the browser version is less than 7 (i.e. 6 or lower).</p> <div class="code1"> <!--[if lt IE 7]><br> Place content here to target users of Internet Explorer 6 or lower (less than 7).<br> <![endif]--> </div> <div style="height:12px;"> </div> <h2>How Conditional Comments Work</h2> <p>Conditional comments are only recognized by Internet Explorer — other browsers treat them as normal comments and ignore them. Note that in the second example above (the one that targets "other" browsers), the content is not actually inside a comment — that's why other browsers display it.</p> <!-- ssi4 --> </div> <div style="clear:both;height:20px;"></div> <div style="clear:both;width:100%;min-height:65px;margin-top:20px;padding:0px 0px 20px 0px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9498124618136592" crossorigin="anonymous"></script> <!-- MediaCollege Footer --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9498124618136592" data-ad-slot="7996166243" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="mc_clearboth"></div> <script> if (typeof mc_page_author!='undefined' && typeof mc_pageinfo!='undefined') { mc_pageinfo(mc_page_author,mc_page_published,mc_page_updated); } </script> </div> <div id="footer"> <div id="ft1"><a href="/">MediaCollege.com</a> - <a href="/home/">About Us</a> - <a href="/home/contact/">Contact Us</a></div> <div id="ft2">All content is 漏 Copyright MediaCollege.com except where stated otherwise. Usage is subject to <a href="/home/terms.html">Terms & Conditions</a>.</div> </div> </div> </body> </html> <!-- / ssi4 -->