"The journey of a thousand miles begins with a single step." — Lao Tzu
In this blog, we will understand the very basics and build a strong foundation in HTML. After reading this blog, you will have the necessary knowledge required to build a simple yet interactive webpage.
What is HTML
Hypertext Markup Language is the full form of HTML. I know the full form sounds very fancy; we tech people are known to keep such complicated and fancy names for everything 😅. Now let's understand what HTML is. HTML is nothing but the structure of the webpage. In simple terms, imagine HTML as a human skeleton, with just the bones ☠️. So HTML is just the layout of the webpage, and the layout contains texts, headings, forms, buttons, images, and much more. Below is an image of a webpage that contains only HTML.
In this modern day, we do not use HTML only for building a website; we use CSS for styling the website and JavaScript for the end-to-end logic of the website. But CSS and JavaScript are for another day; let’s get back to HTML. In the above image of the HTML webpage, we can see one big heading displaying “My First Web Page,” two medium-sized headings: “Headings are Great Fun” and “Web Pages Are Exciting Too.” We can see two paragraphs below both the medium-sized headings and a hyperlink that will take us to google.com. Now, are you guys wondering how we create such content on the webpage? How do we add such headings and paragraphs? Well, my friend, it's very simple; we use HTML tags for creating such webpages, which we will be learning in the section below.
HTML Structure and Tags
The above diagram shows what an HTML document structure looks like. As you can see, there are so many tags, like <html>, <head>, <body>, <p>, etc. All these tags are used to create a webpage structure.There are two types of tags: 1) self-closing tags like, <img />, <br />, 2) Paired tags, which have one opening tag like <h1> and one closing tag</ h2>. Below is the complete HTML document that includes all the important tags. Let’s have a look at all the important tags used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sample HTML structure based on the provided diagram.">
<title>HTML Structure Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header, footer {
background-color: #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the HTML Structure Example</h1>
<p>This document demonstrates various HTML elements.</p>
</header>
<main>
<section>
<h2>Paragraphs and Text Formatting</h2>
<p>This is a paragraph with <em>italicized text</em> and <strong>bold text</strong>.</p>
<p>Another paragraph with a <a href="https://example.com" target="_blank">link to example.com</a>.</p>
</section>
<section>
<h2>Forms</h2>
<form action="#">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
<button type="submit">Submit</button>
</form>
</section>
<section>
<h2>Lists</h2>
<h3>Unordered List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</section>
<section>
<h2>Tables</h2>
<table border="1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Media</h2>
<h3>Image</h3>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
<h3>Video</h3>
<video width="320" height="240" controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
</main>
</body>
</html>
<html> tag: The html tag is the root element of the html document. All other elements/tags go inside the html tag. Inside the html tag, there are two children: <head> and <body>.
<head> tag: The head tag contains all the metadata and resources required for the document. The head tag is not responsible for showing content on the webpage. The head section usually contains the <meta> tag for all the metadata, like character encoding, description, and viewport settings, and the <style> tag for internal CSS.
<body> tag: Contains all the elements that will be displayed on the webpage.
<header>, <main>, <section>, <div> tags: These are all container tags. Imagine a container like a big box that has many things inside it. In the same way, these containers can hold many tags inside. These containers are useful as they organise our content on a webpage, making it easier for us to style an entire section by targeting them.
<h1-h6> tags: These are heading tag, h1 being the biggest and h6 being the smallest
<p> tag: It defines the paragraph of the text
<a> tag: This tag creates a hyperlink to navigate to another page or any resource
<input>tag: Provides a text box where users can enter data like username and password.
<button> tag: A clickable button mainly used for form submission and interaction
<ul> tag: Creates an unordered list which can contain items <li> tags
<ol> tag: Creates an ordered list which can also contain items <li> tags
<tables> tag: As you can imagine, a table that has rows and columns
<thead> tag: Represents the header row of the table
<tbody> tag: Containes main content of the rows
<th>tag: Defines a header cell in a table that is bold and centred by default.
<td>tag: Defines a standard data cell in a table.
<img> tag: Embeds an image into the webpage
<video> tag: Embeds an video player into the webpage
<audio> tag: Embeds an audio player into the webpage
<iframes> tag: Used to embed an YouTube video into the webpage
These were all the important and most used tags in HTML, but there are many more, which you can research on your own using the following documentation: HTML Tags
HTML Attributes
HTML attributes are like extra details that provide more information about an HTML element. They help define how an element looks or behaves. They are declared in the opening tag of the HTML element. Lets have a look at how we write these attributes, and let’s see some of the most used attributes.
How to declare an Attribute
Let's take a look at some of the most commonly used attributes.
<img>tag attributes:
In the above code snippet, there are 4 attributes:
src: This attribute specifies the source or location of the image. As shown, the image is retrieved from the current directory.
alt: This attribute provides alternative text for the image. It is used when the image doesn't load for some reason.
width: This attribute is used when we want to manually set the width of the image; the value that we need to specify has to be a number, which denotes the pixels.
height: This attribute is similar to the width attribute; the only difference is that it sets the height of the image.
- Selector attributes can be used in almost all tags
class: The class attribute can be assigned to one or mode tags, and this attribute requires text as an input. Developers use it to group elements and style them in CSS or manipulate data in the Document Object Model in JavaScript.
id: The
idattribute is similar to theclassattribute, but it must be unique. Theidvalue can only be used once in a tag throughout the entire HTML document.
<form> tag attributes
action: specifies the url where the data will be sent after submission; in the above code snippet, data will be sent to./submit-form end point.
method: Defines the http method that will be applied when sending the form. There is mainly two methods: GET and POST. GET is used to get data from an end point like API, database, etc. POST sends data to the requested endpoint; this data is usually secure and sensitive.
type: Specifies the type of input field. Input types include text, email, password, number, file, submit, and more.
placeholder: Displays the hint in side the textbox, eg: Enter your name.
required: Adding required makes the input field mandatory to enter, otherwise it will throw an error.
type=”submit”: This submits the form to the endpoint with all the input data.
There are many more attributes, you can find in the MDN documentation, but I have covered almost all the important ones.
Conclution
Now you have a good understanding of how HTML works and the important tags and attributes. I recommend practicing some basic HTML projects, which you can find on w3schools or freecodecamp.
Once you've practiced a bit, go ahead and learn CSS to style your webpage and make it more attractive. Thank you for reading this blog; I hope you found it at least a little helpful. I wish you all the best in your future tech studies. I will be adding my LinkedIn handle, so feel free to connect and chat. Cheers 🍻
Social media handle
tag