It was created in 1990 by Sir Tim Berners-Lee, a British computer scientist who is credited with inventing the World Wide Web. Webpages can include writing, links, pictures, and even sound and video. HTML tells web browsers what webpages should look like. HTML also adds meta information to webpages. Meta information is information about a webpage e.g., the name of the person who created the page. Web browsers usually do not show meta information.
HTML is often used with Cascading Style Sheets (CSS) and JavaScript. CSS is used to change the way HTML looks. JavaScript tells websites how to behave. It can also change HTML and CSS.
HTML is made by the World Wide Web Consortium (W3C). There are many versions of HTML. As of September 2018, the current standard of HTML is called HTML 5 and is specifically at version 5.2.
HTML uses "elements" to let the browser know how a webpage is made of. Elements are shown as "tags" in the code, written with angle brackets: <example>. Tags usually come in pairs: an opening tag defines the start of a block of content and a closing tag defines the end of that block of content. There are many kinds of tags, and each one has a different purpose. See Basic HTML Tags below for tag examples.
Some tags only work in certain browsers. For example, the
Example
Here is an example page in HTML with "Hello world!".
<html> <head> <title>Hi!title> head> <body> <p>Hello world!p> body> html>
The Text between <html> and html> describes the web page, and the text between <body> and body> is the page content. <title>This is a titletitle> defines the browser page title.
Here are some example HTML tags:
| Tag name | Name | Function | Code Example |
|---|
| Doctype | Defines the Document type | |
| HTML | Defines an HTML document and starts an HTML document. | |
| Head | Contains any code that is not used to display elements on the webpage | |
</code> </td> <td>Title </td> <td>Defines the title of the webpage (shown on the <a href="/wiki/simple/Tab_(GUI)" title="Tab (GUI)">tab</a>) and is entered within the <code><head></code> </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="duhoc-simple p"><</span><span class="duhoc-simple nt">title</span><span class="duhoc-simple p">></span>Webpage<span class="duhoc-simple p"></</span><span class="duhoc-simple nt">title</span><span class="duhoc-simple p">></span> </pre></div> </td></tr><tr><td><code><body></code> </td> <td>Body </td> <td>Contains the visible elements of the webpage. </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="duhoc-simple p"><</span><span class="duhoc-simple nt">body</span><span class="duhoc-simple p">></span>Html tags<span class="duhoc-simple p"></</span><span class="duhoc-simple nt">body</span><span class="duhoc-simple p">></span> </pre></div> </td></tr><tr><td><code><h1></code> to <code><h6></code> </td> <td>Headings </td> <td>Headings of various sizes (<code><h1></code> being the largest) </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="duhoc-simple p"><</span><span class="duhoc-simple nt">h1</span><span class="duhoc-simple p">></span>Heading<span class="duhoc-simple p"></</span><span class="duhoc-simple nt">h1</span><span class="duhoc-simple p">></span> </pre></div> </td></tr><tr><td><code><p></code> </td> <td>Paragraph </td> <td>Defines a paragraph of text </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="duhoc-simple p"><</span><span class="duhoc-simple nt">p</span><span class="duhoc-simple p">></span>TEXT<span class="duhoc-simple p"></</span><span class="duhoc-simple nt">p</span><span class="duhoc-simple p">></span> </pre></div> </td></tr><tr><td><code><a></code> </td> <td>Anchor </td> <td>Creates active links to other web pages </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="duhoc-simple p"><</span><span class="duhoc-simple nt">a</span> <span class="duhoc-simple na">href</span><span class="duhoc-simple o">=</span><span class="duhoc-simple s">"www.domain.com"</span><span class="duhoc-simple p">></span>Visit our site<span class="duhoc-simple p"></</span><span class="duhoc-simple nt">a</span><span class="duhoc-simple p">></span> </pre></div> </td></tr><tr><td><code><img></code> </td> <td>Image </td> <td>Displays an image on the page </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="duhoc-simple p"><</span><span class="duhoc-simple nt">img</span> <span class="duhoc-simple na">src</span><span class="duhoc-simple o">=</span><span class="duhoc-simple s">"ImageUrl"</span> <span class="duhoc-simple na">alt</span><span class="duhoc-simple o">=</span><span class="duhoc-simple s">"Text displayed if image is not available"</span><span class="duhoc-simple p">></span> </pre></div> </td></tr><tr><td><code><br></code> </td> <td>Break </td> <td>Inserts a single line break </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span>Text <span class="duhoc-simple p"><</span><span class="duhoc-simple nt">br</span><span class="duhoc-simple p">></span> Text </pre></div> </td></tr><tr><td><code><center></code> </td> <td>Center </td> <td>Moves content to the center of the page </td> <td><div class="duhoc-simple mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="duhoc-simple p"><</span><span class="duhoc-simple nt">center</span><span class="duhoc-simple p">></span>Code<span class="duhoc-simple p"></</span><span class="duhoc-simple nt">center</span><span class="duhoc-simple p">></span> </pre></div> </td></tr><tr><td><code> <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></noscript><script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js" crossorigin="anonymous"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" crossorigin="anonymous"></script><script defer src="https://cdn.jsdelivr.net/gh/tomickigrzegorz/show-more@1.1.6/dist/js/showMore.min.js" crossorigin="anonymous"></script><script>document.addEventListener('DOMContentLoaded', function(){$(document).ready(function(){ $("img").addClass("duhoc_responsive lazyload"); $("table").addClass("table-responsive");$(".toctogglespan, #mw-mf-main-menu-button").click(function(){$(".toclist_viewer").toggle(200);/*$("header").removeClass("header-fixed").hide(); */ });$(".toctext").click(function(){/*$("header").removeClass("header-fixed"); */ });$("a.external, a.new, a.image, a.extiw, a.text, a.free, a.internal, a.last-modified-bar, a.mw-file-description").click(function(){window.open(this.href);return false;}); $(".back-to-top").click(function(){ $("html, body").animate({scrollTop : 0},"slow"); return false; });$(".back-to-top").hide();/**$(".reflist").hide(); function sticky_relocate() { var window_top = $(window).scrollTop(); var footer_top = $("#footer-info").offset().top; var div_top = $("#Other_languages").offset().top; var div_height = $(".top_lang").height(); var padding = 200; console.log(window_top + " "+ div_height + " " +padding + " --> " + footer_top); if(window_top + div_height +padding> footer_top){ $(".article_footer_sticky").hide(); }else{ $(".article_footer_sticky").show(); } } $(function () { $(window).scroll(sticky_relocate); sticky_relocate(); });**/});$(window).scroll(function(){ var showAfter = 200; if ($(this).scrollTop() > showAfter) { $(".back-to-top").fadeIn(); } else { $(".back-to-top").fadeOut(); }});new ShowMore(".minerva-languages", {config: { type: "list", limit: 23, number: true, more: "→ All languages", less: "← Less"} });});</script><script>function mfTempOpenSection(getID) {var x = document.getElementById("mf-section-"+getID); if (x.style.display === "none") { x.style.display = ""; } else { x.style.display = "none"; }}</script><!-- Global site tag (gtag.js) async - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-GTLLE2Y4Q3"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-GTLLE2Y4Q3');</script></body> </html><script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'876ff82379512b18',t:'MTcxMzU2MTk0OS41NDgwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script>
|
