HTML Basics

Lets learn about some basic elements of HTML like Headings, Paragraphs, Images, Links, Buttons and Lists

Lets start with a simple HTML Document or Webpage

A simple HTML webpage:

<!DOCTYPE html>
<html>
<head>
    <title>Title of page</title>
</head>
<body>
    <h1>My first page heading using <h1> tag</h1>
    <p>My first paragraph using <p> tag</p>
</body>
</html>
Explaination of above example
  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta-information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

HTML Headings

HTML provide six headings from <h1> to <h6>.

Heading <h1> is the largest heading and <h6> is the smallest heading.

<h1>Heading using <h1> tag</h1>
<h2>Heading using <h2> tag</h2>
<h3>Heading using <h3> tag</h3>
<h4>Heading using <h4> tag</h4>
<h5>Heading using <h5> tag</h5>
<h6>Heading using <h6> tag</h6>

HTML Paragraphs

Paragraphs in HTML are defined by <p> tag.

Heading <h1> is the largest heading and <h6> is the smallest heading.

<p>My first paragraph using <p> tag</p>
<p>My second paragraph using <p> tag</p>
<p>My third paragraph using <p> tag</p>

Lists

HTML provides two types of lists

  1. Ordered Lists/Numbered Lists represented by <ol> tag.
  2. Unordered lists/Bulleted Lists represented by <ul> tag.

List items are represented by <li> tag.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Bootstrap</li>
</ol>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Bootstrap</li>
</ul>

Links

In HTML links are created using the anchor tag <a>.

The destination url is added in href="... " attribute.

<a href="https://www.themelites.com/">HTML Link</a>

Buttons

Buttons in HTML are created by <button> tag.

<button>HTML Button</button>

Images

HTML defines the images with <img> tag.

Some attributes used in it are:

  • src="..." attribute is used to add the image address/url.
  • alt="..." attribute is used to provide an alternate text for slow connections.
  • height="..." and width="..." attributes are used for specifyinng the height and width of the image respectively.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghgyMDMNGZ8vlDK_WHv5y3X9pdyxCMGGH7Dbl-5kNEZQGfPigYxgNdaHFUT7wI5GJYIWtSfeSUbfFR3ZIxeQRYBhXidcaavHaOsr0-G2vUlZ_eLmj3FWGHVGFtbXpV66P5UhEq8xPjntQ/w400-h225/Blogger.jpg" alt="Blogger" height="100px" width="100px" />
Related Posts
Tags