HTML Webpage Basic Structure

Introduction
Doctype
HTML Section
Head Section
Body Section
Frequently Asked Questions(FAQ)

INTRODUCTION

HTML is a markup language for defining the content and structure of webpage. Any HTML document consists of a series of elements. Each element can have multiple attributes.

There are different types of elements. Some elements define only the metadata while others are used to create different structures like paragraph, lists, images, headings and others. We will cover every type of element in subsequent chapters. Below is a basic HTML webpage.

SAMPLE HTML CODE


<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title>
</head> 
<body> 
</body> 
</html>

Elements and its Meaning

Every HTML webpage consists of a set of basic tags. Each basic element serves specific purpose. This blogpost intends to introduce you with Basic Element. We had covered every Basic element and its child elements in detail in subsequent posts.

1. <!DOCTYPE html>

The first line of every html page is <!DOCTYPE html>. DOCTYPE informs browser which version of HTML you are using. In initial days of internet, there were no web standards. So, developers choose a web browser and built their site supporting that browser. This resulted in website which is not rendered properly on another browser.

So W3C (world wide consortium) build a set of web standards to solve this confusion. To support previous websites browsers were equipped with different rendering modes known as Quirks mode. When you specify <!DOCTYPE html> you use W3C web standard mode and when you don't specify it browser use Quirks mode to support old websites.

2. <html>

The <html> element is the root element of the HTML document. All the other elements in webpage are its descendants. There can be only one <html> element in a webpage.

In HTML it is not required to specify <html> start and end tags. Including <html> start tag will allow developer to specify the lang attribute, which specifies the language of the webpage.

<html lang="en">

3. <head>

The <head> of a webpage is the part that is not displayed in the browser. It contains metadata about the webpage. The type of information that can be included are title, stylesheets, internal CSS, javascripts, HTML header info, author and others. You can explore HTML head in detail in our Head section where all topics are covered in detail. Important metadata elements which are defined in head section are listed below.

<title> : It defines the title of webpage that is shown in browser's title bar or page Tab.
<meta> : This tag is used to add meta data to webpage. You can include different types of metadata like author-name, http-headers, charset, viewport and others.
<style> : This tag contains style information for a webpage which is known as Internal CSS.
<link> : This tag is used to link external resources to the webpage. You can link fonts, external stylesheets, favicons and others.
<script> : This element is used to include executable code like javascript to the webpage.

NOTE:

<head> should be the first child of <html> element.

3. <body>

The <body> element contains all the main content of the webpage. It is the part of webpage that is displayed in the browser. It can contain any combination of html elements like paragraphs, headings, links, images, tables and others. All the above elements are described in details in our HTML course.

NOTE:

<body> should be the second child of <html> element.

Frequently Asked Questions (FAQ)

What DOCTYPE is Used for HTML5?

DOCTYPE informs browser which version of HTML you are using. HTML5 uses a simplified DOCTYPE declaration, which is:
<!DOCTYPE html>

What Happens If DOCTYPE Is Not Given in HTML?

If a webpage does not include a DOCTYPE declaration, the browser may enter Quirks Mode. In quirks mode, the browser attempts to display the page the same way older browsers would, often using non-standard interpretations of HTML and CSS.

Webpage rendered may be have Inconsistent CSS rendering, Box model differences or modern HTML5/CSS3 features might not work properly.

Where is DOCTYPE Located on a Webpage?

The DOCTYPE declaration is always placed at the very top of an HTML document, before the <html> tag. It is the first line of every html page.

Can an HTML Document Have Multiple <head> Tags?

No, an HTML document should not have multiple <head> tags. According to the HTML specification, an HTML document can only have one <head> section inside the <html> element.

What Happens If There Are Multiple <head> Tags in HTML?

Having multiple <head> tags in an HTML document is invalid and can cause issues. If a webpage has multiple <head> tags, browsers may handle them differently, leading to unexpected behavior:

Some browsers might completely disregard the second <head>.
Others may combine both <head> sections into a single one.
Some might relocate the second <head>'s content into the <body>, potentially disrupting styles and scripts.
This can result in validation errors, negatively impacting SEO and accessibility.

What Does the <head> Tag Do in HTML?

The <head> tag in HTML contains metadata (information about the document) and resources that help structure and style the webpage. It is placed inside the <html> element and comes before the <body> tag. Key Functions of the <head> Tag are listed below.

Defines Metadata – Provides information like character encoding, page title, and descriptions.
Includes Styles & Fonts – Links CSS stylesheets and fonts for webpage styling.
Loads Scripts – Adds JavaScript files or inline scripts for interactivity.
Improves SEO & Accessibility – Helps search engines and social media platforms understand the page content.

Which html elements can be found in <head> tag?

The <head> tag contains metadata and resources that help define the behavior, styling, and structure of a webpage. Below are the key elements commonly placed inside the <head> section:

<title> - Defines the webpage title
<meta> - specifies character encoding, description, viewport settings, author's name and others
<link> - Links external stylesheets, fonts, or icons.
<style> - Adds internal CSS styles.
<script> - Adds JavaScript (inline or external).
<base> - Sets a base URL for relative links.
<noscript> - Provides alternative content if JavaScript is disabled.

Where is the head section of html?

The <head> section is located inside the <html> tag and before the <body> tag in an HTML document. It contains metadata and links to external resources like stylesheets and scripts but does not display content directly on the webpage.

Can html body tag have id?

Yes, the <body> tag in HTML can have an id attribute. This is useful for styling with CSS or targeting the body with JavaScript. However, keep in mind that an id should be unique within an HTML document.

Can html have multiple body tags?

No, an HTML document cannot have multiple the <body> tags. The <body> element represents the main content of an HTML document and should appear only once inside the <html> tag.

Is it valid to include a <div> element inside the <head> section of an HTML document?

No, you cannot place a div tag inside the head element in HTML document. The head element is meant to contain metadata, links to stylesheets, scripts, and other non-rendered resources. The div tag is a flow content (block-level element), and only metadata content is allowed inside head.

What Happens when Multiple DOCTYPEs are used?

In HTML, a website should only have one DOCTYPE declaration at the very beginning of the document. If you have two DOCTYPE declarations in your HTML, the browser will likely ignore the second one and use the first one, since only one DOCTYPE is allowed.