Basics of HTML for web development

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. This tag specifies the language you will write on the page. In this case, the language is HTML 5 and <!DOCTYPE> must appear once, at the top of the page before any HTML tags. The <!DOCTYPE> declaration is not case sensitive.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

  • <h1> defines the most important heading and provides bigger text.
  • <h6> defines the least important heading and provides small text.

Example:

<h1>This is heading under h1 tag</h1>
<h2>This is heading under h2 tag</h2>
<h3>This is heading under h3 tag</h3>
<h4>This is heading under h4 tag</h4>
<h5>This is heading under h5 tag</h5>
<h6>This is heading under h6 tag</h6>

The result of above code is:

This is heading under h1 tag

This is heading under h2 tag

This is heading under h3 tag

This is heading under h4 tag

This is heading under h5 tag
This is heading under h6 tag

You can observe in the result part of <h1> to <h6> tags. There is a gradual decrease in size of text from <h1> tag to <h6> tag.

HTML Paragraphs

HTML paragraphs are defined by <p> tag. The text placed between <p> and </p> tag will convert plane text into a paragraph.

<p>This is a first paragraph.</p>
<p>This is second paragraph.</p>

HTML Links

HTML links are defined with the <a> tag which is also known as anchor tag. The link’s destination is specified in the href attribute. The Attributes are the properties of HTML tags used to provide additional information about HTML elements.

<a href="https://www.programmingtutorial.in">Click to visit programming tutorial</a>

Inserting HTML Images

HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes:

<img src="programmingtutorial.jpg" alt=" https://www.programmingtutorial.in " width="150" height="150">

Here src means source of image. The alt tag takes the control to the link provided against alt tag if the image does not load.

Let us write a small HTML code to display a title, a heading and a paragraph

<!DOCTYPE html>
<html>
<title>First HTML program</title>
<body>
<h1>Welcome to programming tutorial</h1>
<p>Programming tutorial is a platform which provides basic 
knowledge of programming concepts and other application tutorials.</p>
</body>
</html>

This small program will result as shown below: