120 reads

What is HTML? - A Guide for Beginners

by Aditya GummididalaJune 1st, 2023

Too Long; Didn't Read

HTML stands for **Hyper Text Markup Language** It defines the content and structure of a website. It is a markup language used to create HTML documents and render their properties. Each HTML tags have different properties. The HTML **element** is everything from the start tag to the end tag. The heading element ranges from <h1> to <h6> and the paragraph element is called a paragraph.

People Mentioned

featured image - What is HTML? - A Guide for Beginners

HTML stands for Hyper Text Markup Language
It defines the content and structure of a website
It is a markup language

HTML Tags

💡 What are HTML Tags?

HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

💡 What is HTML Element?
The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

1. The Heading Element

example:-
<h1>Hello World</h1>
----------------------------
Here 
<h1> is a opening tag where as </h1> is a closing tag

-> anything that's inside an angle bracket(< >) is a tag
-> <h1>Hello World</h1> this entire thing is called an element

The heading element ranges from <h1> to <h6>
<h1> is the highest section level whereas <h6> is the lowest section level

2. Paragraph Element

example:-
<p>This is a paragraph.</p>
-------------------------------------
Here
<p> is a opening tag where as </p> is a closing tag

3. Self-Closing Tags

→Horizontal Rule Element

syntax:-
<hr /> or <hr>

→Break Element

syntax:-
<br /> or <br>

4. The List Elements

→Ordered and Unordered Lists

Unordered List
syntax: <ul>
          <li>Milk</li>
          <li>Flour</li>
        </ul>
Ordered List
syntax: <ol>
           <li>Milk</li>
           <li>Flour</li>
         </ol>
nested unordered list
syntax:<ul>
        <li>Rice</li>
        <li>Flour</li>
        <ul>
            <li>Atta</li>
        </ul>
        <ol>
            <li>aashirwaad</li>
        </ol>
        <li>Milk</li>
    </ul>

5. The Anchor Element

→It allows us to create Hyperlink(It is used to link from one page to another)

syntax:-
<a href="url/src">This is a link</a>
or we can have global attributes like draggable and set it true which results in the hypertext being draggable.

6. The Image Element

→It allows us to add images to our website

syntax:-
<img src="url/size" alt="image of some sunset"/>
url followed by the size of the image in pixels

File Path

→We have two different types of File Path

Relative File Path	Absolute File Path
A relative path describes the location of a file relative to the current (working) directory-	An absolute path describes the location from the root directory.

→In Web Development Relative File Path is more useful :)

Let’s understand Relative File Path with an example

→Here since we want to link a file( i.e anchor.html) that is in the same folder

 a single dot followed by a slash helps us to locate the file

In another example

→Here The file which we want to link is located in another folder

a double dot followed by a slash helps us to locate the desired file(i.e. external.html)

HTML BoilerPlate

What is an HTML Boiler Plate?

A boilerplate in HTML is a template you will add at the start of your project. You should add this boilerplate to all of your HTML pages.

<!DOCTYPE html> //This tag tells the browser which version of the file was written in.
<html lang="en"> // this is the language of the text content in that element.
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> //this keeps our code compatible with Internet Explorer
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //it tell you the viewport and it defines how the website should be displayed relative to the screen that it's being rendered on.
    <title>Document</title> //this get displayed in the tab bar 
</head>
<body>
    //this is where all of the content of the website goes.
//the text,the titles,the images,the links,everything that you can do with HTML
</body>
</html>