Bembew Programming
Home Topics Guides
Bembew Programming
Home Topics Guides

HTML Basics Learning Guide

HTML Basics Learning Guide
    • A Comprehensive Guide to HTML Tags
    • Configuring the head in VuePress
    • Controlling Access with the `meta` Attribute in Advanced Vue Router Scenarios
    • Distributed IDs
    • Text Tags: Title, Paragraph, Link
    • Image Tags: img and Image Attributes
    • List Tags: Unordered Lists and Ordered Lists
    • Table Tags: Tables, Rows, and Cells
    • Form Labels: Input Fields, Text Areas, and Buttons
    • The Role of the Tag</a></li> <li><a href="/en/article/content-inside-the-body-tag.html?guide-code=html" class="sidebar-article-link">Content Inside the <body> Tag</a></li> <li><a href="/en/article/using-the-header-tag.html?guide-code=html" class="sidebar-article-link">Using the <header> Tag</a></li> <li><a href="/en/article/using-the-nav-tag.html?guide-code=html" class="sidebar-article-link">Using the <nav> Tag</a></li> <li><a href="/en/article/using-the-main-tag.html?guide-code=html" class="sidebar-article-link">Using the <main> Tag</a></li> <li><a href="/en/article/using-the-article-tag.html?guide-code=html" class="sidebar-article-link">Using the <article> Tag</a></li> <li><a href="/en/article/using-the-aside-tag.html?guide-code=html" class="sidebar-article-link">Using the <aside> Tag</a></li> <li><a href="/en/article/using-the-footer-tag.html?guide-code=html" class="sidebar-article-link">Using the <footer> Tag</a></li> <li><a href="/en/article/using-the-class-attribute-in-html.html?guide-code=html" class="sidebar-article-link">Using the class Attribute in HTML</a></li> <li><a href="/en/article/using-the-style-attribute-in-css.html?guide-code=html" class="sidebar-article-link">Using the style Attribute in CSS</a></li> <li><a href="/en/article/using-the-src-attribute.html?guide-code=html" class="sidebar-article-link">Using the src Attribute</a></li> <li><a href="/en/article/using-the-href-attribute.html?guide-code=html" class="sidebar-article-link">Using the href Attribute</a></li> <li><a href="/en/article/secure-usage-of-the-html5-canvas-element.html?guide-code=html" class="sidebar-article-link">Secure Usage of the HTML5 Canvas Element</a></li> <li><a href="/en/article/css-selectors.html?guide-code=html" class="sidebar-article-link">CSS Selectors</a></li> <li><a href="/en/article/mobile-adaptation.html?guide-code=html" class="sidebar-article-link">Mobile Adaptation</a></li> <li><a href="/en/article/image-optimization.html?guide-code=html" class="sidebar-article-link">Image Optimization</a></li> <li><a href="/en/article/installing-and-configuring-node-js-for-nuxt-js-vue-react-next-js-rust-mongodb-sql-vuex.html?guide-code=html" class="sidebar-article-link">Installing and Configuring Node.js for Nuxt.js, Vue, React, Next.js, Rust, MongoDB, SQL, Vuex</a></li> <li><a href="/en/article/html5-overview.html?guide-code=html" class="sidebar-article-link">HTML5 Overview</a></li> <li><a href="/en/article/semantic-html5-tags.html?guide-code=html" class="sidebar-article-link">Semantic HTML5 Tags</a></li> <li><a href="/en/article/form-elements-input-textarea-select.html?guide-code=html" class="sidebar-article-link">Form Elements (Input, Textarea, Select)</a></li> <li><a href="/en/article/multimedia-elements-audio-and-video.html?guide-code=html" class="sidebar-article-link">Multimedia Elements (Audio and Video)</a></li> <li><a href="/en/article/html5-form-structure.html?guide-code=html" class="sidebar-article-link">HTML5 Form Structure</a></li> <li><a href="/en/article/form-validation-required-minlength-maxlength.html?guide-code=html" class="sidebar-article-link">Form Validation (required, minlength, maxlength)</a></li> <li><a href="/en/article/custom-form-validation.html?guide-code=html" class="sidebar-article-link">Custom Form Validation</a></li> <li><a href="/en/article/client-side-and-server-side-validation.html?guide-code=html" class="sidebar-article-link">Client-Side and Server-Side Validation</a></li> <li><a href="/en/article/using-audio-and-video-tags.html?guide-code=html" class="sidebar-article-link">Using Audio and Video Tags</a></li> <li><a href="/en/article/controlling-the-video-player.html?guide-code=html" class="sidebar-article-link">Controlling the Video Player</a></li> <li><a href="/en/article/html5-animation-with-canvas-api.html?guide-code=html" class="sidebar-article-link">HTML5 Animation with Canvas API</a></li> <li><a href="/en/article/overview-of-responsive-design.html?guide-code=html" class="sidebar-article-link">Overview of Responsive Design</a></li> <li><a href="/en/article/the-viewport-tag-in-html.html?guide-code=html" class="sidebar-article-link">The Viewport Tag in HTML</a></li> <li><a href="/en/article/media-queries.html?guide-code=html" class="sidebar-article-link">Media Queries</a></li> <li><a href="/en/article/responsive-design.html?guide-code=html" class="sidebar-article-link">Responsive Design</a></li> <li><a href="/en/article/ui-design-principles.html?guide-code=html" class="sidebar-article-link">UI Design Principles</a></li> <li><a href="/en/article/combining-html-and-css.html?guide-code=html" class="sidebar-article-link">Combining HTML and CSS</a></li> <li><a href="/en/article/essential-web-design-techniques.html?guide-code=html" class="sidebar-article-link">Essential Web Design Techniques</a></li> <li><a href="/en/article/canvas-api.html?guide-code=html" class="sidebar-article-link">Canvas API</a></li> <li><a href="/en/article/svg-graphics.html?guide-code=html" class="sidebar-article-link">SVG Graphics</a></li> <li><a href="/en/article/accessibility-testing.html?guide-code=html" class="sidebar-article-link">Accessibility Testing</a></li> </ul> </li> </ul> </div> </div> </aside> <main class="main-content sidebar-content toc-content"> <div class="article-content"> <nav class="breadcrumb-nav" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/en/guide/index.html">Guides</a></li> <li class="breadcrumb-item"><a href="/en/guide/html.html">HTML Basics Learning Guide</a></li> <li class="breadcrumb-item active">A Comprehensive Guide to HTML Tags</li> </ol> </nav> <h1>A Comprehensive Guide to HTML Tags</h1> <div class="article-body"><p>HTML (HyperText Markup Language) is the cornerstone of web content construction. At its essence, it is a markup language rather than a programming language. Unlike Python or JavaScript, HTML does not perform any logical operations; instead, it describes the structure and semantics of a document through a series of predefined tags. Each tag represents a specific element used to define text hierarchy, styling, and interactive behavior. Mastering HTML tags is not only the key entry point for front-end development but also the foundation for understanding modern web architecture. This article systematically reviews the most common and core types of HTML tags to help developers establish a clear knowledge framework.</p> <h2 id="basic-structure-tags-building-the-document-skeleto">Basic Structure Tags: Building the Document Skeleton</h2> <p>Any valid HTML document must contain specific starting and ending tags, which constitute the "skeleton" of the webpage. The outermost layer must include the <code><!DOCTYPE html></code> declaration, which informs the browser which HTML version to use for rendering the page, thereby ensuring the correct rendering mode. Immediately following this is the <code><html></code> tag, which acts as the root element wrapping all other content and typically includes a <code>lang</code> attribute to specify the document's language.</p> <p>Inside the <code><html></code> element, there are two core sections:</p> <ul> <li><strong>Header Area</strong>: Wrapped by the <code><head></code> tag, it stores metadata not directly visible to users, such as character encoding, browser compatibility settings, and links to critical CSS style sheets.</li> <li><strong>Body Area</strong>: Wrapped by the <code><body></code> tag, it contains all visible content, including text, images, videos, and interactive components.</li> </ul> <p>Additionally, semantic tags like <code><header></code>, <code><nav></code>, <code><main></code>, and <code><footer></code> are increasingly widely adopted. They express the logical relationships of page content more clearly than traditional <code>div</code> elements, aiding in Search Engine Optimization (SEO) and accessibility.</p> <h2 id="text-and-paragraph-organization-tags">Text and Paragraph Organization Tags</h2> <p>The foundation of web content is text, and HTML provides a series of tags to format how text is displayed. For paragraphs, the most basic tag is <code><p></code>, which automatically adds spacing above and below to distinguish different paragraphs. If special text spanning multiple lines is needed, the <code><br></code> tag can be used; this is a self-closing tag and does not need to appear in pairs.</p> <p>Besides paragraphs, there are several tags for emphasis and grouping:</p> <ul> <li><strong>Title Hierarchy</strong>: From <code><h1></code> to <code><h6></code>, six levels of titles are defined. <code><h1></code> is the most important and usually serves as the main page title; lower hierarchy levels indicate more detailed subtitles.</li> <li><strong>Quotes and Annotations</strong>: <code><blockquote></code> is used to quote external text, typically adding a quotation mark marker on the left side; <code><hr></code> is used to visually separate different content blocks.</li> <li><strong>List Structures</strong>: Unordered lists <code><ul></code> combined with <code><li></code> generate bullet point lists, while ordered lists <code><ol></code> combined with <code><li></code> generate numbered lists. These tags not only enhance readability but are also key tools for building navigation menus and step-by-step instructions.</li> </ul> <h2 id="multimedia-and-media-element-tags">Multimedia and Media Element Tags</h2> <p>Modern webpages are no longer just stacks of static text; the display of multimedia content has become standard. HTML5 introduced new semantic multimedia tags, greatly simplifying resource referencing and processing workflows.</p> <p>The core media tags include:</p> <ul> <li><strong>Images</strong>: <code><img></code> is a self-closing tag that must include the <code>src</code> attribute pointing to the image path and the <code>alt</code> attribute to describe the image content (crucial for screen readers).</li> <li><strong>Video and Audio</strong>: <code><video></code> and <code><audio></code> tags allow users to play audio and video files directly. They support providing different format or quality files for browser selection via nested <code><source></code> tags, and can enable built-in player controls through the <code>controls</code> attribute.</li> <li><strong>Embedded Content</strong>: The <code><iframe></code> tag is used to embed another independent HTML document within a page, commonly used to display maps, forum posts, or third-party application interfaces.</li> </ul> <p>These tags not only solve resource loading issues but also enhance page accessibility and search engines' ability to understand media content through semantic descriptions.</p> <h2 id="forms-and-user-interaction-tags">Forms and User Interaction Tags</h2> <p>HTML serves as the core bridge connecting front-end and back-end data, where forms (Forms) are responsible for collecting user input. Building a fully functional form requires the coordination of various tags:</p> <ul> <li><strong>Input Controls</strong>: <code><input></code> is the most flexible tag; through the <code>type</code> attribute, it can specify various input modes such as text, password, email, date, etc.; <code><textarea></code> is used for multi-line text input; <code><select></code> combined with <code><option></code> creates dropdown selection boxes.</li> <li><strong>Buttons and Actions</strong>: The <code><button></code> tag is used to trigger form submission or execute specific actions; its <code>type</code> attribute can be set to <code>submit</code> (default), <code>reset</code>, or custom behavior.</li> <li><strong>Auxiliary Controls</strong>: The <code><label></code> tag is used to associate with input fields, improving the click experience; <code><fieldset></code> and <code><legend></code> are used to group and display a related set of form controls.</li> </ul> <p>In practical development, reasonably pairing these tags not only achieves the expected interaction logic but also ensures good operational feedback on mobile devices.</p> <h2 id="summary-and-best-practice-recommendations">Summary and Best Practice Recommendations</h2> <p>The HTML tag system is vast and constantly evolving, but its core principle remains unchanged: describing content through semantic structure. When selecting tags, developers should prioritize the meaning of the content over mere visual presentation. For example, prefer using <code><article></code> instead of <code><div></code> to mark independent article content, or use the <code><time></code> tag to replace simple text date descriptions.</p> <p>Furthermore, maintaining code conciseness and consistency is crucial. Avoid excessive nesting of tags, ensuring each tag has a clear closing or self-closing attribute. As web standards update, continuously learning new semantic tags (such as <code><dialog></code>, <code><details></code>) will help build more robust, accessible, and easy-to-maintain front-end applications. Mastering these basic tags will lay a solid foundation for subsequently learning CSS styling and JavaScript interaction logic.</p> </div> </div> </main> <aside class="toc-sidebar" id="tocSidebar"> <div class="toc-sidebar-inner"> <div class="toc-title">On This Page</div> <nav class="toc-nav"> <ul> <li class="toc-level-2"><a href="#basic-structure-tags-building-the-document-skeleto">Basic Structure Tags: Building the Document Skeleton</a> </li> <li class="toc-level-2"><a href="#text-and-paragraph-organization-tags">Text and Paragraph Organization Tags</a> </li> <li class="toc-level-2"><a href="#multimedia-and-media-element-tags">Multimedia and Media Element Tags</a> </li> <li class="toc-level-2"><a href="#forms-and-user-interaction-tags">Forms and User Interaction Tags</a> </li> <li class="toc-level-2"><a href="#summary-and-best-practice-recommendations">Summary and Best Practice Recommendations</a> </li> </ul> </nav> </div> </aside> </div> <footer class="site-footer"> <div class="footer-sites"> <span class="footer-sites-label">Recommended Sites</span> <a href="https://math.bembew.com/en/index.html" target="_blank" rel="noopener">Mathematics</a> <span class="footer-sep">·</span> <a href="https://physics.bembew.com/en/index.html" target="_blank" rel="noopener">Physics</a> <span class="footer-sep">·</span> <a href="https://economics.bembew.com/en/index.html" target="_blank" rel="noopener">Economics</a> <span class="footer-sep">·</span> <a href="https://chemistry.bembew.com/en/index.html" target="_blank" rel="noopener">Chemistry</a> <span class="footer-sep">·</span> <a href="https://biology.bembew.com/en/index.html" target="_blank" rel="noopener">Biology</a> </div> <div class="footer-meta"> <a href="/en/info/about-website.html">About This Site</a> <span class="footer-sep">·</span> <a href="/en/info/privacy.html">Privacy Policy</a> <span class="footer-sep">·</span> <span>© 2025-2026 Bembew - All rights reserved</span> </div> </footer> <div id="cookieConsent" class="cookie-consent" role="region" aria-label="Cookie notice" style="display:none"> <div class="cookie-consent-inner"> <p class="cookie-consent-text">This website uses strictly necessary cookies to keep it secure and functioning (e.g., access control and bot protection), and collects limited anonymous technical data via our CDN. We do not use advertising or tracking cookies. See our <a href="/en/info/privacy.html">Privacy Policy</a>.</p> <button id="cookieConsentAccept" class="cookie-consent-btn" type="button">OK</button> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/katex.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { if (typeof renderMathInElement === 'function') { renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\(', right: '\\)', display: false}, {left: '\[', right: '\]', display: true} ], throwOnError: false, strict: false, trust: true }); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { var headings = document.querySelectorAll('.article-body h1[id], .article-body h2[id], .article-body h3[id], .article-body h4[id], .article-body h5[id], .article-body h6[id]'); var tocLinks = document.querySelectorAll('.toc-nav a'); if (headings.length === 0 || tocLinks.length === 0) return; // Highlight current heading on scroll using IntersectionObserver if ('IntersectionObserver' in window) { var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var id = entry.target.getAttribute('id'); tocLinks.forEach(function(link) { var isActive = link.getAttribute('href') === '#' + id; link.classList.toggle('active', isActive); }); } }); }, { rootMargin: '-80px 0px -70% 0px', threshold: 0 }); headings.forEach(function(h) { observer.observe(h); }); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { // Close language dropdown and mobile menu when clicking outside document.addEventListener('click', function(e) { var langMenu = document.getElementById('langMenu'); var langToggle = document.querySelector('.lang-dropdown-toggle'); if (langMenu && langMenu.classList.contains('show') && !langMenu.contains(e.target) && !langToggle.contains(e.target)) { langMenu.classList.remove('show'); } var mobileMenu = document.getElementById('mobileMenu'); var menuTrigger = document.getElementById('menuTrigger'); if (mobileMenu && mobileMenu.classList.contains('active') && !mobileMenu.contains(e.target) && !menuTrigger.contains(e.target)) { mobileMenu.classList.remove('active'); } }); // Close mobile menu when clicking a link inside it var mobileMenu = document.getElementById('mobileMenu'); if (mobileMenu) { mobileMenu.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { mobileMenu.classList.remove('active'); }); }); } // Close TOC overlay when clicking a link inside it (mobile) var tocSidebar = document.getElementById('tocSidebar'); if (tocSidebar) { tocSidebar.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { closeToc(); }); }); } // Close sidebar overlay when clicking a link inside it (mobile) var articleSidebar = document.getElementById('articleSidebar'); if (articleSidebar) { articleSidebar.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { closeSidebar(); }); }); } // Topic 详情页 Tab 切换(介绍 / 指南) var topicTabs = document.querySelector('.topic-tabs'); if (topicTabs) { var topicTabButtons = topicTabs.querySelectorAll('.topic-tab'); var topicTabPanels = topicTabs.querySelectorAll('.topic-tab-panel'); topicTabButtons.forEach(function(tab) { tab.addEventListener('click', function() { var key = tab.getAttribute('data-tab'); topicTabButtons.forEach(function(btn) { var on = btn === tab; btn.classList.toggle('active', on); btn.setAttribute('aria-selected', on ? 'true' : 'false'); }); topicTabPanels.forEach(function(panel) { panel.classList.toggle('active', panel.getAttribute('data-panel') === key); }); }); }); } }); // Mobile sidebar toggle (article page) function toggleSidebar() { var sidebar = document.getElementById('articleSidebar'); var overlay = document.getElementById('sidebarOverlay'); if (sidebar) sidebar.classList.toggle('open'); if (overlay) overlay.classList.toggle('show'); } function closeSidebar() { var sidebar = document.getElementById('articleSidebar'); var overlay = document.getElementById('sidebarOverlay'); if (sidebar) sidebar.classList.remove('open'); if (overlay) overlay.classList.remove('show'); } // Mobile TOC toggle function toggleToc() { var toc = document.getElementById('tocSidebar'); var overlay = document.getElementById('tocOverlay'); if (toc) toc.classList.toggle('open'); if (overlay) overlay.classList.toggle('show'); } function closeToc() { var toc = document.getElementById('tocSidebar'); var overlay = document.getElementById('tocOverlay'); if (toc) toc.classList.remove('open'); if (overlay) overlay.classList.remove('show'); } </script> <script> (function() { try { if (localStorage.getItem('cookie_consent')) return; var el = document.getElementById('cookieConsent'); var btn = document.getElementById('cookieConsentAccept'); if (!el || !btn) return; el.style.display = 'block'; btn.addEventListener('click', function() { try { localStorage.setItem('cookie_consent', 'v1'); } catch (e) {} el.style.display = 'none'; }); } catch (e) {} })(); </script> <script> !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"KNg95ReuAl9m0Oxc",ck:"KNg95ReuAl9m0Oxc"}); </script> </body> </html>