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><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="/" class="" aria-label="LabEx"><img src="/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="/labex-logo-light.svg 78w, /labex-logo-light.svg 98w, /labex-logo-light.svg 156w, /labex-logo-light.svg 196w"></a><div><div class="language-switch" data-v-8a0b34f8><div data-headlessui-state class="relative inline-flex text-left rtl:text-right" data-v-8a0b34f8><div id="headlessui-menu-button-2jHQtkq50D:1" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full" role="button" data-n-ids="{"2jHQtkq50D:0":"2jHQtkq50D:1"}"><!--[--><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-8a0b34f8><!--[--><!--[--><!----><!--]--><!--[--><span data-v-8a0b34f8>🇺🇸 English</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">HANDS-ON COURSES</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/learn/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/learn/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/learn/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/learn/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/learn/comptia" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn CompTIA</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/learn/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/pythoncheatsheet/" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/learn/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Git</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/learn/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/learn/kali" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Kali Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/learn/ansible" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Ansible</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/learn/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/cheatsheets/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Git Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/courses/rhcsa-certification-exam-practice-exercises" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">RHCSA Practice Exam</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/courses/comptia-linux-plus-training-labs" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">CompTIA Linux+</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/exercises/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Exercises</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">PRACTICE LABS</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/c" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">C Language Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/go" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Golang Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Git Practice</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/shell" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Bash Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Java Practice</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Practice</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/mysql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MySQL Practice</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/nmap" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Nmap Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kubernetes Practice</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Machine Learning Practice</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 Labs</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kubernetes 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-terminal-and-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/python-online-python-playground-372886" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Interpreter</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">Docker Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/kubernetes-online-kubernetes-playground-593609" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kubernetes 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">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">C++ Compiler Online</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">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">Jenkins 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">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">Rust Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/kali-online-kali-linux-terminal-and-playground-592935" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kali Linux Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/nmap-online-nmap-playground-593613" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Nmap Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/wireshark-online-wireshark-playground-593624" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Wireshark Online</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">MySQL Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/kali-online-postgresql-database-playground-593616" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">PostgreSQL Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/rhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">RHCSA Exam Simulator</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/lesson/choosing-a-linux-distribution" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Best Linux Distro</a></div><!--]--></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">TUTORIALS</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/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kubernetes Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Wireshark Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/postgresql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">PostgreSQL Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Wireshark Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps 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/tutorials/java-java-interview-questions-and-answers-593685" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Java Interview Questions</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-python-interview-questions-and-answers-593698" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Interview Questions</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/kubernetes-kubernetes-interview-questions-and-answers-593688" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kubernetes Interview Questions</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/mongodb" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MongoDB Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/ansible" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Ansible Cheat Sheet</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/docker-docker-interview-questions-and-answers-593680" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Interview Questions</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/linux-linux-interview-questions-and-answers-593689" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Interview Questions</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/mongodb-mongodb-interview-questions-and-answers-593692" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MongoDB Interview Questions</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/cheatsheets/sqlite" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">SQLite Cheat Sheet</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="/tutorials" class="hover:text-white">TUTORIALS</a><span class="text-gray-600">|</span><a href="/free-labs" class="hover:text-white">FREE LABS</a><span class="text-gray-600">|</span><a href="/linuxjourney" class="hover:text-white">LINUX JOURNEY</a><span class="text-gray-600">|</span><a href="/exercises" class="hover:text-white">EXERCISES</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</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.DafkSvOj.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.DafkSvOj.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.DafkSvOj.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.DafkSvOj.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.DafkSvOj.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.DafkSvOj.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.DafkSvOj.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.DafkSvOj.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-2026 LabEx Technology Limited All Rights Reserved </p><!--]--></div></div></footer><!--]--><div class="alert-box" data-v-285a8eec><!--[--><!--]--></div><div></div><!--]--></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":265,"once":538,"_errors":539,"serverRendered":232,"path":540},{"footerData_en":3,"questionDetail-how-does-html-structure-a-web-page-92740-en":221,"answerList-structured-how-does-html-structure-a-web-page-92740":256,"answerList-how-does-html-structure-a-web-page-92740-undefined-undefined-undefined":261},{"groups":4},[5,59,113,167],{"name":6,"items":7},"HANDS-ON COURSES",[8,11,14,17,20,23,26,29,32,35,38,41,44,47,50,53,56],{"name":9,"url":10},"Learn Linux","https://labex.io/learn/linux",{"name":12,"url":13},"Learn Python","https://labex.io/learn/python",{"name":15,"url":16},"Learn Cybersecurity","https://labex.io/learn/cybersecurity",{"name":18,"url":19},"Learn Docker","https://labex.io/learn/docker",{"name":21,"url":22},"Learn CompTIA","https://labex.io/learn/comptia",{"name":24,"url":25},"Learn Java","https://labex.io/learn/java",{"name":27,"url":28},"Python Cheat Sheet","https://labex.io/pythoncheatsheet/",{"name":30,"url":31},"Learn Git","https://labex.io/learn/git",{"name":33,"url":34},"Learn Kubernetes","https://labex.io/learn/kubernetes",{"name":36,"url":37},"Learn Kali Linux","https://labex.io/learn/kali",{"name":39,"url":40},"Learn Ansible","https://labex.io/learn/ansible",{"name":42,"url":43},"Learn DevOps","https://labex.io/learn/devops",{"name":45,"url":46},"Git Cheat Sheet","https://labex.io/cheatsheets/git",{"name":48,"url":49},"RHCSA Practice Exam","https://labex.io/courses/rhcsa-certification-exam-practice-exercises",{"name":51,"url":52},"CompTIA Linux+","https://labex.io/courses/comptia-linux-plus-training-labs",{"name":54,"url":55},"Python Exercises","https://labex.io/exercises/python",{"name":57,"url":58},"Linux Commands Cheat Sheet","https://linux-commands.labex.io/",{"name":60,"items":61},"PRACTICE LABS",[62,65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110],{"name":63,"url":64},"Linux Projects","https://labex.io/projects/category/linux",{"name":66,"url":67},"Python Projects","https://labex.io/projects/category/python",{"name":69,"url":70},"Java Projects","https://labex.io/projects/category/java",{"name":72,"url":73},"C Language Projects","https://labex.io/projects/category/c",{"name":75,"url":76},"DevOps Projects","https://labex.io/projects/category/devops",{"name":78,"url":79},"Golang Projects","https://labex.io/projects/category/go",{"name":81,"url":82},"Git Practice","https://labex.io/free-labs/git",{"name":84,"url":85},"Bash Cheat Sheet","https://labex.io/cheatsheets/shell",{"name":87,"url":88},"Java Practice","https://labex.io/free-labs/java",{"name":90,"url":91},"Docker Practice","https://labex.io/free-labs/docker",{"name":93,"url":94},"MySQL Practice","https://labex.io/free-labs/mysql",{"name":96,"url":97},"Nmap Cheat Sheet","https://labex.io/cheatsheets/nmap",{"name":99,"url":100},"Kubernetes Practice","https://labex.io/free-labs/kubernetes",{"name":102,"url":103},"Machine Learning Practice","https://labex.io/free-labs/ml",{"name":105,"url":106},"Cybersecurity Labs","https://labex.io/free-labs/cybersecurity",{"name":108,"url":109},"Docker Cheat Sheet","https://labex.io/cheatsheets/docker",{"name":111,"url":112},"Kubernetes Cheat Sheet","https://labex.io/cheatsheets/kubernetes",{"name":114,"items":115},"PLAYGROUNDS",[116,119,122,125,128,131,134,137,140,143,146,149,152,155,158,161,164],{"name":117,"url":118},"Online Linux Terminal","https://labex.io/tutorials/linux-online-linux-terminal-and-playground-372915",{"name":120,"url":121},"Python Interpreter","https://labex.io/tutorials/python-online-python-playground-372886",{"name":123,"url":124},"Docker Playground","https://labex.io/tutorials/docker-online-docker-playground-372912",{"name":126,"url":127},"Kubernetes Playground","https://labex.io/tutorials/kubernetes-online-kubernetes-playground-593609",{"name":129,"url":130},"Golang Playground","https://labex.io/tutorials/go-online-golang-playground-372913",{"name":132,"url":133},"C++ Compiler Online","https://labex.io/tutorials/cpp-online-c-playground-372911",{"name":135,"url":136},"Ansible Playground","https://labex.io/tutorials/ansible-online-ansible-playground-415831",{"name":138,"url":139},"Jenkins Playground","https://labex.io/tutorials/jenkins-online-jenkins-playground-415838",{"name":141,"url":142},"Java Playground","https://labex.io/tutorials/java-online-java-playground-372914",{"name":144,"url":145},"Rust Playground","https://labex.io/tutorials/rust-online-rust-playground-372918",{"name":147,"url":148},"Kali Linux Online","https://labex.io/tutorials/kali-online-kali-linux-terminal-and-playground-592935",{"name":150,"url":151},"Nmap Online","https://labex.io/tutorials/nmap-online-nmap-playground-593613",{"name":153,"url":154},"Wireshark Online","https://labex.io/tutorials/wireshark-online-wireshark-playground-593624",{"name":156,"url":157},"MySQL Online","https://labex.io/tutorials/mysql-online-mysql-playground-372916",{"name":159,"url":160},"PostgreSQL Online","https://labex.io/tutorials/kali-online-postgresql-database-playground-593616",{"name":162,"url":163},"RHCSA Exam Simulator","https://labex.io/tutorials/rhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933",{"name":165,"url":166},"Best Linux Distro","https://labex.io/lesson/choosing-a-linux-distribution",{"name":168,"items":169},"TUTORIALS",[170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218],{"name":171,"url":172},"Linux Tutorial","https://labex.io/tutorials/category/linux",{"name":174,"url":175},"Docker Tutorial","https://labex.io/tutorials/category/docker",{"name":177,"url":178},"Kubernetes Tutorial","https://labex.io/tutorials/category/kubernetes",{"name":180,"url":181},"Wireshark Cheat Sheet","https://labex.io/cheatsheets/wireshark",{"name":183,"url":184},"PostgreSQL Tutorial","https://labex.io/tutorials/category/postgresql",{"name":186,"url":187},"Wireshark Tutorial","https://labex.io/tutorials/category/wireshark",{"name":189,"url":190},"DevOps Tutorial","https://labex.io/tutorials/category/devops",{"name":192,"url":193},"Cybersecurity Tutorial","https://labex.io/tutorials/category/cybersecurity",{"name":195,"url":196},"Java Interview Questions","https://labex.io/tutorials/java-java-interview-questions-and-answers-593685",{"name":198,"url":199},"Python Interview Questions","https://labex.io/tutorials/python-python-interview-questions-and-answers-593698",{"name":201,"url":202},"Kubernetes Interview Questions","https://labex.io/tutorials/kubernetes-kubernetes-interview-questions-and-answers-593688",{"name":204,"url":205},"MongoDB Cheat Sheet","https://labex.io/cheatsheets/mongodb",{"name":207,"url":208},"Ansible Cheat Sheet","https://labex.io/cheatsheets/ansible",{"name":210,"url":211},"Docker Interview Questions","https://labex.io/tutorials/docker-docker-interview-questions-and-answers-593680",{"name":213,"url":214},"Linux Interview Questions","https://labex.io/tutorials/linux-linux-interview-questions-and-answers-593689",{"name":216,"url":217},"MongoDB Interview Questions","https://labex.io/tutorials/mongodb-mongodb-interview-questions-and-answers-593692",{"name":219,"url":220},"SQLite Cheat Sheet","https://labex.io/cheatsheets/sqlite",{"question":222,"current_user_has_answered":237},{"id":223,"alias":224,"title":225,"author":226,"answer_count":238,"view_count":239,"created_at":240,"updated_at":241,"last_answered_at":240,"course":242,"lab":243,"text":254,"meta_title":255,"meta_description":255,"meta_keywords":255},1561,"how-does-html-structure-a-web-page-92740","How does HTML structure a web page?",{"id":227,"name":228,"nick_name":229,"img_url":230,"created_at":231,"is_member":232,"xp":233,"level":234,"level_xp":233,"total_level_xp":235,"skills":236,"public_profile":232,"is_delete":237},160682,"questions-66474350","Questions","https://file.labex.io/upload/u/160682/NEXRrjo8RO0Y.png","2024-07-24T05:31:04Z",true,80,1,200,8,false,0,1030,"2024-07-25T06:00:11.006Z","2026-04-14T23:49:24.029Z",null,{"id":244,"name":245,"fee_type":238,"type":238,"difficulty":246,"time":247,"from_community":237,"max_lab_num":248,"allow_to_start":237,"remain_num":238,"allow_to_view":237,"skills":249,"hidden":232,"path":250,"alias":251,"icon":252,"show_in_tutorial":232,"description":253},92740,"Your First HTML Lab","Beginner",7,-1,[],"html/lab-the-first-html-lab","html-your-first-html-lab-92740","https://icons.labex.io/your-first-html-lab.png","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.","",{"pagination":257,"answers":259,"sub_answers":260},{"current":234,"size":258,"total_pages":238,"total_size":238},10,[],[],{"pagination":262,"answers":263,"sub_answers":264},{"current":234,"size":258,"total_pages":238,"total_size":238},[],[],{"$snuxt-i18n-meta":266,"$scolor-mode":267,"$suser":-1,"$scopywriting":269,"$sjoined_teams":525,"$sowned_teams":526,"$sjoined_skill_strees":527,"$sget_joined_skill_strees_pending":232,"$suser_streaks":242,"$stoday_get_streak":237,"$snext_skill_badge":242,"$snext_streak_badge":242,"$slabby_settings":528,"$schat_list":530,"$schat_pending":232,"$schat_branch":237,"$schat_error_msg":255,"$schat_background":242,"$sstep_questins":531,"$sshow_panel":237,"$sshow_transition":232,"$stransition_height":238,"$spanel_width":238,"$sacquired_badges":532,"$sstop_generating":237,"$scan_stop_generating":237,"$sshow_driver":237,"$scurrent_lab_steps":533,"$scurrent_step_index":238,"$ssite-config":534},{},{"preference":268,"value":268,"unknown":232,"forced":237},"light",[270,311,388,460,465],{"key":271,"text":255,"tags":272,"data":274},"free_modal",[273],"free_user",{"close":275,"free_modal":277},{"hours":276},24,{"confirm_button":278,"sub_title":291,"title":301},{"label":279,"type":289,"url":290},{"de":280,"en":281,"es":282,"fr":283,"ja":284,"ko":285,"pt":286,"ru":287,"zh":288},"Level up mit LabEx Pro","Level Up With LabEx Pro","Sube de nivel con LabEx Pro","Montez de niveau avec LabEx Pro","LabEx Pro にレベルアップ","LabEx Pro로 레벨업","Suba de nível com LabEx Pro","Повысьте уровень с LabEx Pro","升级到 LabEx Pro","link","/pricing",{"de":292,"en":293,"es":294,"fr":295,"ja":296,"ko":297,"pt":298,"ru":299,"zh":300},"🚀 Seit 2017 · Vertraut von 900K+ Lernenden · 100% Praxisorientiert","🚀 Since 2017 · Trusted by 900K+ Learners · 100% Hands-On","🚀 Desde 2017 · Confiado por 900K+ Estudiantes · 100% Práctico","🚀 Depuis 2017 · Fait confiance par 900K+ Apprenants · 100% Pratique","🚀 2017年以来 · 90万人以上の学習者に信頼 · 100% ハンズオン","🚀 2017년부터 · 90만명+ 학습자가 신뢰 · 100% 실습","🚀 Desde 2017 · Confiado por 900K+ Aprendizes · 100% Prático","🚀 С 2017 года · Доверие 900К+ учащихся · 100% Практика","🚀 自2017年 · 90万+学习者信赖 · 100% 动手实践",{"de":302,"en":303,"es":304,"fr":305,"ja":306,"ko":307,"pt":308,"ru":309,"zh":310},"Kostenloser Plan auf 3 VM-Starts pro Tag begrenzt","Free Plan Limited to 3 VM Launches Per Day","Plan gratuito limitado a 3 lanzamientos de VM por día","Plan gratuit limité à 3 lancements de VM par jour","無料プランは1日3回のVM起動に制限されています","무료 플랜은 하루 3회 VM 실행으로 제한됩니다","Plano gratuito limitado a 3 inicializações de VM por dia","Бесплатный план ограничен 3 запусками ВМ в день","免费计划每天限制启动3个虚拟机",{"key":312,"text":255,"tags":313,"data":314},"country_codes",[273],{"codes":315},[316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385],{"code":317,"emoji":318},"IN","🇮🇳",{"code":320,"emoji":321},"ID","🇮🇩",{"code":323,"emoji":324},"EG","🇪🇬",{"code":326,"emoji":327},"PK","🇵🇰",{"code":329,"emoji":330},"MY","🇲🇾",{"code":332,"emoji":333},"VN","🇻🇳",{"code":335,"emoji":336},"UG","🇺🇬",{"code":338,"emoji":339},"PH","🇵🇭",{"code":341,"emoji":342},"BR","🇧🇷",{"code":344,"emoji":345},"ET","🇪🇹",{"code":347,"emoji":348},"BD","🇧🇩",{"code":350,"emoji":351},"NG","🇳🇬",{"code":353,"emoji":354},"KE","🇰🇪",{"code":356,"emoji":357},"IR","🇮🇷",{"code":359,"emoji":360},"MX","🇲🇽",{"code":362,"emoji":363},"TR","🇹🇷",{"code":365,"emoji":366},"DZ","🇩🇿",{"code":368,"emoji":369},"SD","🇸🇩",{"code":371,"emoji":372},"AO","🇦🇴",{"code":374,"emoji":375},"PE","🇵🇪",{"code":377,"emoji":378},"GH","🇬🇭",{"code":380,"emoji":381},"MZ","🇲🇿",{"code":383,"emoji":384},"IQ","🇮🇶",{"code":386,"emoji":387},"UZ","🇺🇿",{"key":389,"text":390,"tags":391,"data":395},"free_labs_page","free labs 页面 TDK",[273,392,393,394],"trial_user","pro_user","not_logged_in",{"free_labs_page":396},[397,404,411,418,425,432,439,446,453],{"description":398,"lang":399,"meta_description":400,"meta_keywords":401,"meta_title":402,"title":403},"1000+ Free Interactive Labs in 30+ Tech Fields for Developers and Students. Practice and enhance your skills with free hands-on exercises and real-world scenarios.\n","en","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.\n","Free Labs, LabEx, Interactive Labs, Free Tech Skills, Free Hands-On Practice, Online Learning\n","Free Labs | Interactive Practice in 30+ Tech Fields","Free Labs",{"description":405,"lang":406,"meta_description":407,"meta_keywords":408,"meta_title":409,"title":410},"为开发者和学生量身打造的 1000+ 免费互动实验，覆盖 30+ 技术领域。 通过免费实践练习和真实场景，提升您的技能。\n","zh","探索 LabEx 提供的 1000+ 免费互动实验，涵盖 Linux、DevOps、网络安全、数据科学、 Web 开发、机器学习等领域。在动态环境中免费获得专家指导的培训和实践机会。\n","免费实验, LabEx, 互动实验, 免费技术技能, 免费实践练习, 在线学习\n","免费实验 | 30+ 技术领域互动实践","免费实验",{"description":412,"lang":413,"meta_description":414,"meta_keywords":415,"meta_title":416,"title":417},"Más de 1000 laboratorios interactivos gratuitos en más de 30 áreas tecnológicas para desarrolladores y estudiantes. Mejora tus habilidades con ejercicios prácticos gratuitos y escenarios del mundo real.\n","es","Explora más de 1000 laboratorios interactivos gratuitos de LabEx en Linux, DevOps, Ciberseguridad, Ciencia de Datos, Desarrollo Web, Machine Learning y más. Accede gratis a formación guiada por expertos y práctica en entornos dinámicos.\n","Laboratorios Gratuitos, LabEx, Laboratorios Interactivos, Habilidades Técnicas Gratis, Práctica Práctica Gratuita, Aprendizaje en Línea\n","Laboratorios Gratuitos | Práctica Interactiva en Más de 30 Áreas Tecnológicas","Laboratorios Gratuitos",{"description":419,"lang":420,"meta_description":421,"meta_keywords":422,"meta_title":423,"title":424},"Plus de 1000 laboratoires interactifs gratuits dans plus de 30 domaines technologiques pour les développeurs et les étudiants. Améliorez vos compétences avec des exercices pratiques gratuits et des scénarios réels.\n","fr","Découvrez plus de 1000 laboratoires interactifs gratuits de LabEx en Linux, DevOps, Cybersécurité, Science des Données, Développement Web, Machine Learning et plus encore. Accédez gratuitement à des formations dirigées par des experts et à des exercices pratiques dans un environnement dynamique.\n","Laboratoires Gratuits, LabEx, Laboratoires Interactifs, Compétences Techniques Gratuites, Pratique Pratique Gratuite, Apprentissage en Ligne\n","Laboratoires Gratuits | Pratique Interactive dans Plus de 30 Domaines Technologiques","Laboratoires Gratuits",{"description":426,"lang":427,"meta_description":428,"meta_keywords":429,"meta_title":430,"title":431},"Über 1000 kostenlose interaktive Labs in über 30 Technologiebereichen für Entwickler und Studierende. Verbessere deine Fähigkeiten mit kostenlosen praktischen Übungen und realen Szenarien.\n","de","Entdecke über 1000 kostenlose interaktive Labs von LabEx in Bereichen wie Linux, DevOps, Cybersicherheit, Datenwissenschaft, Webentwicklung, maschinelles Lernen und mehr. Erhalte kostenlosen Zugang zu von Experten geleiteten Schulungen und praktischen Übungen in einer dynamischen Umgebung.\n","Kostenlose Labs, LabEx, Interaktive Labs, Kostenlose Technische Fähigkeiten, Kostenlose Praktische Übungen, Online-Lernen\n","Kostenlose Labs | Interaktive Übungen in Über 30 Technologiebereichen","Kostenlose Labs",{"description":433,"lang":434,"meta_description":435,"meta_keywords":436,"meta_title":437,"title":438},"開発者や学生向けに、30以上の技術分野をカバーする1000以上の無料インタラクティブなラボ。 無料の実践練習と現実のシナリオでスキルを向上させましょう。\n","ja","LabExの1000以上の無料インタラクティブなラボを、Linux、DevOps、サイバーセキュリティ、 データサイエンス、ウェブ開発、機械学習などで体験。専門家による指導とダイナミックな環境での 無料実践練習を利用できます。\n","無料ラボ, LabEx, インタラクティブなラボ, 無料技術スキル, 無料実践練習, オンライン学習\n","無料ラボ | 30以上の技術分野でインタラクティブな実践","無料ラボ",{"description":440,"lang":441,"meta_description":442,"meta_keywords":443,"meta_title":444,"title":445},"Более 1000 бесплатных интерактивных лабораторий в более чем 30 технических областях для разработчиков и студентов. Совершенствуйте свои навыки с бесплатными практическими упражнениями и реальными сценариями.\n","ru","Ознакомьтесь с более чем 1000 бесплатных интерактивных лабораторий от LabEx по Linux, DevOps, кибербезопасности, науке о данных, веб-разработке, машинному обучению и многому другому. Получите бесплатный доступ к обучению под руководством экспертов и практическим упражнениям в динамичной среде.\n","Бесплатные Лаборатории, LabEx, Интерактивные Лаборатории, Бесплатные Технические Навыки, Бесплатная Практика, Онлайн-Обучение\n","Бесплатные Лаборатории | Интерактивная Практика в Более Чем 30 Технических Областях","Бесплатные Лаборатории",{"description":447,"lang":448,"meta_description":449,"meta_keywords":450,"meta_title":451,"title":452},"개발자와 학생을 위해 30개 이상의 기술 분야를 다루는 1000개 이상의 무료 인터랙티브 랩. 무료 실습 연습과 실제 시나리오로 스킬을 향상하세요.\n","ko","LabEx의 1000개 이상의 무료 인터랙티브 랩을 통해 Linux, DevOps, 사이버 보안, 데이터 사이언스, 웹 개발, 머신 러닝 등을 탐구하세요. 전문가가 이끄는 교육과 동적 환경에서의 무료 실습 기회를 누리세요.\n","무료 랩, LabEx, 인터랙티브 랩, 무료 기술 스킬, 무료 실습 연습, 온라인 학습\n","무료 랩 | 30개 이상의 기술 분야에서 인터랙티브 연습","무료 랩",{"description":454,"lang":455,"meta_description":456,"meta_keywords":457,"meta_title":458,"title":459},"Mais de 1000 laboratórios interativos gratuitos em mais de 30 áreas tecnológicas para desenvolvedores e estudantes. Aprimore suas habilidades com exercícios práticos gratuitos e cenários do mundo real.\n","pt","Explore mais de 1000 laboratórios interativos gratuitos da LabEx em Linux, DevOps, Cibersegurança, Ciência de Dados, Desenvolvimento Web, Machine Learning e mais. Obtenha acesso gratuito a treinamentos liderados por especialistas e prática em ambientes dinâmicos.\n","Laboratórios Gratuitos, LabEx, Laboratórios Interativos, Habilidades Técnicas Gratuitas, Prática Prática Gratuita, Aprendizado Online\n","Laboratórios Gratuitos | Prática Interativa em Mais de 30 Áreas Tecnológicas","Laboratórios Gratuitos",{"key":461,"text":462,"tags":463,"data":464},"ai_check","ai inspect 是否开启",[273,392,393],{"ai_check":232},{"key":466,"text":467,"tags":468,"data":469},"exercises_page","Exercises 页面 TDK",[273,392,393,394],{"exercises_page":470},[471,477,483,489,495,501,507,513,519],{"description":472,"lang":399,"meta_description":473,"meta_keywords":474,"meta_title":475,"title":476},"Explore 2000+ hands-on exercises and real-world challenges across 30+ tech domains. Build your skills with guided practice and interactive scenarios.\n","Practice hands-on skills across Linux, Python, DevOps, Cybersecurity, and more. Level up through guided tasks, troubleshooting labs, and scenario-based exercises built for real-world learning.\n","Exercises, Challenges, LabEx, Hands-On Practice, Tech Skills, Interactive Learning, Online Exercises\n","Interactive Exercises & Real-World Challenges","Exercises",{"description":478,"lang":406,"meta_description":479,"meta_keywords":480,"meta_title":481,"title":482},"探索覆盖 30+ 技术领域的 2000+ 动手练习和真实挑战，通过引导式练习提升实战能力。\n","覆盖 Linux、Python、DevOps、网络安全等领域的动手技能练习。 通过引导任务、故障排查实验和基于场景的练习，提升实战能力。\n","技术练习, 挑战任务, LabEx, 动手实践, 技术技能提升, 在线练习, 互动学习\n","互动练习与真实挑战","技术练习",{"description":484,"lang":413,"meta_description":485,"meta_keywords":486,"meta_title":487,"title":488},"Explora más de 2000 ejercicios prácticos y desafíos reales en más de 30 áreas tecnológicas. Mejora tus habilidades con práctica guiada e interactiva.\n","Practica habilidades prácticas en Linux, Python, DevOps, Ciberseguridad y más. Mejora con tareas guiadas, laboratorios de resolución de problemas y ejercicios basados en escenarios reales.\n","Ejercicios, Desafíos, LabEx, Práctica Práctica, Habilidades Técnicas, Aprendizaje Interactivo, Ejercicios en Línea\n","Ejercicios Interactivos y Desafíos Reales","Ejercicios",{"description":490,"lang":420,"meta_description":491,"meta_keywords":492,"meta_title":493,"title":494},"Découvrez plus de 2000 exercices pratiques et défis concrets dans plus de 30 domaines technologiques. Renforcez vos compétences grâce à une pratique guidée et interactive.\n","Pratiquez des compétences pratiques en Linux, Python, DevOps, Cybersécurité et plus encore. Progressez grâce à des tâches guidées, des labs de dépannage et des exercices basés sur des scénarios réels.\n","Exercices, Défis, LabEx, Pratique Interactive, Compétences Techniques, Apprentissage en Ligne\n","Exercices Interactifs et Défis Concrets","Exercices",{"description":496,"lang":427,"meta_description":497,"meta_keywords":498,"meta_title":499,"title":500},"Über 2000 praktische Übungen und reale Herausforderungen in über 30 Technologiebereichen. Stärke deine Fähigkeiten durch geführte und interaktive Praxis.\n","Trainiere praktische Fähigkeiten in Linux, Python, DevOps, Cybersicherheit und mehr. Steigere dein Können mit geführten Aufgaben, Fehlersuche-Labs und szenariobasierten Übungen für echtes Lernen.\n","Übungen, Herausforderungen, LabEx, Praktische Übung, Technische Fähigkeiten, Interaktives Lernen, Online-Übungen\n","Interaktive Übungen & Reale Herausforderungen","Übungen",{"description":502,"lang":434,"meta_description":503,"meta_keywords":504,"meta_title":505,"title":506},"30以上の技術分野にわたる2000以上の実践的な練習問題やチャレンジを体験。ガイド付きの練習でスキルを磨きましょう。\n","Linux、Python、DevOps、サイバーセキュリティなどの実践スキルを習得しましょう。 ガイド付きタスクやトラブルシューティングラボ、シナリオに基づいた演習でスキルを向上させましょう。\n","練習問題, チャレンジ, LabEx, 実践スキル, 技術力向上, インタラクティブラーニング, オンライン練習\n","インタラクティブな練習問題と現実的なチャレンジ","練習問題",{"description":508,"lang":441,"meta_description":509,"meta_keywords":510,"meta_title":511,"title":512},"Более 2000 практических упражнений и реальных задач в более чем 30 технических областях. Развивайте свои навыки через интерактивную практику.\n","Отрабатывайте практические навыки в Linux, Python, DevOps, кибербезопасности и других областях. Повышайте уровень через пошаговые задания, лаборатории по устранению неполадок и упражнения, основанные на реальных сценариях.\n","Упражнения, Задачи, LabEx, Практика, Технические Навыки, Интерактивное Обучение, Онлайн Упражнения\n","Интерактивные Упражнения и Реальные Задачи","Упражнения",{"description":514,"lang":448,"meta_description":515,"meta_keywords":516,"meta_title":517,"title":518},"30개 이상의 기술 분야에 걸친 2000개 이상의 실습 연습 및 실제 과제를 경험하세요. 가이드형 실습으로 기술 능력을 향상하세요。\n","Linux, Python, DevOps, 사이버 보안 등 다양한 분야의 실습 스킬을 연습하세요. 가이드 과제, 문제 해결 랩, 시나리오 기반 연습을 통해 실전 역량을 향상하세요.\n","연습문제, 도전과제, LabEx, 실습훈련, 기술역량 향상, 인터랙티브 학습, 온라인 연습\n","인터랙티브 연습 & 실전 도전 과제","연습문제",{"description":520,"lang":455,"meta_description":521,"meta_keywords":522,"meta_title":523,"title":524},"Explore mais de 2000 exercícios práticos e desafios reais em mais de 30 áreas tecnológicas. Melhore suas habilidades com prática guiada e interativa.\n","Pratique habilidades práticas em Linux, Python, DevOps, Cibersegurança e mais. Evolua com tarefas guiadas, laboratórios de resolução de problemas e exercícios baseados em cenários reais.\n","Exercícios, Desafios, LabEx, Prática Interativa, Habilidades Técnicas, Exercícios Online, Aprendizado Prático\n","Exercícios Interativos e Desafios Reais","Exercícios",[],[],[],{"fontSize":529,"darkTheme":237,"monitoring":237},"md",[],[],[],[],{"currentLocale":399,"defaultLocale":399,"env":535,"name":536,"url":537},"production","LabEx","https://labex.io",["Set"],{"questionDetail-how-does-html-structure-a-web-page-92740-en":242,"footerData_en":242,"answerList-structured-how-does-html-structure-a-web-page-92740":242,"answerList-how-does-html-structure-a-web-page-92740-undefined-undefined-undefined":242},"/questions/how-does-html-structure-a-web-page-92740"]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"548529e",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",webPushServerKey:"BHIC0R48BSznqt8oCmKfQJkty77I0SV-EWdNqJ-3EPJ-HUBqnXKlrw_6cowDynxkVdNA26Y1q6s-VTaUdBYYICU",xAuth:"",stripeKey:"pk_live_51NnFfaISCR4x8ogMvIwl9UJQpDybg8tc41t8igKNOtejuDkPiQBvjShWmA94hm6Ii7hBpCxyiJ5CceACBNvIJWFj00KyBHumTT",i18n:{baseUrl:"https://labex.io",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",language:"en",files:["/app/i18n/locales/en.json","/app/i18n/locales/linuxjourney/en.yml"],dir:"ltr",name:"English",flag:"🇺🇸"},{code:"zh",iso:"zh-CN",language:"zh",files:["/app/i18n/locales/zh.json","/app/i18n/locales/linuxjourney/zh.yml"],dir:"ltr",name:"简体中文",flag:"🇨🇳"},{code:"es",iso:"es-ES",language:"es",files:["/app/i18n/locales/es.json","/app/i18n/locales/linuxjourney/es.yml"],dir:"ltr",name:"Español",flag:"🇪🇸"},{code:"ja",iso:"ja-JP",language:"ja",files:["/app/i18n/locales/ja.json","/app/i18n/locales/linuxjourney/ja.yml"],dir:"ltr",name:"日本語",flag:"🇯🇵"},{code:"fr",iso:"fr-FR",language:"fr",files:["/app/i18n/locales/fr.json","/app/i18n/locales/linuxjourney/fr.yml"],dir:"ltr",name:"Français",flag:"🇫🇷"},{code:"de",iso:"de-DE",language:"de",files:["/app/i18n/locales/de.json","/app/i18n/locales/linuxjourney/de.yml"],dir:"ltr",name:"Deutsch",flag:"🇩🇪"},{code:"ru",iso:"ru-RU",language:"ru",files:["/app/i18n/locales/ru.json","/app/i18n/locales/linuxjourney/ru.yml"],dir:"ltr",name:"Русский",flag:"🇷🇺"},{code:"pt",iso:"pt-PT",language:"pt",files:["/app/i18n/locales/pt.json","/app/i18n/locales/linuxjourney/pt.yml"],dir:"ltr",name:"Português",flag:"🇧🇷"},{code:"ko",iso:"ko-KR",language:"ko",files:["/app/i18n/locales/ko.json","/app/i18n/locales/linuxjourney/ko.yml"],dir:"ltr",name:"한국어",flag:"🇰🇷"}],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>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9ec7f6395fbfe9de',t:'MTc3NjIyNDc3Mg=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>