HTML Basics Tutorial
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.
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.
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:
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
<p>Paragraph - HTML Basics Tutorial.
<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:
<br>. Empty elements do not have an end tag.
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" = "
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
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
<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.
<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
<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
<!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>
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.
<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 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.
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>
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
<href>. To use button as hyperlink, use this syntax:
<button onclick="document.location='url'">HTML Basics Tutorial</button>
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 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
<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>
HTML Basics Tutorial Video
You can also watch the above HTML Basics tutorial viddeo to understand the HTML Basics more clearly. So in this HTML Basics Tutorial we learned all the basic things that can help you to create a web page easily.
Let's connect online: