CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>HTML - Wikiversity</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikiversitymwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"c7f17440-8cdc-4ea3-bbb1-0e17acd0fa2c","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"HTML","wgTitle":"HTML","wgCurRevisionId":2649996,"wgRevisionId":2649996,"wgArticleId":5851,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Resources with related material at Wikipedia","HTML"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"HTML","wgRelevantArticleId":5851,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikiversity","wgCiteReferencePreviewsActive":false,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en", "pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":5000,"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q8811","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"wgSiteNoticeId":"2.101"};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript": "ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready","ext.dismissableSiteNotice.styles":"ready"};RLPAGEMODULES=["ext.pygments.view","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","wikibase.client.vector-2022","ext.checkUser.clientHints","wikibase.sidebar.tracking","ext.dismissableSiteNotice"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.dismissableSiteNotice.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/4/4d/Html.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="1200"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/4/4d/Html.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="800"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="640"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="HTML - Wikiversity"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikiversity.org/wiki/HTML"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=HTML&action=edit"> <link rel="icon" href="/static/favicon/wikiversity.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikiversity (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikiversity.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikiversity.org/wiki/HTML"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikiversity Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-HTML rootpage-HTML skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Main-Page" class="mw-list-item"><a href="/wiki/Wikiversity:Main_Page"><span>Main Page</span></a></li><li id="n-Browse" class="mw-list-item"><a href="/wiki/Wikiversity:Browse"><span>Browse</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-Guided-tours" class="mw-list-item"><a href="/wiki/Help:Guides"><span>Guided tours</span></a></li><li id="n-Random" class="mw-list-item"><a href="/wiki/Special:RandomRootpage"><span>Random</span></a></li><li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="The place to find out"><span>Help</span></a></li> </ul> </div> </div> <div id="p-community" class="vector-menu mw-portlet mw-portlet-community" > <div class="vector-menu-heading"> Community </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Wikiversity:Community_Portal" title="About the project, what you can do, where to find things"><span>Portal</span></a></li><li id="n-Colloquium" class="mw-list-item"><a href="/wiki/Wikiversity:Colloquium"><span>Colloquium</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Wikiversity:News" title="Find background information on current events"><span>News</span></a></li><li id="n-Projects" class="mw-list-item"><a href="/wiki/Wikiversity:Community_projects"><span>Projects</span></a></li><li id="n-Sandbox" class="mw-list-item"><a href="/wiki/Wikiversity:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Wikiversity:Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikiversity.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikiversity" src="/static/images/mobile/copyright/wikiversity-wordmark-en.svg" style="width: 9.125em; height: 1em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikiversity [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikiversity" aria-label="Search Wikiversity" autocapitalize="sentences" title="Search Wikiversity [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikiversity.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=HTML" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=HTML" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikiversity.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=HTML" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=HTML" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"><div id="mw-dismissablenotice-anonplace"></div><script>(function(){var node=document.getElementById("mw-dismissablenotice-anonplace");if(node){node.outerHTML="\u003Cdiv class=\"mw-dismissable-notice\"\u003E\u003Cdiv class=\"mw-dismissable-notice-close\"\u003E[\u003Ca tabindex=\"0\" role=\"button\"\u003Edismiss\u003C/a\u003E]\u003C/div\u003E\u003Cdiv class=\"mw-dismissable-notice-body\"\u003E\u003C!-- CentralNotice --\u003E\u003Cdiv id=\"localNotice\" data-nosnippet=\"\"\u003E\u003Cdiv class=\"anonnotice\" lang=\"en\" dir=\"ltr\"\u003E\u003Cdiv class=\"center\" style=\"\"\u003E\n\u003Cbig\u003E\u003Ca href=\"/wiki/Wikiversity:Why_create_an_account%3F\" class=\"mw-redirect\" title=\"Wikiversity:Why create an account?\"\u003EWhy create a Wikiversity account?\u003C/a\u003E\u003C/big\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E";}}());</script></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Prerequisites" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Prerequisites"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Prerequisites</span> </div> </a> <ul id="toc-Prerequisites-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-HTML_Editor" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#HTML_Editor"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>HTML Editor</span> </div> </a> <ul id="toc-HTML_Editor-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-HTML_Structure" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#HTML_Structure"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>HTML Structure</span> </div> </a> <ul id="toc-HTML_Structure-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Lessons" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Lessons"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Lessons</span> </div> </a> <ul id="toc-Lessons-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_Also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_Also"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>See Also</span> </div> </a> <ul id="toc-See_Also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-External_links" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#External_links"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>External links</span> </div> </a> <ul id="toc-External_links-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">HTML</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 6 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-6" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">6 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikiversity.org/wiki/Fachbereich_Informatik/Semantische_HTML-Tags" title="Fachbereich Informatik/Semantische HTML-Tags – German" lang="de" hreflang="de" data-title="Fachbereich Informatik/Semantische HTML-Tags" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-el mw-list-item"><a href="https://el.wikiversity.org/wiki/%CE%A4%CE%BC%CE%AE%CE%BC%CE%B1:%CE%95%CE%BA%CE%BC%CE%AC%CE%B8%CE%B7%CF%83%CE%B7_HTML" title="Τμήμα:Εκμάθηση HTML – Greek" lang="el" hreflang="el" data-title="Τμήμα:Εκμάθηση HTML" data-language-autonym="Ελληνικά" data-language-local-name="Greek" class="interlanguage-link-target"><span>Ελληνικά</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikiversity.org/wiki/HTML_B%C3%A1sico_-_Lecci%C3%B3n_1" title="HTML Básico - Lección 1 – Spanish" lang="es" hreflang="es" data-title="HTML Básico - Lección 1" data-language-autonym="Español" data-language-local-name="Spanish" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikiversity.org/wiki/Hypertext_Markup_Language" title="Hypertext Markup Language – French" lang="fr" hreflang="fr" data-title="Hypertext Markup Language" data-language-autonym="Français" data-language-local-name="French" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikiversity.org/wiki/HTML" title="HTML – Italian" lang="it" hreflang="it" data-title="HTML" data-language-autonym="Italiano" data-language-local-name="Italian" class="interlanguage-link-target"><span>Italiano</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikiversity.org/wiki/HTML" title="HTML – Russian" lang="ru" hreflang="ru" data-title="HTML" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q8811#sitelinks-wikiversity" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/HTML" title="View the content page [c]" accesskey="c"><span>Resource</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:HTML" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discuss</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/HTML"><span>Read</span></a></li><li id="ca-ve-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HTML&veaction=edit" title="Edit this page [v]" accesskey="v"><span>Edit</span></a></li><li id="ca-edit" class="collapsible vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HTML&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HTML&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/HTML"><span>Read</span></a></li><li id="ca-more-ve-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HTML&veaction=edit" title="Edit this page [v]" accesskey="v"><span>Edit</span></a></li><li id="ca-more-edit" class="collapsible vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HTML&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HTML&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/HTML" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/HTML" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=HTML&oldid=2649996" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=HTML&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=HTML&id=2649996&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikiversity.org%2Fwiki%2FHTML"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikiversity.org%2Fwiki%2FHTML"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-wikimedia_projects" class="vector-menu mw-portlet mw-portlet-wikimedia_projects" > <div class="vector-menu-heading"> Wikimedia Projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Commons" class="mw-list-item"><a href="https://commons.wikimedia.org/wiki/Main_Page"><span>Commons</span></a></li><li id="n-Wikibooks" class="mw-list-item"><a href="https://en.wikibooks.org/wiki/Project:Main_Page"><span>Wikibooks</span></a></li><li id="n-Wikidata" class="mw-list-item"><a href="https://www.wikidata.org/wiki/Wikidata:Main_Page"><span>Wikidata</span></a></li><li id="n-Wikinews" class="mw-list-item"><a href="https://en.wikinews.org/wiki/Main_Page"><span>Wikinews</span></a></li><li id="n-Wikipedia" class="mw-list-item"><a href="https://en.wikipedia.org/wiki/Main_Page"><span>Wikipedia</span></a></li><li id="n-Wikiquote" class="mw-list-item"><a href="https://en.wikiquote.org/wiki/Main_Page"><span>Wikiquote</span></a></li><li id="n-Wikisource" class="mw-list-item"><a href="https://en.wikisource.org/wiki/Main_Page"><span>Wikisource</span></a></li><li id="n-Wikispecies" class="mw-list-item"><a href="https://species.wikimedia.org/wiki/Main_Page"><span>Wikispecies</span></a></li><li id="n-Wikivoyage" class="mw-list-item"><a href="https://en.wikivoyage.org/wiki/Main_Page"><span>Wikivoyage</span></a></li><li id="n-Wiktionary" class="mw-list-item"><a href="https://en.wiktionary.org/wiki/Project:Main_Page"><span>Wiktionary</span></a></li><li id="n-Meta-Wiki" class="mw-list-item"><a href="https://meta.wikimedia.org/wiki/Main_Page"><span>Meta-Wiki</span></a></li><li id="n-Outreach" class="mw-list-item"><a href="https://outreach.wikimedia.org/wiki/Main_Page"><span>Outreach</span></a></li><li id="n-MediaWiki" class="mw-list-item"><a href="https://www.mediawiki.org/wiki/MediaWiki"><span>MediaWiki</span></a></li><li id="n-Wikimania" class="mw-list-item"><a href="https://meta.wikimedia.org/wiki/Wikimania"><span>Wikimania</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=HTML"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=HTML&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=HTML&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/HTML" hreflang="en"><span>Wikimedia Commons</span></a></li><li class="wb-otherproject-link wb-otherproject-mediawiki mw-list-item"><a href="https://www.mediawiki.org/wiki/HTML" hreflang="en"><span>MediaWiki</span></a></li><li class="wb-otherproject-link wb-otherproject-wikibooks mw-list-item"><a href="https://en.wikibooks.org/wiki/HyperText_Markup_Language" hreflang="en"><span>Wikibooks</span></a></li><li class="wb-otherproject-link wb-otherproject-wikipedia mw-list-item"><a href="https://en.wikipedia.org/wiki/HTML" hreflang="en"><span>Wikipedia</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q8811" title="Link to connected data repository item [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikiversity</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><figure class="mw-halign-right" typeof="mw:File"><a href="/wiki/File:Html.png" class="mw-file-description" title="HTML"><img alt="HTML" src="//upload.wikimedia.org/wikipedia/commons/4/4d/Html.png" decoding="async" width="200" height="200" class="mw-file-element" data-file-width="128" data-file-height="128" /></a><figcaption>HTML</figcaption></figure> <p><b>HTML</b> or <b>HyperText Markup Language</b> is a predominant <a href="https://en.wikipedia.org/wiki/markup_language" class="extiw" title="w:markup language">markup language</a> for web pages. It is a structured way of telling web browsers how a web page should be displayed. <b>HTML</b> is a static language, which means that it cannot process (or change its content based on) user input. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Prerequisites">Prerequisites</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML&veaction=edit&section=1" title="Edit section: Prerequisites" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML&action=edit&section=1" title="Edit section's source code: Prerequisites"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Basic <b>HTML</b> has no prerequisites in any formal education. HTML is text-based computer-coding that can be made and run by children that understand the alphabet and symbols (Age: 6+). It requires no specialist computer knowledge at its basic level. Further insight (as delivered in these lessons) requires at least a moderately educated individual or supervisor. </p> <ul><li>Example: A children's lesson</li></ul> <table class="wikitable"> <tbody><tr> <td>[Tags for XML which include] HTML merely use diamond symbols: <> one uncut diamond, and then closed with </> a cut diamond. <p>The basic set of HTML words are put in the diamonds. </p> </td></tr> <tr> <td><div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span> <span class="p"><</span><span class="nt">html</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span> and then closed <span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> but this is another section for the page.<span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> </td></tr> <tr> <td>To finish the child merely creates a filename with the .html extension. Then, the child can click on the file icon to open it in a web browser! The .html file is usually associated with a browser. <ul><li>Changing the use of filenames, extensions, and file associations may be necessary in untested machines - learn this if necessary.</li></ul> </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="HTML_Editor">HTML Editor</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML&veaction=edit&section=2" title="Edit section: HTML Editor" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML&action=edit&section=2" title="Edit section's source code: HTML Editor"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <ol><li>To write HTML, you need to use an editor: <ul><li>Any <a href="https://en.wikipedia.org/wiki/Text_editor" class="extiw" title="w:Text editor">plain-text editor</a> will do, such as <a href="https://en.wikipedia.org/wiki/Notepad" class="extiw" title="w:Notepad">Windows Notepad</a>, <a href="https://en.wikipedia.org/wiki/TextEdit" class="extiw" title="w:TextEdit">Macintosh TextEdit</a> or <a href="https://en.wikipedia.org/wiki/gedit" class="extiw" title="w:gedit">gedit</a>/<a href="https://en.wikipedia.org/wiki/Kate_(text_editor)" class="extiw" title="w:Kate (text editor)">Kate</a> for Linux. A word processor, such as <a href="https://en.wikipedia.org/wiki/Microsoft_Word" class="extiw" title="w:Microsoft Word">Microsoft Word</a> or <a href="https://en.wikipedia.org/wiki/OpenOffice.org" class="extiw" title="w:OpenOffice.org">OpenOffice</a> is not acceptable, but a more advanced text editor such as <a href="https://en.wikipedia.org/wiki/Notepad%2B%2B" class="extiw" title="w:Notepad++">Notepad++</a> is fine, and even recommended.</li> <li>A <a href="https://en.wikipedia.org/wiki/WYSIWYG" class="extiw" title="w:WYSIWYG">What-You-See-Is-What-You-Get (WYSIWYG)</a> editor, such as <a href="https://en.wikipedia.org/wiki/Microsoft_Expression_Web" class="extiw" title="w:Microsoft Expression Web">Microsoft Expression Web</a> (which replaced Frontpage (discontinued)) or <a href="https://en.wikipedia.org/wiki/Adobe_Dreamweaver" class="extiw" title="w:Adobe Dreamweaver">Adobe Dreamweaver</a> will work, but this course will focus on learning with a text editor before using a WYSIWYG editor.</li> <li>You may also want to use a software that is specialized for programming, such as <a href="https://en.wikipedia.org/wiki/Eclipse_(software)" class="extiw" title="w:Eclipse (software)">Eclipse</a> or <a href="https://en.wikipedia.org/wiki/Visual_Studio_Code" class="extiw" title="w:Visual Studio Code">Visual Studio Code</a>.</li></ul></li> <li>To view rendered HTML, you need a <a href="https://en.wikipedia.org/wiki/web_browser" class="extiw" title="w:web browser">web browser</a> (such as the one you are using to view this page). But it's a good idea to view your HTML documents in multiple browsers, because each browser has different rules to displays HTML documents. <a href="/wiki/User:Jsbelk" title="User:Jsbelk">Jsbelk</a> 12:26, 23 September 2011 (UTC)</li></ol> <div class="mw-heading mw-heading2"><h2 id="HTML_Structure">HTML Structure</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML&veaction=edit&section=3" title="Edit section: HTML Structure" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML&action=edit&section=3" title="Edit section's source code: HTML Structure"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">html</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <dl><dt><html></html></dt> <dd>Begin your HTML webpage</dd></dl> <dl><dt><head></head></dt> <dd>HTML tags contain the code which is not really seen by the website user. It contains for instant javascript or title tags. You will learn more in the next few pages</dd></dl> <dl><dt><title></title></dt> <dd>HTML tags contain the title of the webpage which you see at the top of your browser tab</dd></dl> <dl><dt><body></body></dt> <dd>HTML tags contain, like it says, the body of the webpage which the user sees</dd></dl> <div class="mw-heading mw-heading2"><h2 id="Lessons">Lessons</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML&veaction=edit&section=4" title="Edit section: Lessons" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML&action=edit&section=4" title="Edit section's source code: Lessons"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/HTML/Introduction" title="HTML/Introduction">Introduction</a></li> <li><a href="/wiki/HTML/HTML_tags" title="HTML/HTML tags">HTML tags</a></li> <li><a href="/wiki/HTML/Basic_formatting" title="HTML/Basic formatting">Basic formatting</a></li> <li><a href="/wiki/HTML/Fonts_and_colours" title="HTML/Fonts and colours">Fonts and colours</a></li> <li><a href="/wiki/HTML/Links" title="HTML/Links">Links</a></li> <li><a href="/wiki/HTML/Lists" title="HTML/Lists">Lists</a></li> <li><a href="/wiki/HTML/Tables" title="HTML/Tables">Tables</a></li> <li><a href="/wiki/HTML/Frames" title="HTML/Frames">Frames</a></li> <li><a href="/wiki/HTML/Forms" title="HTML/Forms">Forms</a></li> <li><a href="/wiki/HTML/Graphical_Content_and_Multimedia" title="HTML/Graphical Content and Multimedia">Graphical Content and Multimedia</a> - Understand how to display audio, video, and images using HTML.</li> <li><a href="/wiki/HTML/Meta_Tags" title="HTML/Meta Tags">Meta Tags</a></li> <li><a href="/wiki/WYSIWYG_vs._Manual_Coding_in_HTML" title="WYSIWYG vs. Manual Coding in HTML">WYSIWYG vs. Manual Coding in HTML</a> - Advantages and disadvantages to both</li> <li><a href="/wiki/Web_Design/What_is_HTML" title="Web Design/What is HTML">What is HTML anyway?</a> - Get started on the right foot with this fun introduction to HTML!</li> <li><a href="/wiki/Web_Design/HTML_Challenges" title="Web Design/HTML Challenges">HTML Challenges</a> - Work on your HTML skills with these visual challenges.</li> <li><a href="/wiki/HTML/301_redirect" title="HTML/301 redirect">301 redirect</a></li> <li>improving HTML</li></ul> <div class="mw-heading mw-heading2"><h2 id="See_Also">See Also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML&veaction=edit&section=5" title="Edit section: See Also" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML&action=edit&section=5" title="Edit section's source code: See Also"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="projectbox" style="border-color: #aaaaaa;"> <table class="projectbox-table" style="background-color: #ffffff; height:;"> <tbody><tr><td class="projectbox-image" style="background-color: #e4e4e4;"><span typeof="mw:File"><a href="/wiki/File:Wikipedia-logo.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/36px-Wikipedia-logo.png" decoding="async" width="36" height="36" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/54px-Wikipedia-logo.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/72px-Wikipedia-logo.png 2x" data-file-width="200" data-file-height="200" /></a></span></td> <td class="projectbox-text">Search for <i><b><a href="https://en.wikipedia.org/wiki/Special:Search/HTML" class="extiw" title="w:Special:Search/HTML">HTML</a></b></i> on <a href="https://meta.wikimedia.org/wiki/Wikipedia" class="extiw" title="m:Wikipedia">Wikipedia</a>.</td> </tr></tbody></table> </div><style data-mw-deduplicate="TemplateStyles:r2414743">.mw-parser-output .projectbox{float:right;clear:right;margin:5px 0 5px 5px;border-width:1px;border-style:solid}.mw-parser-output .projectbox-table{border:0;border-collapse:collapse;border-spacing:0;margin:0;width:228px}.mw-parser-output .projectbox-image{border:0;text-align:center;width:45px;height:45px}.mw-parser-output .projectbox-text{border:0;font-size:8pt;line-height:1.25em;padding:0.5em}@media screen and (max-width:720px){.mw-parser-output .projectbox{margin:5px 0}}</style> <ul><li><a href="/wiki/Internet_Fundamentals/HTML" title="Internet Fundamentals/HTML">Internet Fundamentals/HTML</a></li> <li><a href="/wiki/Web_design" title="Web design">Web design</a></li> <li><a href="/wiki/Web_Foundations" title="Web Foundations">Web Foundations</a></li> <li><a href="/wiki/HTML5" class="mw-redirect" title="HTML5">HTML5</a></li> <li><a href="/wiki/Exam_98-375:_HTML5_Application_Development_Fundamentals" title="Exam 98-375: HTML5 Application Development Fundamentals">Exam 98-375: HTML5 Application Development Fundamentals</a></li> <li><a href="/wiki/Exam_98-383:_Introduction_to_Programming_using_HTML_and_CSS" title="Exam 98-383: Introduction to Programming using HTML and CSS">Exam 98-383: Introduction to Programming using HTML and CSS</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML&veaction=edit&section=6" title="Edit section: External links" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML&action=edit&section=6" title="Edit section's source code: External links"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a rel="nofollow" class="external text" href="http://www.yourhtmlsource.com/">HTMLSource</a></li> <li><a rel="nofollow" class="external text" href="http://htmldog.com/guides/htmlbeginner/">htmldog</a></li> <li><a rel="nofollow" class="external text" href="http://webdeconstructor.com/">WebDeconstructor</a></li> <li><a rel="nofollow" class="external text" href="https://www.w3schools.com/tryit/">Online HTML Editor</a></li> <li><a rel="nofollow" class="external text" href="https://css-tricks.com/where-do-you-learn-html-css-in-2020/">Where Do You Learn HTML and CSS in 2020?</a></li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikiversity.org/w/index.php?title=HTML&oldid=2649996">https://en.wikiversity.org/w/index.php?title=HTML&oldid=2649996</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:HTML" title="Category:HTML">HTML</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden category: <ul><li><a href="/wiki/Category:Resources_with_related_material_at_Wikipedia" title="Category:Resources with related material at Wikipedia">Resources with related material at Wikipedia</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 30 August 2024, at 22:41.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="//creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy.</a></li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikiversity:About">About Wikiversity</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikiversity:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikiversity.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikiversity.org/w/index.php?title=HTML&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-98hqk","wgBackendResponseTime":129,"wgPageParseReport":{"limitreport":{"cputime":"0.046","walltime":"0.474","ppvisitednodes":{"value":186,"limit":1000000},"postexpandincludesize":{"value":1372,"limit":2097152},"templateargumentsize":{"value":111,"limit":2097152},"expansiondepth":{"value":7,"limit":100},"expensivefunctioncount":{"value":2,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":2255,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 21.322 1 Template:Wikipedia","100.00% 21.322 1 -total"," 84.58% 18.034 1 Template:Projectbox"," 12.42% 2.649 1 Template:Robelbox/C2"," 11.62% 2.477 1 Template:Robelbox/C1"," 10.26% 2.188 1 Template:Robelbox/C3"]},"cachereport":{"origin":"mw-web.eqiad.main-64476968cd-b4ltj","timestamp":"20241101164800","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"HTML","url":"https:\/\/en.wikiversity.org\/wiki\/HTML","sameAs":"http:\/\/www.wikidata.org\/entity\/Q8811","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q8811","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2006-09-16T07:45:07Z","dateModified":"2024-08-30T22:41:02Z","image":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/4d\/Html.png","headline":"family of markup languages for displaying information viewable in a web browser"}</script> </body> </html>