Hello everyone welcome back to another article, in this article we are going to learn about HTML basics which you need to know in order to get a proper understanding of HTML. In this article, we are going to cover topics like doctype, headings, paragraphs, lists, etc.
Let's say if you want to create a house what do you do first? Do you start gathering paints? No, you don't start collecting colors when you are beginning to build your house instead you collect bricks, mortars, etc in order to create a strong foundation. HTML also does the same work it provides a structure to your website.
What is HTML?
HTML stands for Hyper Text Markup Language, and this is the language that is used to create structure and design websites. The term hypertext refers to the ability to look out the relative or relevant content. HTML is a markup language, tags are used in HTML to define the overall structure of the website.
History of HTML?
HTML was first invented by Tim Berners-Lee in 1993, though the language was not widely used until 1999 when HTML 4.01 became an official standard for web development. In 2012, the language was updated into HTML5, which offered expanded capabilities.
On the HTML document, we often see a <!DOCTYPE HTML> declaration before the <html> tag.
Technically <!DOCTYPE HTML> is neither a tag nor an element, it's just an instruction to the browser about the document type.
The most common example you will see is this -
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
This is the content of the document.
</body>
</html>
Strucutre of HTML element or tags?
The Basic HTML element has three parts -
- Opening Tag - In the opening tag, you name the element you want to write and wrap it in angular brackets. The opening tag is a very important tag in HTML. Example -
<h1></h1>
The above code is a heading tag in HTML.
- Closing Tag - It is also like the opening tag but in this, you just add a forward slash in front of the element name and wrap it in angular brackets. Example -
<h1> </h1>
The element with a forward slash is the closing tag in this HTML element.
In some elements, you don't need to have a closing tag and they are known as self-closing tags.
- Content - You can write any content in between the tags which are meant to be displayed. It can include text, images, or any other featured material.
Example -
<h1> Hello World! </h1>
In HTML there are many more tags or elements like Attributes, Inline-elements, block-elements, heading, paragraphs, lists, etc. Now let's look at them in this article -
Attributes
Elements can have attributes defined to them which helps to define them further. The most common attribute you must have heard is Class and ID which can also help in styling when you will be adding CSS to your website. You can then target this Class and ID to add different kinds of styles. You can even target these attributes through Javascript to perform some logical operations. Elements with attributes syntax -
<h1 class="hello">Hello</h1>
<p id="world">World</p>
You can name your attributes the way you want. Another type of attribute that is widely used widely in Images or other media elements is "src" and in src, you put the location of the image or any media element example-
<img src="location-where-the-image-is-located/" alt="image" />
Block-Elements and Inline-Elements
In HTML, there are many inline-level elements and many block-level elements, from block-level elements I want to say that elements start on a new line and take the full width of the page. In the above, I have given examples of h1 heading and p paragraph elements these elements are block-level elements. whereas inline elements are the elements that take up only as much width as they need and they are often used inside other elements. Some of the examples for inline elements are - br, span, strong, and em.
Headings, Paragraphs, and Lists
Headings
Headlines or headings or header text is a commonly used element in HTML. Headers are numbered in size from h1 to h6 where h1 is the largest header and h6 is the smallest header. Syntax -
<h1>I am Heading</h1>
<h2>I am Heading</h2>
<h3>I am Heading</h3>
<h4>I am Heading</h4>
<h5>I am Heading</h5>
<h6>I am Heading</h6>
Paragraphs
they are also a very commonly used element in HTML. Paragraph element is used to write paragraphs. Syntax -
<p>I am a paragraph</p>
Lists
HTML lists can also help to order your content by creating bulleted or numbered lists. There are a few types of lists — for example, while the ul tag creates an unordered or bulleted list, the ol tag creates an ordered or numbered list. Each list item is enclosed in li tags. Syntax -
<ul>
<li>Hello</li>
<li>World</li>
</ul>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
So that's it for today's article there are still some more topics to cover in this article but don't worry hook to my article page I will bring part 2 of this page very soon. Thank you for reading and if you have gained any knowledge from it give me some valuable comments.