Mastering HTML: A Comprehensive Guide to the Basics
Mastering HTML: A Comprehensive Guide to the Basics
Introduction
HTML stands for Hyper Text Markup Language. It is the standard markup language used to create web pages. A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text. In other words, HTML is a way of adding ‘markups’ to plain text to allow browsers to render the text as a webpage with structures such as headers, paragraphs, and tables. Learning HTML is the first step in creating websites and web applications.
HTML Document Structure
An HTML document begins with a document type declaration that tells the browser that this is an HTML5 document (the current version of HTML). The document itself starts with an opening tag and ends with a closing tag. Inside the HTML tags, the document is divided into two main parts: the head and the body
.
Head Section
Enclosed in and tags, the head section usually includes metadata that’s not directly visible on the webpage. Metadata often includes the title of the webpage (written within the
tags), links to external CSS files, and other settings.
<h3 class="wp-block-heading">Body Section</h3>
<p>Located between the and tags, the body section includes the content visible to web users like texts, images, links, tables, lists, and more. The order of your HTML elements in the body section reflects the order which they will be loaded and displayed by the user’s web browser.</p>
<h2 class="wp-block-heading">HTML Tags</h2>
<p>HTML tags define the different types of content in an HTML document. A tag is a keyword enclosed in angle brackets . Most HTML tags come in pairs: an opening tag and a closing tag. The closing tag looks just like the opening tag, but it has a forward slash / right after the first bracket.</p>
<p>There are numerous HTML tags for different purposes, some of which are:</p>
<h3 class="wp-block-heading">Heading Tags</h3>
<p>Headings are important in HTML documents to introduce new sections and subsections. HTML provides six levels of headings through the </p><h1> – <h6> tags. The <h1> tag defines the most important heading, and the importance decreases progressively to the least important <h6> tag.
<h3 class="wp-block-heading">Paragraph Tags</h3>
</h6></h1></h6></h1><p>The </p><p> tag defines a paragraph in HTML. Text placed between </p><p> and </p> tags are displayed as a single block of text on a new line.
<h3 class="wp-block-heading">Image Tag</h3>
<p>The tag is used to embed an image in an HTML page. Unlike other tags, it is a self-closing tag which means it doesn’t require a separate closing tag.</p>
<h3 class="wp-block-heading">Link Tag</h3>
<p>The <a> tag creates hyperlinks in HTML pages. This tag requires an ‘href’ attribute, specifying the URL the link should direct to.</a></p>
<p>
<figure class="wp-block-image size-full is-resized"><amp-img src="https://davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg" alt="html basics – Image 2" class="wp-image-2631 amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" width="1280" height="853" srcset="https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?w=1280&ssl=1 1280w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=300%2C200&ssl=1 300w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=1024%2C682&ssl=1 1024w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=768%2C512&ssl=1 768w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=600%2C400&ssl=1 600w" sizes="(max-width: 1000px) 100vw, 1000px" layout="intrinsic" disable-inline-width="" i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg1MyIgd2lkdGg9IjEyODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"></i-amphtml-sizer><noscript><img decoding="async" src="https://davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg" alt="html basics – Image 2" width="1280" height="853" srcset="https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?w=1280&ssl=1 1280w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=300%2C200&ssl=1 300w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=1024%2C682&ssl=1 1024w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=768%2C512&ssl=1 768w, https://i0.wp.com/davidellinger.com/wp-content/uploads/2025/10/g67affa0a63ca7918b2065cb401e7f427df719aaba3efcb4fd6d7c16df8e72f2fc541651749be0b7f47b98968e6d7838fe1732f1d5eb21cfc2d21e8fc9afc7c1a_1280.jpg?resize=600%2C400&ssl=1 600w" sizes="(max-width: 1000px) 100vw, 1000px"></noscript></amp-img></figure>
</p>
<h2 class="wp-block-heading">Frequently Asked Questions</h2>
<h3 class="wp-block-heading">1. What is the purpose of the <!DOCTYPE HTML> declaration?</h3>
<p>The declaration assists the browser in correctly rendering an HTML page by telling it that the page should be rendered as an HTML5 document.</p>
<h3 class="wp-block-heading">2. What is a self-closing tag in HTML?</h3>
<p>A self-closing tag is an HTML tag that does not need a separate closing tag. Examples include</p>
<p>for line breaks and for images.</p>
<h3 class="wp-block-heading">3. What is the purpose of the <head> section in an HTML document?</h3>
<p>The head section of an HTML document contains information that is not directly visible on the webpage. It often includes metadata like the webpage title, links to CSS files and other settings.</p>
<h3 class="wp-block-heading">4. How can I add an image to my HTML page?</h3>
<p>To add an image, use the tag with the ‘src’ attribute, specifying the URL or the path of the image. For example, <amp-img src="image.jpg" width="600" height="400" class="amp-wp-unknown-size amp-wp-unknown-width amp-wp-unknown-height amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" layout="intrinsic" i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQwMCIgd2lkdGg9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer><noscript><img decoding="async" src="image.jpg" width="600" height="400"></noscript></amp-img>.</p>
<h3 class="wp-block-heading">5. How can I create a hyperlink in HTML?</h3>
<p>You can create a hyperlink by using the <a> tag with the ‘href’ attribute, specify the URL you want to link to. For example, </a><a href="https://www.google.com" target="_blank" rel="noopener">Google</a> will create a hyperlink to Google.</p>
<p>Learning HTML is like learning the ABCs for web development. Having a sound understanding of HTML basics will provide a strong foundation for further learning in CSS, JavaScript, and other web technologies.</p>
<div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-2632" class="share-facebook sd-button share-icon" href="https://davidellinger.com/mastering-html-a-comprehensive-guide-to-the-basics/?share=facebook&=1" target="_blank" aria-labelledby="sharing-facebook-2632">
<span id="sharing-facebook-2632" hidden>Click to share on Facebook (Opens in new window)</span>
<span>Facebook</span>
</a></li><li class="share-x"><a rel="nofollow noopener noreferrer" data-shared="sharing-x-2632" class="share-x sd-button share-icon" href="https://davidellinger.com/mastering-html-a-comprehensive-guide-to-the-basics/?share=x&=1" target="_blank" aria-labelledby="sharing-x-2632">
<span id="sharing-x-2632" hidden>Click to share on X (Opens in new window)</span>
<span>X</span>
</a></li></ul></div></div></div>
