Html Basics

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

Html Basics

HTML Documents

HTML documents starts with a document type declaration: <!DOCTYPE html>.

The HTML document begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example

				
					<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

				
			

Output:

My First Heading

My first paragraph.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration describes the type of document, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page.

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

HTML Headings

HTML headings are starts from the <h1> to <h6> tags.

<h1> illustrates the most important heading.

<h6> illustrates the least important heading:

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

				
			

Output:

html heading

HTML Paragraphs

HTML paragraphs are defined with the tag.

Example:

				
					<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

				
			

Output:

This is a paragraph.

This is another paragraph.

HTML Links

HTML links are defined with the a tag.

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.mywebhostguru.com">This is a link</a>
</body>
</html>



				
			

Output:

HTML Links

HTML links are defined with the a tag:

This is a link

HTML Images

				
					<img decoding="async" src="webhostguru.jpg" alt="webhostguru.com" width="104" height="142">
				
			

Output:

mywebhostguru.com

HTML images are defined with the tag.

The source file (src), alternative text (alt), width, and height are used as attributes

How to View HTML Source?

Have you ever seen a Web page and wondered “Hey! How did they do that?”

Viewing the HTML Source Code:

Right-click on an HTML page and select “View Page Source” in the browser you are using. This will open a window that will display the HTML source code of the page.

Inspecting an HTML Element:

Right-click on an element and choose “Inspect” or “Inspect Element” to see the elements. The HTML or CSS can also be edited in the Elements or Styles panel.