HTML beginner tutorial

<!DOCTYPE html>

<h1>My Heading</h1>
<p>My paragraph.</p>

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

HTML Headings

If you have documents with genuine headings, then there are HTML tags specifically designed just for them. HTML headings are defined with the <h1> to <h6> tags.

HTML Paragraphs

HTML paragraphs are defined with the <p> tag. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.


HTML Links

HTML links are defined with the <a> tag. HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. A link does not have to be text. A link can be an image or any other HTML element.


<a href=””>This is a link</a>

HTML Images

HTML images are defined with the <img> tag.

  • src — Specifies the path to the image
  • alt — Specifies an alternate text for the image


<img src=”url” alt=”alternatetext”>

HTML table

You can copy the following code into the body of your document and then we will go through what each tag is doing:

<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>

HTML Lists

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:


Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:


How to visit the website live?

If you are using VS Code then read this blog.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Firdaus Jawed

Firdaus Jawed


Sophomore at NITP || web team member at IEEE NITP || design team, web team and tech team member at robotics club NITP || PR team coordinator at Hackslash NITP