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"> <div class="topic-detail"> <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 active">HTML Basics Learning Guide</li> </ol> </nav> <h1>HTML Basics Learning Guide</h1> <div class="topic-intro"><h1>Get Started with HTML Basics</h1> <p>Welcome to your journey into web development. This guide is designed to take you from zero to proficiency in <strong>HTML</strong>, the backbone of every website on the internet. Whether you are a complete beginner or looking to refresh your knowledge, this resource provides a clear, step-by-step path to mastering the language that powers the web.</p> <h2>Core Concepts and Structure</h2> <p>At its heart, HTML stands for <strong>HyperText Markup Language</strong>. It is not a programming language in the traditional sense, but a set of rules for describing the structure of a web page. You will learn how to use various <strong>tags</strong> to define elements like headings, paragraphs, lists, and images. Understanding the document structure is crucial, as it involves knowing where to place the <code><head></code> section, <code><body></code> content, and meta tags to ensure your page renders correctly across all browsers.</p> <h2>Semantic and Modern Practices</h2> <p>Modern web development goes beyond simple formatting. We will dive into <strong>semantic HTML</strong>, which uses meaningful tags (like <code><article></code>, <code><nav></code>, and <code><section></code>) to convey the purpose of content. This approach improves accessibility for users with disabilities and helps search engines understand your site better. We also cover the latest standards in <strong>HTML5</strong>, introducing new elements that allow for richer media embedding and interactive capabilities.</p> <h2>Building Your First Pages</h2> <p>By the end of this guide, you will be ready to <strong>build simple web pages</strong> from scratch. You'll learn how to customize content, link resources, and structure information logically. This foundational knowledge is essential for advancing into <strong>Cascading Style Sheets (CSS)</strong> and <strong>JavaScript</strong>, opening the door to creating dynamic, responsive, and beautiful user interfaces. Start coding today and unlock the full potential of web development.</p> </div> <div class="guide-tree"> <div class="guide-tree-chapter"> <h2 class="guide-tree-chapter-title">HTML Basics Learning Guide</h2> <div class="guide-tree-section"> <h3 class="guide-tree-section-title"></h3> <ul class="guide-tree-articles"> <li><a href="/en/article/a-comprehensive-guide-to-html-tags.html?guide-code=html">A Comprehensive Guide to HTML Tags</a></li> <li><a href="/en/article/configuring-the-head-in-vuepress.html?guide-code=html">Configuring the head in VuePress</a></li> <li><a href="/en/article/controlling-access-with-the-meta-attribute-in-advanced-vue-router-scenarios.html?guide-code=html">Controlling Access with the `meta` Attribute in Advanced Vue Router Scenarios</a></li> <li><a href="/en/article/distributed-ids.html?guide-code=html">Distributed IDs</a></li> <li><a href="/en/article/text-tags-title-paragraph-link.html?guide-code=html">Text Tags: Title, Paragraph, Link</a></li> <li><a href="/en/article/image-tags-img-and-image-attributes.html?guide-code=html">Image Tags: img and Image Attributes</a></li> <li><a href="/en/article/list-tags-unordered-lists-and-ordered-lists.html?guide-code=html">List Tags: Unordered Lists and Ordered Lists</a></li> <li><a href="/en/article/table-tags-tables-rows-and-cells.html?guide-code=html">Table Tags: Tables, Rows, and Cells</a></li> <li><a href="/en/article/form-labels-input-fields-text-areas-and-buttons.html?guide-code=html">Form Labels: Input Fields, Text Areas, and Buttons</a></li> <li><a href="/en/article/the-role-of-the-title-tag.html?guide-code=html">The Role of the <title> Tag</a></li> <li><a href="/en/article/content-inside-the-body-tag.html?guide-code=html">Content Inside the <body> Tag</a></li> <li><a href="/en/article/using-the-header-tag.html?guide-code=html">Using the <header> Tag</a></li> <li><a href="/en/article/using-the-nav-tag.html?guide-code=html">Using the <nav> Tag</a></li> <li><a href="/en/article/using-the-main-tag.html?guide-code=html">Using the <main> Tag</a></li> <li><a href="/en/article/using-the-article-tag.html?guide-code=html">Using the <article> Tag</a></li> <li><a href="/en/article/using-the-aside-tag.html?guide-code=html">Using the <aside> Tag</a></li> <li><a href="/en/article/using-the-footer-tag.html?guide-code=html">Using the <footer> Tag</a></li> <li><a href="/en/article/using-the-class-attribute-in-html.html?guide-code=html">Using the class Attribute in HTML</a></li> <li><a href="/en/article/using-the-style-attribute-in-css.html?guide-code=html">Using the style Attribute in CSS</a></li> <li><a href="/en/article/using-the-src-attribute.html?guide-code=html">Using the src Attribute</a></li> <li><a href="/en/article/using-the-href-attribute.html?guide-code=html">Using the href Attribute</a></li> <li><a href="/en/article/secure-usage-of-the-html5-canvas-element.html?guide-code=html">Secure Usage of the HTML5 Canvas Element</a></li> <li><a href="/en/article/css-selectors.html?guide-code=html">CSS Selectors</a></li> <li><a href="/en/article/mobile-adaptation.html?guide-code=html">Mobile Adaptation</a></li> <li><a href="/en/article/image-optimization.html?guide-code=html">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">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">HTML5 Overview</a></li> <li><a href="/en/article/semantic-html5-tags.html?guide-code=html">Semantic HTML5 Tags</a></li> <li><a href="/en/article/form-elements-input-textarea-select.html?guide-code=html">Form Elements (Input, Textarea, Select)</a></li> <li><a href="/en/article/multimedia-elements-audio-and-video.html?guide-code=html">Multimedia Elements (Audio and Video)</a></li> <li><a href="/en/article/html5-form-structure.html?guide-code=html">HTML5 Form Structure</a></li> <li><a href="/en/article/form-validation-required-minlength-maxlength.html?guide-code=html">Form Validation (required, minlength, maxlength)</a></li> <li><a href="/en/article/custom-form-validation.html?guide-code=html">Custom Form Validation</a></li> <li><a href="/en/article/client-side-and-server-side-validation.html?guide-code=html">Client-Side and Server-Side Validation</a></li> <li><a href="/en/article/using-audio-and-video-tags.html?guide-code=html">Using Audio and Video Tags</a></li> <li><a href="/en/article/controlling-the-video-player.html?guide-code=html">Controlling the Video Player</a></li> <li><a href="/en/article/html5-animation-with-canvas-api.html?guide-code=html">HTML5 Animation with Canvas API</a></li> <li><a href="/en/article/overview-of-responsive-design.html?guide-code=html">Overview of Responsive Design</a></li> <li><a href="/en/article/the-viewport-tag-in-html.html?guide-code=html">The Viewport Tag in HTML</a></li> <li><a href="/en/article/media-queries.html?guide-code=html">Media Queries</a></li> <li><a href="/en/article/responsive-design.html?guide-code=html">Responsive Design</a></li> <li><a href="/en/article/ui-design-principles.html?guide-code=html">UI Design Principles</a></li> <li><a href="/en/article/combining-html-and-css.html?guide-code=html">Combining HTML and CSS</a></li> <li><a href="/en/article/essential-web-design-techniques.html?guide-code=html">Essential Web Design Techniques</a></li> <li><a href="/en/article/canvas-api.html?guide-code=html">Canvas API</a></li> <li><a href="/en/article/svg-graphics.html?guide-code=html">SVG Graphics</a></li> <li><a href="/en/article/accessibility-testing.html?guide-code=html">Accessibility Testing</a></li> </ul> </div> </div> </div> </div> </main> </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() { // 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>