Structure of HTML Document
Structure of HTML Document
Structure of HTML Document is a text file that contains the code and structure for a web page. It is written in HTML (Hypertext Markup Language) and consists of a series of elements that define the content, layout, and functionality of the page.
The basic structure of an HTML Document includes the following elements:
1.<!DOCTYPE html>: This is the document type declaration, which tells the web browser that this document is written in HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<!-- Additional meta tags, link to stylesheets, or other head elements go here -->
</head>
<body>
<!-- Content of the web page goes here -->
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<!-- More HTML elements and content -->
<!-- Script tags for JavaScript can be included at the end of the body -->
<script src="your-script.js" defer></script>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
2.<html>: This is the root element of the document, which contains all other elements.
3.<head>: This contains metadata about the document, such as the page title, character set, and links to external stylesheets and scripts.
4.<title>: This sets the title of the page, which is displayed in the browser tab.
5.<body>: This contains the visible content of the page.
The <body> section contains the main content of the web page. It includes various HTML elements to structure and present information.
Headings:
Use <h1> to <h6> tags for headings, representing different levels of hierarchy. Headings organize content and improve accessibility.
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<!– More HTML elements and content –>
Within the <body> element, there are a variety of HTML elements that can be used to create the structure and content of the page. These include:
1.<header>: This is a container for the page header, which typically includes the page title or logo.
2.<nav>: This is a container for navigation links.
3.<main>: This is a container for the main content of the page.
4.<article>: This is a container for an article or other self-contained piece of content.
5.<section>: This is a container for a section of related content.
6.<h1> – <h6>: These are heading elements, which set the title of a section or article.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
7.<p>: This is a paragraph element, which contains the text content of a section or article.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
8.<img>: This is an image element, which displays an image on the page.
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20150'%3E%3C/svg%3E" alt="abc.com" width="100" height="150" data-lazy-src="picture.jpg"><noscript><img decoding="async" src="picture.jpg" alt="abc.com" width="100" height="150"></noscript>
9.<a>: This is an anchor element, which creates a hyperlink to another page or resource.
10.<ul> and <li>: These are used to create unordered lists of items.
11.<ol> and <li>: These are used to create ordered lists of items.
12.<table>: This is a table element, which creates a table on the page.
13.<form>: This is a form element, which creates a form for user input.
14.<input>: This is an input element, which creates a field for user input.
15.<button>: This is a button element, which creates a clickable button on the page.
16.<label>: This is a label element, which provides a text label for an input field.
17.<select> and <option>: These are form elements, which create a dropdown list for user selection.
Conclusion:
In conclusion, a well-structured HTML Document is the foundation for effective web development. Proper usage of HTML elements, adherence to standards, and consideration for accessibility contribute to a positive user experience. Regularly validating HTML using tools like the W3C Markup Validation Service ensures code quality and compatibility across browsers. By following these guidelines, developers can create clean, organized, and accessible HTML Documents for a wide range of web applications.
To view an HTML Document in a web browser, simply open the file in the browser or drag and drop it onto the browser window. The browser will parse the HTML code and display the page as it was designed.