HTML Basics Tutorial

Table of Contents show

In this tutorial, I'm going to discuss the HTML Basics for the beginners. I have tried to make it very easy and simple so it can be understandable for everyone. This HTML Basics Tutorial contains the basics of HTML like Elements, Attributes, Links, Images, Formatting, Lists, etc.

Basic Introduction

HTML is the most required computer language in web development. Every web page on the Internet is written with the HTML code. The web browser shows the HTML code as a web page.

HTML is short for "Hyper Text Markup Language". HTML shows the web content on web browsers. The web content can be writing, links, pictures, and even sound and video. These content are well described with the HTML codes so the web browser can display them correctly. HTML can only show the content on the web pages. We use CSS to make web pages looking better in design. You can check out our CSS Basics Tutorial to learn how to design the HTML web pages. This HTML Basics Tutorial will help you to learn the very basic concepts of HTML.

So Basically, the HTML is:

the markup language for creating Web pages.
the structure of the web pages.
the series of the elements.

Below is the example of a Simple HTML Document.

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html> – it defines that this document is an HTML document.
<html> – it is the root element of an HTML page.
<head> – it contains meta information about the HTML page.
<title> - it is the title of the HTML page which is shown by the broswer in the page tab.
<body> - it is the container of the contents like writings, images, links, table, etc.
<h1> - it is the large heading element used to mention the heading of the paragraphs.
<p> - it is the paragraph element used to show the web page information as paragraphs.

HTML Elements

The HTML element contains the content wrapped in start tag and end tag. This HTML Basics Tutorial will cover almost all of the basic elements used to create a web pages. The HTML element can be written as:

<tagname>Content...</tagname>

So it is everything from the start tag to the end tag.

You can also see in the example explained above. It has elements like:

<h1>Heading - HTML Basics Tutorial</h1>

<p>Paragraph - HTML Basics Tutorial.</p>

Here, <h1>is a start tag and </h1> is an end tag. Never forget to specify the end tag.

When we see these elements on the browser as a web page, it will look like:

Note: All elements don't contain content, they are empty elements like <br>. Empty elements do not have an end tag.

HTML Attributes

The HTML attributes are additional information about the elements. An HTML attribute is always mentioned in the start tag of the element. HTML attribute is commonly specified as:

"Attribute Name" = "Attribute Value"

There are many kinds of attributes in HTML like href, src, alt, title, width, height, etc. We can use the HTML attribute in any element.

In the HTML Basics Tutorial, we will learn about these HTML attributes:

The href Attributes

The href attribute defines a hyperlink in the tag. The href attribute contains the URL of the page. For example:

<!DOCTYPE html>
<html>
<title>The href Attributel</title>
<body>
<a href="https://websninja.com/">Visit WebsNinja</a>
</body>
</html>

The src Attributes

The src attribute defines a source hyperlink in the elements. The src attribute contains the source URL of the file. For example, <img> tag is used to embed an image in an HTML web page. The src attribute defines the path of the image file to be displayed.

The alt Attributes

The alt attribute is an alternative text of the image. When the browser can't load the image, then the browser shows the alt text mentioned in the <img> tag.

The Width and Height Attributes

The image element should also contain the Width and Height Attributes. The Width and Height Attributes deifne the width and height properties of the image.

<!DOCTYPE html>
<html>
<title>The src Attribute</title>
<body>
<img src="panda_image.png" alt="Panda" width="500" height="500">
</body>
</html>

Keep in mind :

Always use lowercase attributes.
Always quote attribute values. Commonly, double quotes are used around the attribute values, but single quotes can also be used.

HTML Headings and Paragraphs

The HTML Headings and Paragraphs elements show the text content on the web pages. This HTML Basics Tutorial will help you to learn about all the heading and the paragraph tags used in HTML.

The HTML Headings

The HTML Headings are titles or subtitles of the content. The HTML Headings are defined with <h1> to <h6> tags. HTML headings can be of differnet sizes. <h1> is used to show the main heading of the web page, so <h1> is the most important heading. The search engines like Google also use the headings to index your web page in the search results. And, <h6> is the least important heading.

Main heading should be defined as <h1>, followed by <h2> headings, then the less important <h3>, and so on. <h2>, <h3> can be used to show the subtitles.

<!DOCTYPE html>
<html>
<title>The HTML Headings</title>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

The HTML Paragraphs

The HTML <p> element defines a paragraph. The HTML Paragraphs are block of the text. It always starts from the new line on the web page. When you want a break line in the text without starting a new paragraph, then you can use <br> tag. It will make the next text to start from the next line. For example, the first paragraph is a normal paragraph and the second is with <br> tag.

<!DOCTYPE html>
<html>
<title>The HTML Paragraphs</title>
<body>
<p>This is a normal paragraph without any line break.</p>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>

HTML Formatting

There are some elements in HTML that which are used for special meanings for the text. The HTML Formatting elements were designed to display special types of text. This HTML Basics Tutorial contains these formatting elements:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

