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.
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.
- HTML — Hyper-text Markup language
- SGML — Standard Generalized Markup Language
- XML — Extensible Markup Language
- ASN.1 — Abstract Syntax Notation One
- MathML — Mathematical Markup Language
- KML — Keyhole Markup Language
History
- HTML — Late 1991
- HTML 2.0 — November 24, 1995
- HTML 3 — January 14, 1997
- HTML 4 — December 18, 1998
- XHTML — May 2000
- HTML — October 28,2014
Basic Structure of HTML
Don’t be afraid of this snippet, I will explain you line by line.
- <!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
- 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
- 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.
- 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
- 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.
