If you’re just entering the world of web development, you’ve heard the term HTML but did not know much about it. In simple terms, HTML is the language that gives structure to every web page you see online. In short, it is the skeleton of a website. Whenever you are making a website, HTML forms the foundation. In this blog, you will learn the basics of HTML.
Table of Contents:
What is HTML?
HTML stands for Hypertext Markup Language. HTML is not a programming language like JavaScript and Python. It is not built for performing some logic or making decisions. Instead, it is the markup language, which means it is used to organize content on a web page so that browsers can display it correctly.
Here, “Hypertext” refers to the text that contains links to other text pages. “Markup” means you are marking up with tags that describe each part of the content.
Structure of HTML Documents
Every HTML document follows this basic structure:
- <!DOCTYPE html>: It tells the browser that you are using HTML5
- <html>: It is the root tag, everything wrapped inside it.
- <head>: It contains the information about the page, and this information is only available for browsers and not shown to users.
- <title>: It is responsible for setting up the page title.
- <body>: It is the main tag that holds everything that users usually see – text, images, links, etc.
Learn to Code and Build Real Websites from Day One
Become a Web Developer
Tags in HTML are the building blocks of web pages. It helps in defining the structure and the content of the webpage. Here are some of the most important and commonly used HTML tags:
Heading Tag
Heading Tags are used to define the title, headings, and subheadings of the document. There are six heading tags in total ( <h1> to <h6> ), from which <h1> is the largest one and <h6> is the smallest one. Let us understand it with an example:
Example:
Output:
Explanation: In this example, you are using the heading tag in which <h1> is the largest heading and <h6> is the smallest heading.
Paragraph Tag
The paragraph tag <p> is used to write a block of text in the form of a paragraph.
Example:
Output:
Explanation: The <p> tag in HTML is used to write a paragraph. It is the container tag (requires both opening <p> and closing tag </p>).
Links
Links in HTML are used to create hyperlinks. It is created by an Anchor tag (<a>) in HTML. Let us understand how:
Example:
Output:
Explanation: In this example, you are using the <a> tag to create hyperlinks in HTML documents. Here, when the user clicks on Intellipaat, they move to the Intellipaat official website.
Images in HTML
You can put images inside your website by using the <img> tag in HTML. Let us understand the <img> tag in HTML by using an example:
Example:
Output:
Explanation: In this example, you are using the <img> tag in HTML to display the image on the webpage. Here in the src attribute (extra properties of tags), you are passing the URL of the image, and you also provide alternate text (‘Intellipaat-logo’), which is displayed if the image fails to load
Lists
Lists in HTML are used to display items. Sometimes you need to write the topic in points, then Lists are a great choice for this. Lists in HTML are of two types: ordered lists and unordered lists.
Example: Displaying Ordered Lists in HTML
Output:
Example 2: Displaying Unordered Lists in HTML
Output:
Explanation: You are printing the list in HTML by using <ul> and <ol> tags. The <ol> tag displays the items in sequence (as 1,2,3…). The <ul> tag displays the list items as in bullet points.
Tables
Tables in HTML are used to display data in the form of grids. Tables are helpful in displaying information more clearly and are created by using <table>, <tr>, and <td> tags in HTML.
Example:
Output:
Explanation: In this example, you are creating a basic table by using <tr>, <th>, <td>, and <table> tags in HTML. Each of them has its own role. Let’s discuss each of them:
- <table>: It is the root tag that is used to create the table.
- <tr>: It is used to create rows in the table
- <td>: It is used to insert the data in each cell of the table.
- <th>: It is used to define headers of the tables, like Id and Learner Name.
Semantic tags in HTML are the tags that describe their meaning themselves. In HTML, these are some of the important semantic tags:
- <header>: top section, contains the code of the title or navigation bar.
- <footer>: bottom section, contains the code of the website footer.
- <article>: A self-contained piece of content.
- <section>: A particular group of content.
- <nav>: Navigation links.
Sometimes, you want to add notes in your code, and you want these notes not to be displayed on the page. That is the place where comments are used. Here is an example to show how comments are used in HTML.
Syntax:
<!-- Comment in HTML Syntax -->
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
So far, you now learn everything about the basics of HTML, you now have a good understanding of HTML and the common tags that are used to build websites. HTML is the first step in creating a website. Once you understand how to structure a web page and use basic tags, you are ready to create your own website.
HTML Basics – FAQs
Q1. What are the 7 basic tags of HTML?
The 7 basic tags of html are – <!DOCTYPE html>, <html>, <head>, <title>, <body>, <h1> to <h6>, <p> tags.
Q2. What is HTML used for?
HTML (HyperText Markup Language) is used to create the structure and layout of web pages. It defines elements like headings, paragraphs, images, links, forms, and more for websites.
Q3. What is CSS used for?
CSS (Cascading Style Sheets) is used to style and design HTML elements.
Q4. What is the doctype in HTML?
The DOCTYPE in HTML is a declaration that tells the web browser what version of HTML the page is using.
Q5. What is the full form of DTD?
DTD stands for Document Type Definition. It defines the structure and attributes for an HTML or XML document.