HTML Document Structure.
The basic structure of an HTML document
The fundamental organization of an HTML document is shown below.
Every newly designed html web page default main html document template is something like this.
<!DOCTYPE html> <!– Default html5 Document Type Declaration –>
<html lang=”en”> <!– The Default language set this website is english us –>
<head> <!– Head tag content information about meta information include popular links –>
<meta charset=”UTF-8″> <!– Character encoding for the document –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!– Display meta information –>
<title>Basic Doctype declaration example</title> <!– Display the title of active web page in web browser tab –>
<link rel=”stylesheet” href=”styles.css”><!– You can add all external css stylesheet info here –>
<body> <!– Here you can add your design website web page all body elements –>
<header> <!– You can add here website header elements, like website logo, navigation menu, links and more –>
<h1>Display Basic Html5 Template</h1>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>About Us</a></li>
<main> <!– Yuo can display the main content here –>
<h2>This is a simple test website</h2>
<p>this is a simple paragraph html tag explain</p>
<footer> <!– You can create custom footer element for current web page design –>
<p>© 2023 mitacademys.com! All Right Reserved </p>
The basic structure of the default html document is explained as follows.
- <!DOCTYPE html> -!DOCTYPE html The web developer makes this remark by default when describing the most recent version of an HTML document. This often refers to the current HTML5 document template extension or web page version.
- <html lang=”en”> – This is your current web page’s native language element, which also contains all the other HTML website web page elements. Use the html lang tag element to indicate the default document language for all of your websites, which is English in this case. Depending on the nation and region, this language may be Hindi, English, French, Russian, Chinese, etc.
- <head> – This section includes connections to externally used html documents’ css stylesheets (such as stylesheets and scripts), meta-information about the document heading information, and the document heading information itself.
- <meta charset=’UTF-8′> – provides the character encoding for the current web page’s default html document. For existing HTML sites, UTF-8 is now the most used text encoding standard.
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> – Displays the viewport settings for the current search engine’s responsive web design on various devices.
- <title> – Specifies the website’s title information that you are presently seeing. which is automatically shown in your web browser’s tab.
- <link rel=’stylesheet’ href=’styles.css’> – Can be connected to an external CSS script file (Cascading Style Sheets) to style one or more web pages at once on an already-existing website.
- <body> – The body of a web page serves as its primary content section. where all information, data, and web page content that is viewable is shown.
- <header> – Header elements are those that are seen at the top of every internet page. The header section normally includes the title of the current website, the logo of the website, and default components like social network links and header navigation menus.
- <main> – The current web page’s primary content is located in the <main> tag. Website headlines, paragraph text, photos, and other online components are among those that are by default stored.
- <Footer> – It shows the current web page’s footer information. It frequently shows connections to some of the most significant related pages, menus from the website’s footer, copyright information, and important links.
The <!DOCTYPE> declaration
Every HTML document type declaration, or simply every html DOCTYPE initial default tag declaration, is known as the<!DOCTYPE> declaration. Every HTML document starts out with the DOCTYPE declaration, which is a significant default statement. It describes the kind of HTML document and the current HTML file version. Every HTML web page file’s doctype declaration serves the primary function of informing all modern browsers or HTML parsers about all the requirements and regulations that must be followed to while producing the web page.
The fundamental syntax of the built-in<!DOCTYPE> declaration found in every HTML document is displayed here.
<!DOCTYPE declaration_name PUBLIC “public_identifier” “system_identifier”>
So let’s examine more closely the various parts of the<!DOCTYPE> declaration.
- declaration_name – This indicates the name of the presently selected HTML document type. The HTML5 DOCTYPE declaration is often used when developing modern websites. This is simply a declaration format in<!DOCTYPE html>.
- Public – Public tells you that the DOCTYPE declaration has a public identifier.
- “public_identifier” – A string that is optional is the public identifier. It connects the text to a certain specification or standard. Public IDs are seldom ever utilized in HTML5 versions in actual use. In earlier iterations of the HTML markup language, this is more typical. where a Document Type Definition (DTD) outlines how to utilize it.
- “system_identifier” – Another possible string is the system identifier. This details the DTD’s or its reference’s location. System IDs are not often utilised in HTML5. due to the HTML5 version’s independence from external DTD.
The HTML5 DOCTYPE declaration is now a standard and necessary declaration for the majority of web pages during modern web development.
<html>, <head>, and <body> elements
The <html>, <head>, and <body> components are the three basic structural tags or elements of HTML (Hypertext Markup Language). which are used to specify the intended organization of any HTML web page, website, and web content, such as links, animation, multimedia, audio, and video.
Here, each HTML language component is described in great depth.
Tag or element in HTML.
The root element of an HTML document is the html tag or element “html”. It includes or collects all of the web page’s developed content in both new and old html.
Two basic components are often seen in html markup language. This has a “head” segment and a “body” section. The body part saves or shows the resources and material for the full website or web page, whereas the head section stores or displays the information for the web page header.
The beginning <html> tag often displays the locale or lang language property, which is the standard for websites. It details the language of the website document for each web page (SEO) for improved accessibility and search engine optimization of all presently active search engines.
<head> For metadata and other information about a web page, the head tag functions like an information container. The visible content of the existing web page is not contained in the head tag. Typically, it displays details about the current web page, such as character encoding, viewport settings, etc.
Included in the <head> section are frequently used components.
Search engines define character encoding, viewport settings, and other site metadata in search engine results by using the <meta> element.
<title> To show or set the title of an existing web page that you are developing, use the <title> tag. Which is shown on any open web browser’s title bar or currently open tab.
Use <link> tags to add external resources, like as stylesheets and favicons, to any web page or website that seems uninteresting in order to make it more appealing or profitable.
Use the <style> element for inline css to apply CSS to any website’s web page within the same file. However, using external CSS stylesheets is more typical in general.
Various other metadata elements are used by existing websites for SEO, social media sharing, and other purposes.
A straightforward “head” section example.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Head tag explanation</title>
<link rel=”stylesheet” href=”styles.css”>
<body> html tag/element.
All of the web page’s visible content, such as text, photos, tables, frames, multimedia, audio, video, animation, and 3D objects, is contained in the <body> html body tag or element. which users of any web browser view when they access a webpage or website.
Web page headlines (h1 and h6), paragraphs (p), graphics (img), links (a), and lists (ul, ol) are all included in the HTML web page body. include HTML tag components like “li” and “form” (with “form”, “input”, and “button”), among others.
The actual webpage format or layout is included within the <body> body html tag element and is rendered as requested by the client in the active web browser.
Here is an example of a straightforward body section on a web page.
<head>This is a Head tag</head>
<title>This ia a title tag </title>
<h1>Lets explain html body tag</h1>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
<p>We can add number of web page body elements here</p>
<p>© 2023 mitacademys.com! all right reserved</p>
Meta tags for document metadata
To give all search engines details on a web document, meta tags are utilized in the HTML markup language. Any website’s or HTML page’s metadata may comprise details sent to search engines about the currently seen webpage, such as the character encoding, viewport options, author information, search terms, and more. In any HTML page that has been developed, HTML meta tags are typically shown in the <head> section.
Here are a few examples of meta tag forms that are often used in HTML documents.
Character encoding (<meta charset=”’>):
The character encoding used in the HTML document is shown in the sample above’s meta tag. Currently, UTF-8 is the most used character encoding for HTML documents and is supported by client web browsers on the World large Web for a large variety of characters from many languages.