HTML Course Structure of an HTML Document
Last Updated :
09 May, 2024
INTRODUCTION
HTML , or Hypertext Markup Language , structures web pages. Unlike programming languages, it isn’t compiled or interpreted. Browsers render HTML directly, displaying content without typical errors. It’s a markup language, not a programming one, making execution smooth without encountering compilation or interpretation issues.
Course Navigation
Structure of an HTML Document
HTML DOCUMENTS STRUCTURE Html used predefined tags and attributes to tell the browser how to display content, means in which format, style, font size, and images to display. Html is a case insensitive language. Case insensitive means there is no difference in upper case and lower case ( capital and small letters) both treated as the same, for r example ‘D’ and ‘d’ both are the same here. There are generally two types of tags in HTML:
Paired Tags : These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags. Empty Tags : These tags do not require to be closed. Below is an example of a (<b>) tag in HTML, which tells the browser to bold the text inside it.
Tags and attributes: HTML tags are structural components enclosed in angle brackets. They’re opened and closed with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while others allow attributes like width, height, and controls for defining properties or storing metadata.
Html documents structured mentioned below:
Structure of an HTML Document An HTML Document is mainly divided into two parts:
HEAD : This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc. BODY : This contains everything you want to display on the Web Page. HTML Document Structure
Let us now have a look at the basic structure of HTML. That is the code that is a must for every webpage to have:
HTML
<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
< html lang = "en" >
<!-- DEfines languages of content : English -->
< head >
<!-- Information about website and creator -->
< meta charset = "UTF-8" />
< meta
http-equiv = "X-UA-Compatible"
content = "IE=edge"
/>
<!-- Defines the compatibility of version with browser -->
< meta
name = "viewport"
content = "width=device-width,
initial-scale=1.0"
/>
<!-- for make website responsive -->
< meta name = "author" content = "Mr.X" />
< meta
name = "Linkedin profile"
content = "WWW.linkedin.com/Mr.X_123"
/>
<!-- To give information about author or owner -->
< meta
name = "description "
content = "A better place to learn computer science"
/>
<!-- to explain about website in few words -->
< title > GeeksforGeeks</ title >
<!-- Name of website or content to display -->
</ head >
< body >
<!-- Main content of website -->
< h1 > GeeksforGeeks</ h1 >
< p > A computer science portal for geeks</ p >
</ body >
</ html >
Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above piece of HTML code:
DOCTYPE Declaration (<!DOCTYPE html>): Specifies the HTML version; typically, it indicates HTML5. <html>: Root element encompassing the entire HTML document structure. Parent to <head> and <body> tags. Specifies language with the “lang” attribute (e.g., lang=”en” for English). <head>: Container for metadata, title, CSS, scripts, etc. Content isn’t directly displayed but serves informational and structural purposes. Note: for better understanding refer above code of html.
<title> = to store website name or content to be displayed.
<link> = To add/ link css( cascading style sheet) file.
<meta> = 1. to store data about website, organisation ,
creator/ owner
2. for responsive website via attributes
3. to tell compatibility of html with browser
<script> = to add javascript file.
<body>: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element. Following tags and elements used in the body.
1 . <h1> ,<h2> ,<h3> to <h6> 2. <p> 3. <div> and <span> 4. <b>, <i> and<u> 5. <li>,<ul>and<ol>. 6. <img> , <audio> , <video> and<iframe> 7. <table> <th> , <thead>and<tr>. 8. <form> 9. <label> and <input> others………. To learn more about an HTML Document structure, please visit :
HTML is the foundation of web pages, and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .
Share your thoughts in the comments
Add Your Comment
Please Login