I was among programmers, and they asked "What's your language ?"; "HTML!", I blurted proudly. What came next cannot be spoken of 💀"- G.T

A common misconception among beginners is that they consider HTML a programming language, but it is a markup language as the name implies(i.e. Hyper Text markup language). HTML is the foundation/skeleton of every webpage. HTML documents are saved with the extension (.html ).

Although HTML isn't a programming language, it is still an essential component of every webpage. Below is the structure of an HTML document :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Gracetoffy's Blogg </h1>
    <p>a fun and informative blog</p>
</body>
</html>

Note: The content within the body tag [<body> </body>] is what would be displayed by the web browser.

HTML Tags

These are what make up every HTML document. Tags are keywords that define how a web browser will display and format different elements. Tags are always enclosed within brackets "< >". HTML tags consist of a starting tag and a closing tag i.e. [<body> </body>], but there are some exceptions eg. [<img href ="#">]. Examples of tags include:

-The header tags

These define the different header levels starting from the largest <h1> to the least <h6>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1> heading</h1>
<h2>heading </h2>
<h3>heading </h3>
<h4>heading </h4>
<h5>heading </h5>
<h6>heading </h6>
</body>
</html>

-The anchor tag

This tag creates a hyperlink to web pages and any other thing a URL can address. href (Hypertext REFerence) is an attribute in the anchor tag, it specifies the URL of the page the link goes to.

<a href ="https://www.google.com/">Search on google </a>
//when you use this clicking on "Search on google" 
will rediect you to google.com

-The paragraph tag

This is used to add/define paragraphs.

NOTE: Lorem is used as a dummy text.

<p>  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
 Asperiores exercitationem, deleniti quis iste voluptate
 perferendis expedita accusantium error architecto inventore. 
     Fuga voluptates, ullam dolore vitae beatae rem accusantium.
 Nihil, id!</p>

-Media element tags (image, video, audio, iframe )

. Image tags allow us to add pictures to our webpage.

. video tag will enable us to add videos to our webpage.

. audio tags allow us to add audio files to our webpage.

. iframe tags allow embedding other HTML documents in our webpage, this can be used to add youtube videos to the webpage.

<img src="example.png" alt="example picture">//image tag

<video width="320" height="240" controls>
  <source src="example.mp4" type="video/mp4">// video tag
</video>

<audio controls>
  <source src="example.ogg" type="audio/ogg">//audio tag
</audio>

<iframe src="https://gracetoffy.hashnode.dev/" frameborder="10"></iframe>//i frame

Did you know?

You can view the HTML source code of various web pages, by following the following steps:

-Step 1: Open the web page you want to view the source code.
- Step 2: Use the shortcut "Crtl + U", and a new tab should appear containing the source code.

You can use this trick to learn and discover various HTML tags and how they work.

HTML: The skeleton of every webpage 🖥💀

Table of contents