<!DOCTYPE html>
<html>
<title>The HTML Formatting</title>
<body>
<p>This text is normal. <b>This text is bold.</b> <strong>This text is strong.</strong> <i>This text is italic.</i> <em>This text is emphasized.</em></p>
<p>HTML <small>Small</small> text. HTML <mark>Marked</mark> text.</p>
<p>My favorite sport is <del>football</del> cricket. My favorite <ins>sport</ins> is football cricket. This is <sub>subscripted</sub> text. This is <sup>superscripted</sup> text.</p>
</body>
</html>

<b> tag is same as <strong> tag, but it has no additional semantic importance. Both tags are used to make the text bold.
<i> and <em> tags are used to make the text italic. <i> tag is same as <em> tag, but it has no additional semantic importance.
<mark> tag is used to display the marked or highlight text.
<small> tag is used to display the smaller text.
<del> tag is used to display the deleted/removed text.
<ins> tag is used to display the inserted/added text.
<sub> tag displays the subscripted text.
<sup> tag is used to display the superscripted text.

HTML Links

HTML Links are the URLs of the web pages. HTML Links are hyperlinks. The user can click on the hyperlink and go to the another web page. This hyperlink can be an address of the external web page also. This HTML Basics Tutorial will help you to learn how the hyperlinks work.

Hyperlinks - Syntax

The hyperlinks are defined with the <a> tag in HTML. It's also called as Anchor tag. The URL of the another web page is defined in the <href> attribute. The hyperlink is not visible on the front-end. We can use a link text or an image to show the hyperlink so user can get that it's clickable. The hyperlink syntax is:

<a href="url">HTML Basics Tutorial</a>

<a href="https://websninja.com/html">HTML Basics Tutorial</a>

<!DOCTYPE html>
<html>
<title>The HTML Links</title>
<body>
Normal Link:
<a href="https://websninja.com/html">Visit our HTML tutorial</a>
Local Link:
<a href="/html">Visit our HTML tutorial</a>
Target with Blank Link:
<a href="https://www.facebook.com/websninja" target="_blank">Follow Us!</a>
</body>
</html>

Local Links

The first example used in the above image is an absolute URL (a full web address). A local link is the link without "https://www...." (2nd example). If we want to link the web pages from our own website, then we can use the local linksn format.

HTML Links - The target Attribute

A target attribute is also can be specified to the hyperlinks. Target defines that where to open the web page. It can be in the same browser tab or another new tab. Normally these two targets are used:

<_self> - When the hyperlink is clicked, it opens the linked web page in the same tab/window.
<_blank> - It is used to open the linked web page in new tab/window of the browser so we can also stay on the exiting page (3rd example).

HTML Links - Image as a Link

An image also can be used instead of the link text. When an image is used, then the image becomes clickable to go to the linked web page. To use image as hyperlink, use this syntax:

<a href="url"><img src="image_url" /></a>

HTML Links - Button as a Link

A button also can be used to shows the hyperlink on the web page. A default <button> tag is used to display a button. A javascript code will be used instead of <href>. To use button as hyperlink, use this syntax:

<button onclick="document.location='url'">HTML Basics Tutorial</button>

HTML Images

HTML images are displayed on the web page with <img> tag. An attribute <img> is used to specify the image web address or Source URL. This HTML Basics Tutorial will also helps you to learn how we can show the images on the web pages.

HTML Images - Syntax

<img src="url" alt="Alternative text">

<!DOCTYPE html>
<html>
<title>The HTML Images</title>
<body>
Same Folder:
<img src="penguins.jpg" alt="penguins" width="300" height="180">
Another Folder:
<img src="images/desert.jpg" alt="Panda" width="300" height="180">
Web Address:
<img src="https://websninja.com/wp-content/uploads/2020/06/HTML-Basics-Tutorial.jpg" alt="HTML Basic Tutorial" width="300" height="180">
</body>
</html>

<src> - This attribute defines the source or path of the image. It can be from the same folder of the HTML document or another folder or another web address. All the 3 cases are explained in the example above.
<width> - This attribute defines the width of the image (in pixels) on the web page.
<height> - This attribute defines the height of the image (in pixels) on the web page.
<alt> - As previoisly mentioned that this attribute is used as an alternative text for the image in case of not loading the image.

HTML Lists

HTML Lists are the group of the related items. Generally, HTML Lists is used to display the items or relatable content as a list. In this HTML Basics Tutorial we will learn two types of list.

HTML Unordered List

We use <ul> tag to display the list as unordered. The inner items starts with <li> tag. We can stylize the list items display, but it will be displayed as black circle (by default). For example, we can create a list of grocery items like this:

<!DOCTYPE html>
<html>
<title>The HTML Unordered List</title>
<body>
<ul>
<li>Sugar</li>
<li>Vegetables</li>
<li>Milk</li>
<li>Ice Cream</li>
</ul>
</body>
</html>

HTML Ordered List

An ordered list starts with <ol> tag and the inner items start with <li> tag. As the name "Ordered List" means, it will shows the list as serial numbers starting from 1. You can create the same grocery list an order list like this:

<!DOCTYPE html>
<html>
<title>The HTML Ordered List</title>
<body>
<ol>
<li>Sugar</li>
<li>Vegetables</li>
<li>Milk</li>
<li>Ice Cream</li>
</ol>
</body>
</html>