HTML Structure of a Web Page
HTML, or Hypertext Markup Language, is the standard markup language used to create and structure web pages. It provides the basic building blocks for constructing the content, layout, and overall structure of a web page. Let's explore how HTML structures a web page.
The HTML Document Structure
At the core of an HTML-based web page is the HTML document, which follows a specific structure. The structure consists of the following key elements:
<html>Element: This is the root element of the HTML document, enclosing the entire web page content.<head>Element: The<head>section contains metadata about the web page, such as the page title, character encoding, and links to external resources (e.g., CSS stylesheets, JavaScript files).<body>Element: The<body>section holds the visible content of the web page, including headings, paragraphs, images, links, and other elements that make up the page's structure and layout.
Here's a basic example of an HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<img src="image.jpg" alt="My Image">
</body>
</html>Semantic HTML Elements
HTML provides a set of semantic elements that help structure the content of a web page in a meaningful way. These elements describe the purpose and context of the content, rather than just its visual appearance. Some common semantic elements include:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>: These elements define the different sections and areas of a web page.<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: These elements represent headings, with<h1>being the most important and<h6>the least important.<p>,<ul>,<ol>,<li>: These elements structure the content into paragraphs, unordered lists, ordered lists, and list items.<a>,<img>,<video>,<audio>: These elements are used to add links, images, videos, and audio content to the web page.
Using semantic HTML elements helps search engines and screen readers better understand the content and structure of your web pages, improving accessibility and SEO (Search Engine Optimization).
HTML Attributes
HTML elements can also have attributes, which provide additional information or modify the behavior of the elements. Some common HTML attributes include:
classandid: Used to assign unique identifiers to elements for styling and scripting purposes.srcandhref: Specify the source or target URL for elements like<img>and<a>.alt: Provides alternative text descriptions for images, which is important for accessibility.style: Allows inline styling of an element's appearance.
Attributes help add more context and functionality to HTML elements, enhancing the overall structure and presentation of the web page.
Mermaid Diagram: HTML Document Structure
Here's a Mermaid diagram that illustrates the basic structure of an HTML document:
graph TD
A[HTML Document] --> B[]
A --> C[]
B --> D[]
B --> E[<meta>]
B --> F[<link>]
C --> G[<h1>]
C --> H[<p>]
C --> I[<img>]</div><p data-line="68">This diagram shows the hierarchical structure of an HTML document, with the <code><head></code> and <code><body></code> elements as the main components, and various other elements nested within them.</p>
<p data-line="70">By understanding the structure and semantic elements of HTML, web developers can create well-organized and meaningful web pages that provide a better user experience and are more accessible to a wide range of users and devices.</p>
</article></div><!----><!--]--></div><!--]--><!--]--></div><!----><!----><div class="bg-white rounded-md mt-6"><div class="p-6"><p class="text-xl font-semibold mb-3">0 Comments </p><!--[--><div id="answer-list"><ul class="mb-3"><!--[--><!--]--></ul><div class="page" data-v-c9f7340e><!----></div></div><div class="text-center"><img src="/images/no/data.svg" alt="no data"><!--[--><div class="text-gray-400">Be the first to share your comment!</div><!--]--></div><!--]--></div></div><div id="answer-form" class="bg-white mt-6 rounded-md"><div class="p-6"><span></span></div></div></div></div><!--]--></div></section><!----></div><!--]--><!--]--><span></span><footer class="bg-slate-800"><div class="pt-10 pb-1"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><!--[--><div class="flex flex-col"><div class="flex items-center justify-between w-full"><a href="#" aria-label="LabEx"><img src="/_ipx/s_196x60/labex-logo-light.svg" onerror="this.setAttribute('data-error', 1)" width="98" height="30" alt="LabEx" loading="lazy" data-nuxt-img sizes="(max-width: 991px) 78px, 98px" srcset="/_ipx/s_78x24/labex-logo-light.svg 78w, /_ipx/s_98x30/labex-logo-light.svg 98w, /_ipx/s_156x48/labex-logo-light.svg 156w, /_ipx/s_196x60/labex-logo-light.svg 196w"></a><div><div class="language-switch" data-v-469eddc1><div data-headlessui-state class="relative inline-flex text-left rtl:text-right" data-v-469eddc1><div id="headlessui-menu-button-2jHQtkq50D:0" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full" role="button" data-n-ids="{"2jHQtkq50D:0":"2jHQtkq50D:0"}"><!--[--><button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm px-2.5 py-1.5 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 flex items-center gap-2 text-white hover:text-white hover:bg-slate-700" data-v-469eddc1><!--[--><!--[--><!----><!--]--><!--[--><span class="i-heroicons-globe-alt" data-v-469eddc1></span><span data-v-469eddc1>Switch Language</span><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--></div><!----></div></div></div></div><p class="mt-4 mb-4 text-gray-400">Learn Linux, DevOps & Cybersecurity with Hands-on Labs</p></div><div class="border-b border-gray-700 mb-8"></div><div class="grid gap-6 pb-10 lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1"><!--[--><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">LEARNING PATH</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Cybersecurity</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/database" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Database</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/jenkins" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Jenkins</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Machine Learning</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/kali" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Kali Linux</a></div><!--]--></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">PROJECTS & TUTORIALS</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">All Interactive Tutorials</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Java Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/numpy" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Numpy Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://linux-commands.labex.io/" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Commands Cheat Sheet</a></div><!--]--></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">PLAYGROUNDS</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/linux-online-linux-playground-372915" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Linux Terminal</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/docker-online-docker-playground-372912" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Docker Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-online-python-playground-372886" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Python Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/go-online-golang-playground-372913" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Golang Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/cpp-online-c-playground-372911" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online C++ Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/java-online-java-playground-372914" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Java Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/rust-online-rust-playground-372918" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Rust Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/mysql-online-mysql-playground-372916" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online MySQL Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/ansible-online-ansible-playground-415831" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Ansible Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/jenkins-online-jenkins-playground-415838" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Jenkins Playground</a></div><!--]--></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">LATEST TUTORIALS</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-how-to-use-itertools-combinations-in-python-398083" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Itertools Combinations</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/docker-how-to-use-docker-compose-with-host-network-configuration-394882" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Compose with Host Network</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/linux-linux-systemctl-daemon-reload-390500" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Systemctl daemon-reload in Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/shell-bash-regex-matching-391551" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Match Patterns with Bash Regex</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-key-of-max-value-13677" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Find Key with Max Value in Python Dictionary</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/shell-bash-function-return-values-391153" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Bash Function Return Values</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/c-circle-area-and-circumference-in-c-123197" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Area and Circumference of a Circle in C</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity Free Labs</a></div><!--]--></div><!--]--></div><div class="flex flex-wrap justify-center items-center gap-2 text-sm text-gray-400"><a href="https://support.labex.io" target="_blank" class="hover:text-white">SUPPORT</a><span class="text-gray-600">|</span><a href="mailto:info@labex.io" class="hover:text-white">CONTACT US</a><span class="text-gray-600">|</span><a href="/forum" class="hover:text-white">FORUM</a><span class="text-gray-600">|</span><a href="/interview-questions" class="hover:text-white">INTERVIEW QUESTIONS</a><span class="text-gray-600">|</span><a href="/teams" class="hover:text-white">LABEX TEAMS</a><span class="text-gray-600">|</span><a href="https://labex.io/questions/labex-affiliate-program-a6jov663" rel="noopener noreferrer" class="hover:text-white">AFFILIATE </a><span class="text-gray-600">|</span><a href="https://sitemap.labex.io/" rel="noopener noreferrer" class="hover:text-white">SITEMAP</a><span class="text-gray-600">|</span><a href="/privacy" class="hover:text-white">PRIVACY POLICY</a><span class="text-gray-600">|</span><a href="/terms" class="hover:text-white">TERMS OF SERVICE</a></div><div class="sm:col-span-2 md:col-span-3 lg:col-span-4 text-gray-400 text-center"><div class="flex gap-2 mt-4 justify-center"><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Twitter" href="https://x.com/intent/follow?screen_name=wearelabex" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#x-black" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Facebook" href="https://www.facebook.com/WeAreLabEx/" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#facebook" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="LinkedIn" href="https://www.linkedin.com/company/wearelabex/mycompany/" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#linkedin" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="TikTok" href="https://www.tiktok.com/@labexcoding" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#tiktok" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="YouTube" href="https://www.youtube.com/@labexio" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#youtube" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Discord" href="https://discord.gg/J6k3u69nU6" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#discord" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Github" href="https://github.com/labex-labs" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#github" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Dockerhub" href="https://hub.docker.com/u/labex" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.Cx2zmyQh.svg#docker-white" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--></div></div><!--]--></div></div><div class="py-3"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><!--[--><p class="text-gray-400 font-medium text-center mb-0"> ยฉ 2017-2025 LabEx Technology Limited All Rights Reserved </p><!--]--></div></div></footer><!--]--><div class="alert-box" data-v-f8939478><!--[--><!--]--></div><div></div><!--]--></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":158,"once":431,"_errors":432,"serverRendered":34,"path":433},{"questionDetail-how-does-html-structure-a-web-page-92740-en":3,"relatedQuestion":38,"answerList-how-does-html-structure-a-web-page-92740-undefined-undefined":153},{"question":4,"current_user_has_answered":14},{"id":5,"alias":6,"title":7,"author":8,"answer_count":19,"view_count":20,"created_at":21,"updated_at":22,"last_answered_at":21,"course":23,"lab":24,"text":36,"meta_title":37,"meta_description":37,"meta_keywords":37},1561,"how-does-html-structure-a-web-page-92740","How does HTML structure a web page?",{"id":9,"name":10,"nick_name":11,"img_url":12,"created_at":13,"is_member":14,"xp":15,"level":16,"level_xp":15,"total_level_xp":17,"skills":18,"public_profile":14,"is_delete":14},160682,"questions-66474350","Questions","https://file.labex.io/upload/u/160682/NEXRrjo8RO0Y.png","2024-07-24T05:31:04Z",false,80,1,200,8,0,467,"2024-07-25T06:00:11.006Z","2025-05-13T21:48:02.192Z",null,{"id":25,"name":26,"fee_type":19,"type":19,"difficulty":27,"time":28,"from_community":14,"max_lab_num":29,"allow_to_start":14,"remain_num":19,"allow_to_view":14,"skills":30,"hidden":14,"path":31,"alias":32,"icon":33,"show_in_tutorial":34,"description":35},92740,"Your First HTML Lab","Intermediate",7,-1,[],"html/lab-the-first-html-lab","html-your-first-html-lab-92740","https://icons.labex.io/your-first-html-lab.png",true,"Hi there, welcome to LabEx! In this first lab, you'll learn the classic 'Hello, World!' program in HTML.","## HTML Structure of a Web Page\n\nHTML, or Hypertext Markup Language, is the standard markup language used to create and structure web pages. It provides the basic building blocks for constructing the content, layout, and overall structure of a web page. Let's explore how HTML structures a web page.\n\n### The HTML Document Structure\n\nAt the core of an HTML-based web page is the HTML document, which follows a specific structure. The structure consists of the following key elements:\n\n1. **`\u003Chtml>` Element**: This is the root element of the HTML document, enclosing the entire web page content.\n2. **`\u003Chead>` Element**: The `\u003Chead>` section contains metadata about the web page, such as the page title, character encoding, and links to external resources (e.g., CSS stylesheets, JavaScript files).\n3. **`\u003Cbody>` Element**: The `\u003Cbody>` section holds the visible content of the web page, including headings, paragraphs, images, links, and other elements that make up the page's structure and layout.\n\nHere's a basic example of an HTML document structure:\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\n \u003Ctitle>My Web Page\u003C/title>\n \u003Cmeta charset=\"UTF-8\">\n \u003Clink rel=\"stylesheet\" href=\"styles.css\">\n \u003C/head>\n \u003Cbody>\n \u003Ch1>Welcome to My Web Page\u003C/h1>\n \u003Cp>This is a paragraph of text.\u003C/p>\n \u003Cimg src=\"image.jpg\" alt=\"My Image\">\n \u003C/body>\n\u003C/html>\n```\n\n### Semantic HTML Elements\n\nHTML provides a set of semantic elements that help structure the content of a web page in a meaningful way. These elements describe the purpose and context of the content, rather than just its visual appearance. Some common semantic elements include:\n\n- `\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Carticle>`, `\u003Csection>`, `\u003Caside>`, `\u003Cfooter>`: These elements define the different sections and areas of a web page.\n- `\u003Ch1>`, `\u003Ch2>`, `\u003Ch3>`, `\u003Ch4>`, `\u003Ch5>`, `\u003Ch6>`: These elements represent headings, with `\u003Ch1>` being the most important and `\u003Ch6>` the least important.\n- `\u003Cp>`, `\u003Cul>`, `\u003Col>`, `\u003Cli>`: These elements structure the content into paragraphs, unordered lists, ordered lists, and list items.\n- `\u003Ca>`, `\u003Cimg>`, `\u003Cvideo>`, `\u003Caudio>`: These elements are used to add links, images, videos, and audio content to the web page.\n\nUsing semantic HTML elements helps search engines and screen readers better understand the content and structure of your web pages, improving accessibility and SEO (Search Engine Optimization).\n\n### HTML Attributes\n\nHTML elements can also have attributes, which provide additional information or modify the behavior of the elements. Some common HTML attributes include:\n\n- `class` and `id`: Used to assign unique identifiers to elements for styling and scripting purposes.\n- `src` and `href`: Specify the source or target URL for elements like `\u003Cimg>` and `\u003Ca>`.\n- `alt`: Provides alternative text descriptions for images, which is important for accessibility.\n- `style`: Allows inline styling of an element's appearance.\n\nAttributes help add more context and functionality to HTML elements, enhancing the overall structure and presentation of the web page.\n\n### Mermaid Diagram: HTML Document Structure\n\nHere's a Mermaid diagram that illustrates the basic structure of an HTML document:\n\n```mermaid\ngraph TD\n A[HTML Document] --> B[\u003Chead>]\n A --> C[\u003Cbody>]\n B --> D[\u003Ctitle>]\n B --> E[\u003Cmeta>]\n B --> F[\u003Clink>]\n C --> G[\u003Ch1>]\n C --> H[\u003Cp>]\n C --> I[\u003Cimg>]\n```\n\nThis diagram shows the hierarchical structure of an HTML document, with the `\u003Chead>` and `\u003Cbody>` elements as the main components, and various other elements nested within them.\n\nBy understanding the structure and semantic elements of HTML, web developers can create well-organized and meaningful web pages that provide a better user experience and are more accessible to a wide range of users and devices.","",{"questions":39},[40,58,66,84,94,102,113,125,136,146],{"id":41,"alias":42,"title":43,"author":44,"answer_count":53,"view_count":54,"created_at":55,"updated_at":56,"last_answered_at":57,"course":23,"lab":23},747,"feedback-your-first-html-lab-770106","Your First HTML Lab - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},"labby","Labby","https://file.labex.io/upload/u/1/mkMHXWCmiw21.png","2017-10-17T02:18:19Z",78710,394,110,419,6,217,"2023-07-20T15:09:45Z","2025-05-14T03:28:59.404Z","2025-03-28T14:01:19.033Z",{"id":59,"alias":60,"title":61,"author":62,"answer_count":16,"view_count":63,"created_at":64,"updated_at":65,"last_answered_at":64,"course":23,"lab":23},748,"feedback-html-em-tag-948758","HTML Emphasized Text - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},248,"2023-07-20T15:22:51Z","2025-05-14T03:34:10.699Z",{"id":67,"alias":68,"title":69,"author":70,"answer_count":71,"view_count":72,"created_at":73,"updated_at":74,"last_answered_at":75,"course":76,"lab":23},803,"feedback-creating-a-footer-for-a-webpage-using-html-foote-270489","HTML Document/Footer Section - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},4,831,"2023-09-20T14:15:06.804Z","2025-05-13T03:27:02.237Z","2023-10-20T18:58:48.953Z",{"id":77,"alias":78,"name":79,"cover":80,"user_count":81,"level":16,"fee_type":19,"lab_coins":19,"tags":82,"type":19,"status":16,"has_cert":34,"hidden":14},1473,"quick-start-with-html","Quick Start with HTML","https://cover-creator.labex.io/quick-start-with-html.png",1014,[83],"HTML",{"id":85,"alias":86,"title":87,"author":88,"answer_count":89,"view_count":90,"created_at":91,"updated_at":92,"last_answered_at":93,"course":23,"lab":23},820,"feedback-html-iframe-tag-827308","HTML Embedded HTML Page - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},2,342,"2023-09-24T22:36:09.097Z","2025-05-13T03:27:49.154Z","2023-09-24T22:36:23.768Z",{"id":95,"alias":96,"title":97,"author":98,"answer_count":16,"view_count":99,"created_at":100,"updated_at":101,"last_answered_at":100,"course":23,"lab":23},821,"feedback-creating-semantic-html-with-the-article-tag-758143","HTML Article Section - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},408,"2023-09-24T22:51:08.394Z","2025-05-14T03:30:07.243Z",{"id":103,"alias":104,"title":43,"author":105,"answer_count":106,"view_count":107,"created_at":108,"updated_at":109,"last_answered_at":110,"course":111,"lab":23},871,"feedback-your-first-html-lab-688111",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},38,901,"2023-10-07T15:42:47.026Z","2025-05-14T02:20:23.267Z","2025-01-12T21:14:44.976Z",{"id":77,"alias":78,"name":79,"cover":80,"user_count":81,"level":16,"fee_type":19,"lab_coins":19,"tags":112,"type":19,"status":16,"has_cert":34,"hidden":14},[83],{"id":114,"alias":115,"title":116,"author":117,"answer_count":118,"view_count":119,"created_at":120,"updated_at":121,"last_answered_at":122,"course":123,"lab":23},895,"feedback-creating-an-html-document-html-head-tag-403206","HTML Document Metadata - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},5,957,"2023-10-19T19:13:40.871Z","2025-05-14T03:27:26.355Z","2024-11-24T11:42:04.552Z",{"id":77,"alias":78,"name":79,"cover":80,"user_count":81,"level":16,"fee_type":19,"lab_coins":19,"tags":124,"type":19,"status":16,"has_cert":34,"hidden":14},[83],{"id":126,"alias":127,"title":128,"author":129,"answer_count":118,"view_count":130,"created_at":131,"updated_at":132,"last_answered_at":133,"course":134,"lab":23},898,"feedback-creating-html-headings-697800","HTML Headings of Various Levels - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},656,"2023-10-20T15:38:25.408Z","2025-05-13T03:41:11.885Z","2025-03-23T20:22:38.678Z",{"id":77,"alias":78,"name":79,"cover":80,"user_count":81,"level":16,"fee_type":19,"lab_coins":19,"tags":135,"type":19,"status":16,"has_cert":34,"hidden":14},[83],{"id":137,"alias":138,"title":139,"author":140,"answer_count":16,"view_count":141,"created_at":142,"updated_at":143,"last_answered_at":142,"course":144,"lab":23},899,"feedback-creating-html-tables-613935","HTML Table Definition - Community Discussion and Feedback",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},740,"2023-10-20T16:21:25.119Z","2025-05-14T03:31:24.660Z",{"id":77,"alias":78,"name":79,"cover":80,"user_count":81,"level":16,"fee_type":19,"lab_coins":19,"tags":145,"type":19,"status":16,"has_cert":34,"hidden":14},[83],{"id":147,"alias":148,"title":69,"author":149,"answer_count":16,"view_count":150,"created_at":151,"updated_at":152,"last_answered_at":151,"course":23,"lab":23},909,"feedback-creating-a-footer-for-a-webpage-using-html-foote-743796",{"id":16,"name":45,"nick_name":46,"img_url":47,"created_at":48,"is_member":14,"xp":49,"level":50,"level_xp":51,"total_level_xp":17,"skills":52,"public_profile":34,"is_delete":14},482,"2023-10-26T13:07:11.209Z","2025-05-13T03:42:25.188Z",{"pagination":154,"answers":156,"sub_answers":157},{"current":16,"size":155,"total_pages":19,"total_size":19},10,[],[],{"$snuxt-i18n-meta":159,"$scolor-mode":160,"$suser":-1,"$scopywriting":162,"$sjoined_teams":417,"$sowned_teams":418,"$sjoined_skill_strees":419,"$sget_joined_skill_strees_pending":34,"$suser_streaks":23,"$stoday_get_streak":14,"$snext_skill_badge":23,"$snext_streak_badge":23,"$slabby_settings":420,"$schat_list":422,"$schat_pending":34,"$schat_branch":14,"$schat_error_msg":37,"$schat_background":23,"$sstep_questins":423,"$sshow_panel":14,"$sshow_transition":34,"$stransition_height":19,"$spanel_width":19,"$sacquired_badges":424,"$sstop_generating":14,"$scan_stop_generating":14,"$sshow_driver":14,"$scurrent_lab_steps":425,"$scurrent_step_index":19,"$ssite-config":426},{},{"preference":161,"value":161,"unknown":34,"forced":14},"light",[163,176,253,394,404,412],{"key":164,"text":165,"tags":166,"data":168},"modal","๐ Since 2017, Trusted by 300k Learners, Alibaba Cloud Training Partner",[167],"free_user",{"close":169,"confirm_button":171,"title":175},{"hours":170},24,{"label":172,"type":173,"url":174},"Level Up With LabEx Pro","link","/pricing","Free Plan Limited to 3 VM Launches Per Day",{"key":177,"text":37,"tags":178,"data":179},"country_codes",[167],{"codes":180},[181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247,250],{"code":182,"emoji":183},"IN","๐ฎ๐ณ",{"code":185,"emoji":186},"ID","๐ฎ๐ฉ",{"code":188,"emoji":189},"EG","๐ช๐ฌ",{"code":191,"emoji":192},"PK","๐ต๐ฐ",{"code":194,"emoji":195},"MY","๐ฒ๐พ",{"code":197,"emoji":198},"VN","๐ป๐ณ",{"code":200,"emoji":201},"UG","๐บ๐ฌ",{"code":203,"emoji":204},"PH","๐ต๐ญ",{"code":206,"emoji":207},"BR","๐ง๐ท",{"code":209,"emoji":210},"ET","๐ช๐น",{"code":212,"emoji":213},"BD","๐ง๐ฉ",{"code":215,"emoji":216},"NG","๐ณ๐ฌ",{"code":218,"emoji":219},"KE","๐ฐ๐ช",{"code":221,"emoji":222},"IR","๐ฎ๐ท",{"code":224,"emoji":225},"MX","๐ฒ๐ฝ",{"code":227,"emoji":228},"TR","๐น๐ท",{"code":230,"emoji":231},"DZ","๐ฉ๐ฟ",{"code":233,"emoji":234},"SD","๐ธ๐ฉ",{"code":236,"emoji":237},"AO","๐ฆ๐ด",{"code":239,"emoji":240},"PE","๐ต๐ช",{"code":242,"emoji":243},"GH","๐ฌ๐ญ",{"code":245,"emoji":246},"MZ","๐ฒ๐ฟ",{"code":248,"emoji":249},"IQ","๐ฎ๐ถ",{"code":251,"emoji":252},"UZ","๐บ๐ฟ",{"key":254,"text":255,"tags":256,"data":260},"footer","footer ้
็ฝฎ๏ผ็ผๅญ 1 ๅ้๏ผไฟฎๆนๅ 1 ๅ้็ๆ\t\n",[167,257,258,259],"not_logged_in","pro_user","trial_user",{"footer":261},[262,295,328,361],{"items":263,"name":294},[264,267,270,273,276,279,282,285,288,291],{"name":265,"url":266},"Learn Linux","https://labex.io/skilltrees/linux",{"name":268,"url":269},"Learn DevOps","https://labex.io/skilltrees/devops",{"name":271,"url":272},"Learn Cybersecurity","https://labex.io/skilltrees/cybersecurity",{"name":274,"url":275},"Learn Database","https://labex.io/skilltrees/database",{"name":277,"url":278},"Learn Python","https://labex.io/skilltrees/python",{"name":280,"url":281},"Learn Docker","https://labex.io/skilltrees/docker",{"name":283,"url":284},"Learn Java","https://labex.io/skilltrees/java",{"name":286,"url":287},"Learn Jenkins","https://labex.io/skilltrees/jenkins",{"name":289,"url":290},"Learn Machine Learning","https://labex.io/skilltrees/ml",{"name":292,"url":293},"Learn Kali Linux","https://labex.io/skilltrees/kali","LEARNING PATH",{"items":296,"name":327},[297,300,303,306,309,312,315,318,321,324],{"name":298,"url":299},"All Interactive Tutorials","https://labex.io/tutorials",{"name":301,"url":302},"Linux Projects","https://labex.io/projects/category/linux",{"name":304,"url":305},"Python Projects","https://labex.io/projects/category/python",{"name":307,"url":308},"Java Projects","https://labex.io/projects/category/java",{"name":310,"url":311},"Numpy Projects","https://labex.io/projects/category/numpy",{"name":313,"url":314},"Linux Tutorial","https://labex.io/tutorials/category/linux",{"name":316,"url":317},"Docker Tutorial","https://labex.io/tutorials/category/docker",{"name":319,"url":320},"Cybersecurity tutorial","https://labex.io/tutorials/category/cybersecurity",{"name":322,"url":323},"Free Labs","https://labex.io/free-labs",{"name":325,"url":326},"Linux Commands Cheat Sheet","https://linux-commands.labex.io/","PROJECTS & TUTORIALS",{"items":329,"name":360},[330,333,336,339,342,345,348,351,354,357],{"name":331,"url":332},"Online Linux Terminal","https://labex.io/tutorials/linux-online-linux-playground-372915",{"name":334,"url":335},"Online Docker Playground","https://labex.io/tutorials/docker-online-docker-playground-372912",{"name":337,"url":338},"Online Python Playground","https://labex.io/tutorials/python-online-python-playground-372886",{"name":340,"url":341},"Online Golang Playground","https://labex.io/tutorials/go-online-golang-playground-372913",{"name":343,"url":344},"Online C++ Playground","https://labex.io/tutorials/cpp-online-c-playground-372911",{"name":346,"url":347},"Online Java Playground","https://labex.io/tutorials/java-online-java-playground-372914",{"name":349,"url":350},"Online Rust Playground","https://labex.io/tutorials/rust-online-rust-playground-372918",{"name":352,"url":353},"Online MySQL Playground","https://labex.io/tutorials/mysql-online-mysql-playground-372916",{"name":355,"url":356},"Online Ansible Playground","https://labex.io/tutorials/ansible-online-ansible-playground-415831",{"name":358,"url":359},"Online Jenkins Playground","https://labex.io/tutorials/jenkins-online-jenkins-playground-415838","PLAYGROUNDS",{"items":362,"name":393},[363,366,369,372,375,378,381,384,387,390],{"name":364,"url":365},"Python Itertools Combinations","https://labex.io/tutorials/python-how-to-use-itertools-combinations-in-python-398083",{"name":367,"url":368},"Docker Compose with Host Network","https://labex.io/tutorials/docker-how-to-use-docker-compose-with-host-network-configuration-394882",{"name":370,"url":371},"Systemctl daemon-reload in Linux","https://labex.io/tutorials/linux-linux-systemctl-daemon-reload-390500",{"name":373,"url":374},"Match Patterns with Bash Regex","https://labex.io/tutorials/shell-bash-regex-matching-391551",{"name":376,"url":377},"DevOps Free Labs","https://labex.io/free-labs/devops",{"name":379,"url":380},"Find Key with Max Value in Python Dictionary","https://labex.io/tutorials/python-key-of-max-value-13677",{"name":382,"url":383},"Linux Free Labs","https://labex.io/free-labs/linux",{"name":385,"url":386},"Bash Function Return Values","https://labex.io/tutorials/shell-bash-function-return-values-391153",{"name":388,"url":389},"Area and Circumference of a Circle in C","https://labex.io/tutorials/c-circle-area-and-circumference-in-c-123197",{"name":391,"url":392},"Cybersecurity Free Labs","https://labex.io/free-labs/cybersecurity","LATEST TUTORIALS",{"key":395,"text":396,"tags":397,"data":398},"free_labs_page","free labs ้กต้ข TDK",[167,259,258,257],{"free_labs_page":399},{"description":400,"meta_description":401,"meta_keywords":402,"meta_title":403,"title":322},"1000+ Free Interactive Labs in 30+ Tech Fields for Developers and\n Students. Practice and enhance your skills with free hands-on exercises and\n real-world scenarios.","Discover LabEx's 1000+ free interactive labs across Linux, DevOps, Cybersecurity, Data Science, Web Development, Machine Learning, and more. Gain free access to expert-led training and hands-on practice in a dynamic environment.","Free Labs, LabEx, Interactive Labs, Free Tech Skills, Free Hands-On Practice, Online Learning","Free Labs | Interactive Practice in 30+ Tech Fields",{"key":405,"text":37,"tags":406,"data":407},"interview_questions_page",[259,167,258,257],{"interview_questions_page":408},{"description":409,"meta_description":401,"meta_keywords":402,"meta_title":410,"title":411},"Practice real-world interview challenges with hands-on labs and AI guidance","Technical Interview Questions | Interactive Practice in 30+ Tech Fields","Technical Interview Questions",{"key":413,"text":414,"tags":415,"data":416},"ai_check","ai inspect ๆฏๅฆๅผๅฏ",[167,259,258],{"ai_check":34},[],[],[],{"fontSize":421,"darkTheme":14,"monitoring":14},"md",[],[],[],[],{"currentLocale":427,"defaultLocale":427,"env":428,"name":429,"url":430},"en","production","LabEx","https://labex.io",["Set"],{"questionDetail-how-does-html-structure-a-web-page-92740-en":23,"relatedQuestion":23,"answerList-how-does-html-structure-a-web-page-92740-undefined-undefined":23},"/questions/how-does-html-structure-a-web-page-92740"]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"9074137",cookie:{domain:""},gtag:{id:"G-ZFCX52ZJTZ"},ads:{id:"AW-882002536",registerConversionTag:"MBFrCIGFxNQYEOiUyaQD",subscriptionConversionTag:"crfuCO_z2tQYEOiUyaQD",purchaseConversionTag:"53Q2COvEvO0YEOiUyaQD"},gtm:{id:"GTM-TN7PC69C"},clarityProjectId:"qfnofdz0u8",apiBaseUrl:"https://labex.io/api/v2",ossBaseUrl:"https://file.labex.io",paypalClientId:"AZZ0ZORi-uwIWCMBvvWS8pN7yKq3dEmOuztg95XoqmPv0WihfrIU3XYEByj3y1sZcB6g2CW5tjcQOlHX",googleClientId:"359324822670-0i8infpcje3uh1ttca1d6stgdmdmhk1a.apps.googleusercontent.com",sentry:{dsn:"https://a548fec1e2e7dd372776fed0b8684413@o4505046079111168.ingest.sentry.io/4506585020956672"},webPushServerKey:"BHIC0R48BSznqt8oCmKfQJkty77I0SV-EWdNqJ-3EPJ-HUBqnXKlrw_6cowDynxkVdNA26Y1q6s-VTaUdBYYICU",xAuth:"",stripeKey:"pk_live_51NnFfaISCR4x8ogMvIwl9UJQpDybg8tc41t8igKNOtejuDkPiQBvjShWmA94hm6Ii7hBpCxyiJ5CceACBNvIJWFj00KyBHumTT",i18n:{baseUrl:"",defaultLocale:"en",defaultDirection:"ltr",strategy:"prefix_except_default",lazy:false,rootRedirect:"",routesNameSeparator:"___",defaultLocaleRouteNameSuffix:"default",skipSettingLocaleOnNavigate:false,differentDomains:false,trailingSlash:false,locales:[{code:"en",iso:"en-US",dir:"ltr",name:"English",files:["/app/i18n/locales/en.json"]},{code:"zh",iso:"zh-CN",dir:"ltr",name:"็ฎไฝไธญๆ",files:["/app/i18n/locales/zh.json"]},{code:"es",iso:"es-ES",dir:"ltr",name:"Espaรฑol",files:["/app/i18n/locales/es.json"]},{code:"ja",iso:"ja-JP",dir:"ltr",name:"ๆฅๆฌ่ช",files:["/app/i18n/locales/jp.json"]},{code:"fr",iso:"fr-FR",dir:"ltr",name:"Franรงais",files:["/app/i18n/locales/fr.json"]},{code:"de",iso:"de-DE",dir:"ltr",name:"Deutsch",files:["/app/i18n/locales/de.json"]},{code:"ru",iso:"ru-RU",dir:"ltr",name:"ะ ัััะบะธะน",files:["/app/i18n/locales/ru.json"]}],detectBrowserLanguage:false,experimental:{localeDetector:"",switchLocalePathLinkSSR:false,autoImportTranslationFunctions:false,typedPages:true,typedOptionsAndMessages:false},multiDomainLocales:false}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
<script type="application/ld+json" id="schema-org-graph" data-hid="3437552">{"@context":"https://schema.org","@graph":[{"@id":"https://labex.io#website","@type":"WebSite","inLanguage":"en","name":"LabEx","url":"https://labex.io"},{"@id":"https://labex.io/questions/how-does-html-structure-a-web-page-92740#webpage","@type":"WebPage","description":"## HTML Structure of a Web Page\n\nHTML, or Hypertext Markup Language, is the standard markup language used to create and structure web pages.","name":"How does HTML structure a web page? | LabEx","url":"https://labex.io/questions/how-does-html-structure-a-web-page-92740","isPartOf":{"@id":"https://labex.io#website"},"potentialAction":[{"@type":"ReadAction","target":["https://labex.io/questions/how-does-html-structure-a-web-page-92740"]}]}]}</script></body></html><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"93f7fd86386b0818","version":"2025.4.0-1-g37f21b1","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"c26e5c2e7aa04b40b4143b15a6e3e798","b":1}' crossorigin="anonymous"></script>