Did you ever think about how a house is build?
First, a blueprint of your house is created
Using the blueprint, your house takes shape.
A website works the same way. HTML is the blueprint of the website.
So, In this blog, we will discuss:
- What HTML is and why we use it
- What an HTML tag is
- Opening tag, closing tag, and content
- What an HTML element means
- Self-closing (void) elements
- Block-level vs inline elements
- Commonly used HTML tags
HTML
HTML stands for Hypertext Markup Language. let's look at each word individually first.
Hypertext: Text that contains a link to other text
Normal Text
Visit our website
Hypertext
<a href="https://example.com">Visit our website</a>
Markup: Adding tags or symbols to the text to define the structure
This is a Heading
With markup
<h1>This is a Heading</h1>
Language: A language that is understood by the computer
HTML is also known as the skeleton of a web page. This skeleton is not enough to make a website. A website has features similar to human beings.
So, A website needs:
HTML: Skeleton
CSS: Skin to beautify it
JavaScript: Brain that brings functionality
Why do we need HTML?
We use HTML to create and structure web pages
Without HTML, a browser can't understand the content of a website.
HTML Tags
A website consists of:
Headings
Paragraphs
Images
Links
Since HTML defines markup, you want text, images, and links to appear in certain ways for you web page.
For example, You might want big text, small text, bold, italic, etc.
HTML tags let you do this.
So anything between <> angle brackets is called tags.
For example
<p> <- Paragraph tag
<img> <- Image tag
<a> <- A tag
HTML element
An element consists of an opening tag, a character, the content and a closing tag.
Some elements are empty, which means they don't have a closing tag.
For example
<img>
Block-level vs inline elements
Block-level Elements
Block-level elements are those elements that take full width and starts on a new line.
For example, You may have seen some students who want a separate room to study because they can't concentrate when the room is shared.
So, In HTML there are some elements, If you place them with some other elements they will shift the elements to the new line.
Example
Block-level
<div>
<p>
<h1> to <h6>
<section>
<article>
<header>
<footer>
<nav>
<main>
<ul> (unordered list)
<ol> (ordered list)
<li> (list item)
<form>
<table>
<blockquote>
<hr>
HTML has so many tags. The above are some important block-level elements that most developers uses.
Inline Elements
Inline elements take only the required width and stay on the same line.
These elements are used within block elements.
Example
<p>This <strong>paragraph</strong> is good. </p>
<span>
<a>
<strong>
<em>
<b>
<i>
<u>
<small>
<mark>
<label>
<sup>
<sub>
Important Semantic Tags and What They Do
These are some common HTML tags:
Text & Content
<h1> to <h6>: Used for headings and control the heading size
<p> : Paragraph tag
<br> : Line break
<hr> : Adds the horizontal line
Links & media
<a> : Used to add a link to text ( e.g., twitter.com )
<img> : Adds image
<video> : Adds video
<audio> : Adds audio
Lists
<ul> : Unordered list
<ol> : Ordered list
<li> : List items
Layout / Section
<div> : Container
<span> : Inline container
<header> : Top section
<footer> : Bottom section
Don't get overwhelmed. You will understand all this when you use it .
Thanks for reading ! if enjoyed this blog , you can read more on this 👇
Top comments (0)