INTRODUCTION
Welcome, aspiring web developers to the world of web development. HTML “Hyper Text Markup Language” is the stepping stone for our journey in web development. The language that breathes life into Internet static pages.
Want to learn how the content on the web pages appears? You are in the right direction.
Using HTML as our starting point, let's begin!
1. Understanding HTML - The Language of the Web
What is HTML?
In the world of the web, HTML is the language of communication. HTML is a standard markup language for creating web pages. HTML stands for Hyper Text Markup Language. It seems difficult to understand for the first time, but let’s break it down and see the meaning of every word:
Hypertext - Hypertext is text that contains links to other texts.
Markup - Markup tells a web browser how to display text, images, and other forms of multimedia on a webpage.
Language - Just like the normal language we use to communicate in daily life for example English, for the web browser HTML serves as a language that tells the browser what to do.
If we combine all these together, we could say that HTML is "A programming language that lets you display linked documents in an Internet browser ”.
2. What does an HTML Code look like?
HTML Code is just like a normal text. The highlighted feature in the HTML code is the angle brackets, and these are used to tell the browser how to display the date on the screen.
Here’s an example of some simple HTML code:
The Output:
This is a heading.
This is a paragraph.
3. The Essentials of HTML code - HTML Tags
The elements in the above HTML code inside the angle brackets are called HTML Tags.
Standard HTML tags are <html>, <head>, <title>, <body>, <h1>, <p>,<a>, <img>, etc.
Two rules for using HTML tags:
Always use angle brackets to represent a tag. The browser will only understand a tag if it is inside angular brackets.
Tags always come in pairs, be sure to add a closing tag. Example: <p> This is a paragraph. </p>
4. The element - HTML Element:
HTML code is composed of elements. A webpage's content is contained within HTML elements.
Elements are the components of HTML code that have at least one opening and closing tag, maybe two based on the requirement and the content within those tags that need to be displayed on the webpage.
Some Common HTML Elements:
Headings and Paragraphs - <h1>, <h2>,<h3>,<h4>, <h5>, <h6>, <p>
List Elements - <ol> (ordered list), <ul>(unorder list), <li>(list content)
Div Element - <div>
Links Elements -<a href=”www.google.com> Google</a>
Image Elements - <img src=”test.jpg” alt=”Alternate Text”>
5. The HTML Attributes:
To add more to the element in simple terms to expand the HTML element we add attributes to the opening tags. These attributes help in the future to give styling to the specific element by unleashing the power of CSS. In HTML attributes consist of two things:
- Name: The name we use to represent an attribute.
- Value: The value of the attribute.
Some common attributes we use in HTML code are:
Id & Class: Id is used to represent a unique element and class can be used to identify multiple elements acquiring the same feature e.g. styling.
<div id="header" class="main-header"></div>src and alt: src and alt are used in img tag.
<img src=”test.jpg” alt=”Alternate text”>href: href is used in the anchor tag for adding the links.
<a href=”www.google.com” >Google</a>
6. How to add Comments in HTML?
Comments begin with <!-- and end with -->. Any characters in between will be ignored by the browser. Comments are basically used to write something related to the code that will help others understand the code while reviewing it and to stop any specific markup from getting rendered on the screen.
Example: <!-- This is a comment that the browser will not display.-->
7. Deep Dive in HTML
We just learned the basics of HTML, like how the code looks and the basic elements. Now, let’s take a closer look at HTML, check it out: w3schools. This helps in exploring it in more detail with easy-to-understand content that breaks down the simple structure of HTML, helping to really understand how it works.
CONCLUSION
As we wrap up this initial phase, let us extend an invitation to delve further into the intricacies of HTML. To gain a comprehensive understanding of HTML's fundamental framework, it is highly recommended to use accessible tools like w3schools. Taking part in this thorough examination will enable us to gain a deeper understanding and equip us with the necessary knowledge to become proficient web developers.
Embrace the joy of coding!
Top comments (0)