CINXE.COM
HTML Elements
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html elements, tutorial, free, tables, forms, fonts, color, image maps, hyperlinks"> <meta name="Description" content="Learn about HTML Elements with this HTML tutorial."> <link rel="canonical" href="https://www.quackit.com/html/tutorial/html_elements.cfm"> <title>HTML Elements</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML Elements</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/article_header --> <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/html/tutorial/getting_started.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Getting Started</a></li> <li><a href="/html/tutorial/html_formatting.cfm">HTML Formatting <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags.</p> <p>An <dfn>HTML element</dfn> is an individual component of an HTML document. Any given web page consists of many HTML elements.</p> <p><dfn>HTML tags</dfn> tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.</p> <p>HTML consists of <a href="/html/tags/">over 100 tags</a>. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.</p> <div class="ad"> <!-- GAM 71161633/QCKIT_quackit/article_incontent_1 --> <div data-fuse="23059883629"></div> </div> <p>OK, lets look more closely at the example that we created in the previous lesson.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<h1>My First Website</h1>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/tutorial/getting_started_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Explanation of the above code:</p> <ul> <li>The <a href="/html/tags/html_doctype_tag.cfm"><code class="tag">!DOCTYPE... </code></a> declaration tells the browser which version of HTML the document is using.</li> <li>The <a href="/html/tags/html_html_tag.cfm"><code class="tag">html</code></a> element is the document's <i>root</i> element - it can be thought of as a container that all other tags sit inside (except for the !DOCTYPE declaration).</li> <li>The <a href="/html/tags/html_head_tag.cfm"><code class="tag">head</code></a> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <a href="/html/tags/html_title_tag.cfm"><code class="tag">title</code></a> tag is an exception to this. The content of the <code class="tag">title</code> tag is displayed in the browser's title bar (right at the very top of the browser).</li> <li>The <a href="/html/tags/html_body_tag.cfm"><code class="tag">body</code></a> tag is the main area for your content. This is where most of your code (and viewable elements) will go.</li> <li>The <a href="/html/tags/html_h1_tag.cfm"><code class="tag">h1</code></a> tag defines a level 1 heading.</li> <li>The <a href="/html/tags/html_p_tag.cfm"><code class="tag">p</code></a> tag defines a paragraph. This contains the body text.</li> </ul> <h2>Closing your Tags</h2> <p>As mentioned in a previous lesson, you'll notice that all of these HTML elements have opening and closing tags, and that the content of the element is placed in between them. There are a few exceptions to this rule.</p> <p>You'll also notice that the closing tag is slightly different to the opening tag — the closing tag contains a forward slash (<code>/</code>) after the <code><</code>. This tells the browser that this tag closes the previous one.</p> <h2>Indents and Carriage Returns</h2> <p>You can indent the code and add extra carriage returns if you like. This can help with readability, and it doesn't affect the way the page is displayed in the browser.</p> <p>In fact, code indenting is a universal practice in computer programming circles, and most HTML editors automatically indent the code for you as you type.</p> <p>For example, we could take the above example, and indent it like the following example, and it will still appear the same in the browser.</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<html>
 <head>
 <title>HTML Tutorial Example</title>
 </head>
 <body>
 <h1>My First Website</h1>
 <p>Less than 5 minutes into this HTML tutorial and
 I've already created my first homepage!</p>
 </body>
