Learn HTML In One Article

Want to learn HTML? Then this article is helpful for you. As you go through this article you will be capable of understanding the basics of HTML.

Photo by James Harrison on Unsplash

There is a lot to learn to become a successful web developer.

HTML is one of them, HTML is the first skill to learn followed by CSS and JavaScript.

What is HTML?

HTML stands for Hypertext Markup Language. HTML was created by Tim Berners Lee in late 1991.

HTML is easy to learn and it helps you to add the content or information to the webpage.

Programming languages use logic where HTML uses tags. Tags are used to differentiate between text and HTML text. There is no limit to use tags, you can use as many tags as you want.

There are various types of Markup Languages.

  1. HTML — Hyper-text Markup language
  2. SGML — Standard Generalized Markup Language
  3. XML — Extensible Markup Language
  4. ASN.1 — Abstract Syntax Notation One
  5. MathML — Mathematical Markup Language
  6. KML — Keyhole Markup Language

History

  1. HTML — Late 1991
  2. HTML 2.0 — November 24, 1995
  3. HTML 3 — January 14, 1997
  4. HTML 4 — December 18, 1998
  5. XHTML — May 2000
  6. HTML — October 28,2014

Basic Structure of HTML

Don’t be afraid of this snippet, I will explain you line by line.

  1. <!DOCTYPE html> Tag

The <!DOCTYPE> tag is the first element and this element is used only once.

<!DOCTYPE> tag declare document type i.e. HTML 5

This tag is not case-sensitive.

Syntax:

2. <html> Tag

<html> tag is the root element of the HTML. Every Other element is enclosed within this tag.

Syntax:

3. <head> Tag

This tag contains the metadata or information on the web page. Such as Title, Script, Link, etc

Syntax:

4. <title> Tag

<title> tag displays the title of the web page at the top of the browser.

Syntax:

5. <body> Tag

The content of the web page is wrapped in the body element.

i.e. Headings, Paragraphs, Images, Links

Syntax:

Heading Tag in HTML

HTML headings provide useful information for the user. Search engines like Google, Yahoo, Duck-Duck Go uses headings to index the structure and content of webpages.

There are total six types of HTML headings

<h1>, <h2>, <h3>, <h4>, <h5> and <h6>

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

Example:

Paragraph Tag in HTML

A paragraph is the collection of sentences that are used to provide short or long information on the page to the visitors.

<p> tad defines a paragraph. Internet browsers add an empty line or margin before and after a paragraph.

Example:

Image Tag in HTML

Images are used to attract the users and it helps to rank the website in search engines.

The <img> tag is used to insert images in the webpages.

Attributes

  1. Src

Src is nothing but the source. The source is used to add the location of the image. Alt

2. Alt

Alt stands for Alternative text. To display the image, you have to add some Alternative text.

An alternative is also useful for ranking the website.

3. Width and Height

To define the image size, use the width and height attributes.

Image attribute values specified in Pixels.

Example:

Link Tag In HTML

HTML uses Hyperlinks.

Links in HTML is used to direct the user to the new web page.

The links are any type of image, video, audio, program, and HTML document.

Syntax:

Attributes

  1. href

The href attribute is used to add the destination address of the link.

2. Target

The target attribute is used to open the link in the current window or new tab.

Example:

List Tag in HTML

A list is a collection of information or items.

  1. Ordered List

An ordered list is grouped in ascending order.

In this list, numbers are used to list items.

It starts with <ol>

Example:

2. Unordered List

Bullet points are used to list items.

It starts with <ul>

Example:

Table Tag in HTML

Tables are a collection of rows and columns.

<table> defines a table in HTML.

<tr> tag is used to define a row.

<th> tag is used to define a header.

<td> tag is used to define a data/cell.

Example:

Attributes

1.Border

CSS border property is used to add a border to the table.

Example:

2. Collapsed Border

CSS border-collapse property is used to collapse borders into one border.

Example:

3.Cell padding

Cell padding provides space in between the cell or data content and with its border.

Example:

4.Left Align Headings

CSS text-align property is used to align the table heading to left.

Example:

5.Border spacing

CSS border-spacing property is used to add the spacing between cells or data.

Example:

Form Tag in HTML

HTML forms are used to collect information from the user such as photos, email, text, etc.

The <form> tag defines forms.

Attributes

  1. Label

The <label> defines a label for form elements.

2.Input

The <input> element is form element.

Depending on the type of attribute, it can be used in many ways.

Example:

Congratulations! You just learned the basics of HTML.

Just go to the other resources to learn more about HTML in detail. Practice a lot because practice is the mother of learning.

Thanks for reading my article.

Happy Coding!

Learning by teaching in a simple way... interested in Web Development | Blockchain | CyberSecurity.