Table of contents
HTML is the foundation of every website on the internet. Without HTML, the web would not exist as we know it today. In this blog, we'll take a look at HTML from beginner to advanced level, including code samples and reference links.
Introduction to HTML
HTML stands for HyperText Markup Language. It is a markup language used to create and structure content on the web. HTML allows you to add text, images, videos, links, and other elements to your website. HTML documents are structured using a series of tags that define the content.
Basic HTML Structure
Here's a basic HTML structure that every webpage follows:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
In this code, <!DOCTYPE html> tells the browser that we are using HTML5. The <html> tag is the root element of the document, and all other elements are nested inside it. The <head> tag contains meta-information about the document, such as the title, and is not displayed on the page. The <body> tag contains the visible content of the page, including headings, paragraphs, and other elements.
HTML Tags
HTML tags are used to define the structure and content of a webpage. Here are some of the most common tags in HTML:
<h1>-<h6>: Headings<p>: Paragraph<a>: Link<img>: Image<ul>: Unordered List<ol>: Ordered List<li>: List Item<div>: Division<span>: Span
Here's an example of how to use some of these tags:
<h1>Welcome to my Website!</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">Visit Example.com</a>
<img src="image.jpg" alt="Image Description">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Attributes
HTML tags can also have attributes, which provide additional information about the element. For example, the <a> tag has an href attribute that specifies the URL of the link. Here are some other common attributes:
id: Unique identifier for the elementclass: Defines a class for the element, which can be used for styling with CSSstyle: Defines inline CSS styles for the elementsrc: Specifies the URL of an external resource, such as an image or scriptalt: Provides alternative text for images, which is displayed if the image cannot be loadedtitle: Provides additional information about the element, which is displayed as a tooltip on hover
Here's an example of how to use attributes:
<img src="image.jpg" alt="Image Description" title="Image Title">
<a href="https://example.com" class="btn btn-primary" style="color: white;">Visit Example.com</a>
<div id="container" class="content"></div>
Forms
Forms are an important aspect of web development, allowing users to input information and interact with a website. HTML provides a set of tags to create forms, such as text input fields, checkboxes, radio buttons, and more.
The <form> tag is used to create a form element. It has several attributes such as action, method, and name. The action attribute specifies where the form data will be sent when the form is submitted, and the method attribute specifies the HTTP method to use when submitting the form data.
Here's an example of a simple form with a text input field and a submit button:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
In this example, the form will be submitted to the /submit-form endpoint using the HTTP POST method. The label tag is used to provide a label for the input field, and the for attribute is used to associate the label with the input field using the id attribute. The name attribute is used to identify the input field when the form is submitted.
HTML also provides several other input types, such as checkboxes, radio buttons, and select lists. Here's an example of a form with a checkbox and a select list:
<form action="/submit-form" method="post">
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="age">Age:</label>
<select id="age" name="age">
<option value="under-18">Under 18</option>
<option value="18-30">18-30</option>
<option value="30-50">30-50</option>
<option value="over-50">Over 50</option>
</select>
<button type="submit">Submit</button>
</form>
In this example, the checkbox input type is used to create a checkbox. The select tag is used to create a select list, and the option tags are used to create the options within the list. The value attribute of each option is what will be submitted when the form is submitted.
Conclusion:
In this blog post, we've covered the basics of HTML, including tags, attributes, and elements. We've also looked at some more advanced HTML concepts, such as tables and forms.
HTML is an essential part of web development, and it's important to have a good understanding of it in order to create effective and user-friendly websites. By following the examples and links provided in this blog post, you should be well on your way to becoming an HTML expert. Good luck!