HTML Basics
Themelites HomeContactAbout
HTML CSS Bootstrap Blogger Template JavaScript PHP

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 Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Heading</h1>
<p>Paragraph</p>
</body>
</html>
Try it

Explaination

  • 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>Page Heading1</h1>
<h2>Page Heading2</h2>
<h3>Page Heading3</h3>
<h4>Page Heading4</h4>
<h5>Page Heading5</h5>
<h6>Page Heading6</h6>
Try it

HTML Paragraphs

Paragraphs in HTML are defined by <p> tag.

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


<p>First Paragrph</p>
<p>Second Paragrph</p>
<p>Third Paragrph</p>
Try it

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>
Try it

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>
Try it

Buttons

Buttons in HTML are created by <button> tag.


<button>HTML Button</button>
Try it

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://1.bp.blogspot.com/-2d2IbdRqDU8/XrK4zu3uavI/AAAAAAAAPuc/jRF4Cylkdxc3QH6KLJvWB81XliNYfpxigCK4BGAsYHg/w400-h225/Blogger.jpg" alt="Blogger" height="100px" width="100px" />
Try it
Back to top