HTML Structure

HTML Page Structure

HTML Page Structure given below:


HTML Page Structure


<!DOCTYPE html>
<html>
<head>
<title>
<!-- title section -->
</title>
<!-- header section for css and js files and meta information -->
</head>
<body>
<!-- body section for structure of webpage -->
</body>
</html>

Web Browsers

Web browsers (Chrome, Edge, Firefox, Safari) are designed to accurately interpret and display HTML content. A browser does not show HTML tags, but rather utilises them to decide how to display a document.

Example of chrome web browser shown below.

Browser

HTML Elements

An HTML element consists of a start tag, content, and an end tag.

Element

Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!


HTML Basics

When we start to code in HTML, we need to think about and include a number of tags. These tags help us put things in our scripts or web pages in order and give them a basic look. These step-by-step instructions will help you learn how to write HTML.


HTML Document

HTML Page Structure


<!DOCTYPE html>
<html>
<head>
<title>
<!-- title section -->
</title>
<!-- header section for css and js files and meta information -->
</head>
<body>
<!-- body section for structure of webpage -->
</body>
</html>
  • <!DOCTYPE html>: A HTML document tag is the first thing in every HTML document. Even though it's not required, it's a good idea to start the document with the tag shown below. We will learn more about doc types later in the tutorial.

Syntax


<!DOCTYPE html>
  • <html>: Every HTML code must be surrounded by standard HTML tags. The tag begins with <html> and concludes with </html>.
  • <head>: Head tag contains all of the page's or document's header information, such as the page's title and other miscellaneous information. This data is contained within the head tag, which begins with <head> and ends with </head>. We will discuss about content of head tags later in the tutorial.
  • <title>: Title tag contains title of the web page, which is shown in the browser title bar. This data is contained within the title tag, which begins with <title> and ends with </title>.
  • <body>: The body tag is the most important tag in an HTML document. It contains all the visible content on a web page, like images, videos, headings, etc. This tag starts with <body> and ends with </body>. In a later tutorial, we'll learn more about the tags that are inside the body tag.

HTML Headings

These tags enable us to give a webpage's content headings. These tags are written primarily within the body tag. HTML provides six heading tags, ranging from <h1> to <h6>. Each tag presents the heading in a distinct font style and size.

HTML Headings Tags Example Given Below:


HTML Headings


<html>
<head>
<title>Picallens</title>
</head>
<body>
<h1>Hiii Picallens!</h1>
<h2>Hiii Picallens!</h2>
<h3>Hiii Picallens!</h3>
<h4>Hiii Picallens!</h4>
<h5>Hiii Picallens!</h5>
<h6>Hiii Picallens!</h6>
</body>
</html>

Output:

HTML Heading Output

HTML Paragraphs

Paragrah tag is used to display paragraphs statements on web pages. It starts with <p> and ends with </p>.

HTML Paragrah Tags Example Given Below:


HTML Paragraphs


<html>
<head>
<title>Picallens</title>
</head>
<body>
<p>Hi Picallens</p>
<p>Hi Picallens!</p>
</body>
</html>

Output:

HTML Paragraph Output

There are also various other tags in HTML to insert links, audios, images, videos, etc and various other formatting tags that we will be learning in the later sections. Thanks You for Support!