</html></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/tutorial/getting_started_example_with_indenting_the_code" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>UPPERCASE or lowercase?</h2> <p>You can use uppercase or lowercase when coding HTML, however, most developers use lowercase. This helps the readability of your code, and it also saves you from constantly switching between upper and lower case. Lowercase also helps keep your code XML compliant (if you're using <a href="/xhtml/xhtml_tutorial.cfm">XHTML</a>), but but that's another topic.</p> <p>Therefore...</p> <ul> <li><b>Good:</b> <code class="tag">head</code></li> <li><b>OK:</b> <code class="tag">HEAD</code></li> </ul> <h2>Optional Tags</h2> <p>Some of the above tags are optional in certain situations. In particular, the <a href="/html/tags/html_html_tag.cfm"><code class="tag">html</code></a>, <a href="/html/tags/html_head_tag.cfm"><code class="tag">head</code></a>, and <a href="/html/tags/html_body_tag.cfm"><code class="tag">body</code></a> tags can all be omitted.</p> <p>So it would be perfectly valid to change the above example to this:</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>HTML Tutorial Example</title>
<h1>My First Website</h1>
<p>Less than 5 minutes into this HTML tutorial and 
I've already created my first homepage!</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/tutorial/getting_started_example_with_removed_tags" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>However, there are some very specific rules around when you can and can't do this. For example, the <a href="/html/tags/html_html_tag.cfm"><code class="tag">html</code></a> start tag can be omitted if it's not immediately followed by a comment, and the same applies to its end tag. And the <a href="/html/tags/html_head_tag.cfm"><code class="tag">head</code></a> element's start tag can only be omitted if the element is empty, or if the first thing inside the element is an element. And its end tag can only be omitted if the element is not immediately followed by a space character or a comment. The body element also has its own specific rules for omitting tags.</p> <p>If you're interested in learning which tags you can leave out, check the <a href="https://www.w3.org/TR/html51/syntax.html#optional-tags">HTML specification</a> for the rules around the specific tags you'd like to omit.</p> <p>If you're not sure whether or not it's OK to omit a tag, just include all tags (like in the first example).</p> <aside class="info"> <p>Omitting an element's start tag does not mean that it's not present in the HTML document when you view it in a browser. The browser still generates the element behind the scenes.</p> </aside> <p>In the next lesson, we learn about some of the more common formatting tags.</p> <ul class="pager"> <li><a href="/html/tutorial/getting_started.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Getting Started</a></li> <li><a href="/html/tutorial/html_formatting.cfm">HTML Formatting <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/html/tutorial/">HTML Tutorial</a></h3> <ul> <li><a href="/html/tutorial/introduction.cfm">Introduction to HTML</a></li> <li><a href="/html/tutorial/getting_started.cfm">Getting Started</a></li> <li><a href="/html/tutorial/html_elements.cfm">HTML Elements</a></li> <li><a href="/html/tutorial/html_formatting.cfm">HTML Formatting & Semantics</a></li> <li><a href="/html/tutorial/html_attributes.cfm">HTML Attributes</a></li> <li><a href="/html/tutorial/html_styles.cfm">HTML Styles</a></li> <li><a href="/html/tutorial/html_colors.cfm">HTML Colors</a></li> <li><a href="/html/tutorial/html_links.cfm">HTML Links</a></li> <li><a href="/html/tutorial/html_images.cfm">HTML Images</a></li> <li><a href="/html/tutorial/html_meta_tags.cfm">HTML Meta Tags</a></li> <li><a href="/html/tutorial/html_comments.cfm">HTML Comments</a></li> <li><a href="/html/tutorial/html_forms.cfm">HTML Forms</a></li> <li><a href="/html/tutorial/html_tables.cfm">HTML Tables</a></li> <li><a href="/html/tutorial/html_image_maps.cfm">HTML Image Maps</a></li> <li><a href="/html/tutorial/html_iframes.cfm">HTML iFrames</a></li> <li><a href="/html/tutorial/html_entities.cfm">HTML Entities</a></li> <li><a href="/html/tutorial/html_layouts.cfm">HTML Layouts</a></li> <li><a href="/html/tutorial/html_scripts.cfm">HTML Scripts</a></li> <li><a href="/html/tutorial/html_website_templates.cfm">HTML Website Templates</a></li> <li><a href="/html/tutorial/website_hosting.cfm">Website Hosting</a></li> <li><a href="/html/tutorial/summary.cfm">Summary</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_2 --> <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_1 --> <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>