Fundamentals of HTML
By Abhishek Sh- “Code Dev”
What is HTML? Before learning how to learn HTML or what to study in HTML, we should have a firm grasp of what HTML is. In HTML, “Hypertext Markup Language” is denoted. It is a widely used markup language for structuring and designing web pages. A collection of elements known as HTML, each of which is represented by a different tag, determine the structure and look of a web page. These tags can be used to create headings, paragraphs, links, images, lists, and other elements.
There are two type of tags
a. Paired tags.
b. Empty tags
a. Paired tags:
These tags are in pairs. They use the opening tag(<>) and closing tag(</>).
Example:
b. Empty tags:
These tags don’t always need to have a closing tag.
Example:
https://gist.github.com/Abhishek27064/eea73f6a6c4810bd1348d4f70b658050
<html></html> — it is a root element in HTML and a paired tag.
It is the body tag and head tag’s parent element. This tag, which contains all of the tag’s elements and attributes, is used to structure websites.
This is the basic structure of the HTML . The HTML document are divided into these particular tags.
. Head
. Body
Doctype is information to a browser about what document type to expect. (syntax:<!DOCTYPE html>)
Head:
The user is not shown the metadata, CSS link, or title that are contained in the head tag. For the owner’s reference, it is written.
Example for head tag(<head></head>):
<head>
<meta charset="UTF-8">
<link href="style.css" rel=stylesheet>
</head>Title tag:
Title tag enclosed in head tag. The name of the menu tab in the browser is set using it.
Example for title tag(<title></title>):
https://gist.github.com/Abhishek27064/3f4c444a79ec256304a2c70460f58475Body tag:
Body tag contains the tags or elements to be displayed to the user. All the contents to be displayed is enclosed in this tag.
Tags used in Body tags are:
Inside the body tag the parts are divided into;
Example for body tag(<body></body>):
Body Structure:
https://gist.github.com/Abhishek27064/317eff0893e44df1325e33c2840a5662Header tag:
Since it contains details about the title and heading of the associated content, the HTML “header” element is used to define the header for a document or section.The section heading (an h1-h6 element or a hgroup element) is typically intended to be contained in the <header> element, however this is not essential.The table of contents for a section, a search form, and any pertinent logos can also be enclosed in it.
Section tag:
Any website’s segment of main content is defined by the section tag.The information is divided into sections and subsections using the section tag.
Footer tag:
The footer of an HTML document is defined by the <footer> tag.
The footer information in this section includes things like author and copyright information.
Division tag:
The term “div” refers to the division tag. This tag acts as a storage space for HTML elements. In order to quickly design the div later, we may now encapsulate the heading and p tags inside of it.
Example for division tag (<div></div>):
https://gist.github.com/Abhishek27064/0370b006c82743b933f4ea175c5f30b3
We may also use it as the primary container and add tags like header, section, and footer.
https://gist.github.com/Abhishek27064/317eff0893e44df1325e33c2840a5662Anchor tag:
a tag is defined as an anchor tag which is a hyperlink. There is an attribute called href which indicates the link’s destination in the url.
By default, links will appear as follows in all browsers:
Example for an anchor tag (<a></a>):
https://gist.github.com/Abhishek27064/421e60d65dbf6e9828e0713746533fb1When we click on the hyperlinked Google text, which is blue and unvisited, it will send us to the specific link we specified in the href, in this case the caratLane page will be opened.
But this link opens in an existing page, what if you need it to open in a new tab ?
The target attribute is the next one that will have its value set to “_blank.”
Example for a tag(target = ‘blank’):
https://gist.github.com/Abhishek27064/abf1785590b217783e182e537918bf9f
The link will open in a new tab when clicked.
unordered tag (<ul></ul>), list tag (<li></li>),ordered tag (<ol></ol>):
ul tag in HTML means Unordered list. li tag means list items and they are used inside of ul tag and also inside of ol tag(ordered list).
Example for listing tags:
https://gist.github.com/Abhishek27064/cdeec34d00416b70b4c248dd8aca6626
The ul tag and ol tag are distinguished in this case clearly. As an unordered list, the ul tag displays in bullets, while an ordered list, the ol tag displays in number and the li tag is enclosed in between both tags.
Image tag:
An image can be embedded in an HTML page using the img tag. The src and alt attributes of the img tag specify the image’s path and alternative text(this indicates that if the image doesn’t appear, this text will), respectively.
Attribute width and height in img tag is used to set the size of the image.
Example for Image tag (<img />):
https://gist.github.com/Abhishek27064/3fa661867e6794075041c0e425a995a9
The path of the image or the image’s link address can be found in the src ( source ) attribute of an image tag. As you can see from my code, I provided the image’s path; alternatively, you can use the image’s link address.
So the header tag is mostly used to set up a nav bar with a logo. I’ve set up an example below.
This is the code:
https://gist.github.com/Abhishek27064/2d6069ce4d65b138407c231ffec0563cThe HTML class attribute is used to specify a class for an HTML element.For example in above code I named main div as ‘maincontainer’.
Output:
Headings tag:
There are 6 heading tags from h1 to h6. Out of those h1 is the most important heading and h6 is the least important.
Syntax of header tag is simple
<h1>heading 1</h1> (same for all 6 tags).
The difference between header tags(h1,h2,h3,h4,h5,h6) is displayed in the above image. According to standards, the h2 through h6 tags can be used without restriction, while the h1 tag can only be used once per webpage.
Example for heading tag(<h1></h1>…<h6></h6>):
https://gist.github.com/Abhishek27064/9b9b2b2a9382026cdfd721247132ef89
Paragraph tag:
p tag means paragraph tag. Any paragraph can be written using this tag.
Every <p> element has a solitary blank line added by browsers before and after it.
Example for paragraph tag(<p></p):
https://gist.github.com/Abhishek27064/c7273b5131f298a85c52f7bc841130c9
Form tag:
form tag is used to create a form in HTML . There are many elements inside form tags like.
So I’ve included the most common tags, label, input, and textarea, inside the form tag.
Example for form tag(<form></form>):
https://gist.github.com/Abhishek27064/9d93fb42a0415dc194a5baa7945acc34
We can also add radio buttons or check-boxes into the form isn’t it exciting..! and many more?
Example for more attributes:
https://gist.github.com/Abhishek27064/2dd236d0237ce33b519ed9c9944a5fc9
The difference between a checkbox and a radio button is that a checkbox allows you to select two options, whereas a radio button only offers one option, for example, male or female. We can also add drop down options and can also take date as input.
Table tag:
A HTML table is defined using it.There are a few other elements in table tags, including tr, th, and td. A table row is defined by the tr element, a table header is defined by the th element, and a table cell is defined by the td element.
Example for table tag (<table></table>):
https://gist.github.com/Abhishek27064/aa29240a23a1893a1947686d86aa6695As you can see, the code in red is for a table, and I’ve added a “a” tag (anchor tag) to it as well as a style to the table to create a border for a table.
To create the main body of our web-page, we included the table tag, the form tag, the header tag, and the paragraph tag into the section tag.
https://gist.github.com/Abhishek27064/2d44be74d986eda9d02493b31ee3acb6
This is a footer tag which contains ul tag, image tag and paragraph tag.
https://gist.github.com/Abhishek27064/9e8f49198d15119f498eb92de82854df
Now I’ll combine all of those header, section, and footer elements into a division tag, which will serve as the primary building block for the entire website.
Final Output Code in JSFiddle:
https://jsfiddle.net/Abhishek27Sharma/zftyuLrh/
Using HTML, we can easily create our own web-pages. I’m hoping this blog will help you understand the fundamentals of HTML and its structure. Start learning CSS if you want to move forward.
Author: Abhishek Sh
Reviewed by: Kartheek M, Sreemaan K C K S
Edited By: Seema Jain
We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com!
Leave a Reply