HTML Unleashed - Learn HTML in 2023

HTML, or Hypertext Markup Language, is a programming language used to create and structure the content of a website. It is the foundation of all web pages and, together with CSS and JavaScript, forms the basis of the modern web development process.

HTML back then

The history of HTML dates back to the 1980s when the first web page was created by Tim Berners-Lee at CERN, the European Organization for Nuclear Research. The original version of HTML was very basic and only supported a few elements, such as headings, paragraphs, and links. Over the years, the language has evolved and become more complex, with the introduction of new elements, attributes, and features.

Is HTML important today?

The importance of HTML in web development . Without HTML, there would be no way to structure and format the content of a website, which would make it impossible to create the rich, interactive experiences that users have come to expect.

HTML allows developers to define the structure and hierarchy of a web page, as well as to add images, videos, audio, and other multimedia elements. Now let's take a look at some of the basic HTML tags that are used to create a basic web page.

HTML Tags

The structure of an HTML document consists of two main parts: the head and the body. The head element, denoted by the <head> tag, contains information about the page, such as the title, metadata, and links to external resources, such as CSS and JavaScript files.

The body element, denoted by the <body> tag, contains the actual content of the page, such as text, images, videos, and other elements.

Here are some of the most common HTML tags:

The <html> tag indicates the start and end of an HTML document. This tag contains all of the other elements on the page.
The <head> element contains information about the page that is not displayed in the browser window, such as the page title and any linked CSS or JavaScript files.
The <body> element contains all of the content that is visible on the page, such as text, images, and links.
The <title> element is used to specify the title of the page, which is displayed in the browser tab.
The <p> element is used to define a paragraph of text.
The <h1> element is used to define a level-one heading. There are six levels of headings, with <h1> being the most important and <h6> being the least important.
The <a> element, or anchor element, is used to create a hyperlink to another web page or a specific location on the current page. This is done using the href attribute, which specifies the destination of the link.
The <img> element is used to insert an image into the page. The src attribute is used to specify the source of the image, and the alt attribute is used to provide a text alternative for the image.

These are just some of the basic HTML tags that are commonly used to create web pages. There are many other tags available for more advanced features and functionality. Look at - HTML A-to-Z tags List by Geeks for Geeks

Attributes

In addition to the tags themselves, HTML elements can also have attributes. Attributes provide additional information about an element and are specified within the opening tag. Example:

One of the most basic attributes that can be used in HTML is the id attribute. This attribute allows you to give a unique identifier to an element, which can be used to target the element with CSS or JavaScript. For example, you could give an element the id main-heading like this:

<h1 id="main-heading">This is a heading</h1>

Another common attribute is the class attribute, which allows you to assign one or more class names to an element. These class names can then be used to target the element with CSS or JavaScript, allowing you to apply styles or behavior to multiple elements at once. For example, you could give an element the class "important" like this:

<p class="important">This is an important paragraph.</p>

Another important attribute is the "href" attribute, which is used on links (or "anchor" elements) to specify the destination of the link. The value of this attribute should be the URL of the page that the link should point to. For example, you could create a link to my website like this:

<a href="https://rahul.biz">Rahul's Blog</a>

Many other attributes can be used in HTML, and the exact attributes that are available will depend on the element that you are using.

Some other common attributes include the src attribute, which is used to specify the source of an image or other media element, and the alt attribute, which is used to provide a text alternative for an image.

Format

One of the most common ways to use CSS is in conjunction with HTML. To use CSS with HTML, you need to link your HTML document to a CSS stylesheet. This is done by including a <link> element in the <head> section of your HTML document, like this:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

The rel attribute specifies the relationship between the HTML document and the CSS stylesheet, the type attribute specifies the type of the stylesheet, and the href attribute specifies the location of the stylesheet.

Once the stylesheet is linked to your HTML document, you can use CSS to style the elements in your HTML document.

There are several common techniques for formatting and styling elements in an HTML document using CSS. One of the most basic techniques is to use CSS selectors to target elements in your HTML document and then apply styles to those elements.

For example, if you want to make all of the <p> elements in your HTML document blue, you could use the following CSS code:

p {
  color: blue;
}

This code will target all <p> elements and apply the color property with a value of blue to them, making them all blue. Another common technique in CSS is to use classes and IDs to target specific elements.

Classes and IDs are attributes that can be added to HTML elements, and they can be used to give elements a unique identifier that can be targeted in CSS. For example, if you have a <p> element that you want to make blue, you could add a class to that element and then target that class in your CSS code like this:

<!--HTML-->
<p class="blue-text">This paragraph will be blue.</p>

/*CSS*/

.blue-text {
  color: blue;
}

In this example, the class attribute with a value of blue-text is added to the <p> element, and then the CSS code targets that class and applies the color property with a value of blue to it. This will make the text in the <p> element blue.

IDs work similarly to classes, but they are meant to be used for unique elements that only appear once on a page. For example, if you have a header element that you want to style, you could give it an ID and then target that ID in your CSS code like this:

<!--HTML-->
<h1 id="main-header">This is the main header.</h1>`

/*CSS*/
#main-header {
  color: blue;
  font-size: 36px;
}

In this example, the id attribute with a value of main-header is added to the <h1> element, and then the CSS code targets that ID and applies the color and font-size properties to it. This will make the text in the <h1> element blue and 36 pixels in size.

Using CSS selectors, classes, and IDs, you can target specific elements in your HTML document and apply styles to them to create a custom and unique look for your website.

Want to read more on HTML Attributes and Elements?

Advanced HTML features

One of the key features of HTML is the use of semantic elements, which are tags that describe the meaning of the content they contain rather than just its appearance.

Semantic elements make it easier for both humans and machines to understand the structure and meaning of a document, and they can also improve accessibility for users with disabilities.

Some examples of semantic elements in HTML include the <header> and <footer> elements, which are used to represent the header and footer sections of a document, respectively.

The <nav> element is used to represent a section of a document that contains navigation links, and the <main> element is used to represent the main content of a document.

In addition to semantic elements, HTML also provides several elements for creating forms and accepting input from users. The <form> element is used to create a form, and various form controls, such as <input>, <select>, and <textarea>, are used to accept different types of input from users.

These elements can be styled using CSS and can be used to collect information from users or to enable them to interact with a website.

HTML also supports the inclusion of audio and video content using the <audio> and <video> elements, respectively. These elements allow web developers to easily embed audio and video files into a web page, and they can be controlled using JavaScript to provide a rich media experience for users.

Another useful feature of HTML is the ability to create tables using the <table>, <tr>, <th>, and <td> elements. These elements allow developers to organize content into rows and columns, making it easy to display data in a structured and easily understandable way. Tables can be styled using CSS to customize their appearance and make them more visually appealing.

Finally, HTML also provides the <iframe> element, which allows web developers to embed content from other websites into their pages. This can be useful for displaying content from other sources, such as maps or videos, without the need to host the content on your server.

Common Mistakes and Debugging HTML

Working with HTML can sometimes be challenging, and there are a few common mistakes that newbie developers tend to make when creating HTML documents. Here in this section I discuss some of these common pitfalls, as well as provide some tips for debugging HTML.

One common mistake that developers make when working with HTML is failing to properly close tags. Every HTML element has an opening and closing tag and forgetting to close a tag can cause issues with the layout and formatting of the page.

For example, if an opening <div> tag is not properly closed with a </div> tag, the content that follows will be treated as a child element of the <div> element, which can lead to unexpected results. To avoid this mistake, it is important to always check your HTML to make sure that all tags are properly closed.

Another common mistake is using the wrong type of quotation marks for attributes. In HTML, attribute values must be enclosed in quotation marks. However, two types of quotation marks can be used: single quotes (') and double-quotes (").

Using the wrong type of quotation marks can cause issues with the parsing of the HTML, so it is important to make sure that you are using the correct type. In general, double quotes are the preferred type of quotation marks for HTML attributes, but either type will work as long as you are consistent and use the same type for all attributes in the document.

Additionally, it is important to pay attention to the hierarchy of your HTML elements. HTML elements are arranged in a hierarchical structure, with parent and child elements. Misusing the hierarchy of elements can lead to issues with the layout and formatting of the page.

For example, if you place a <p> element inside of a <ul> element, the <p> element will not be displayed properly, as it is not a valid child element of a <ul> element. To avoid this mistake, it is important to make sure that you are using the correct parent and child elements for your HTML.

Finally, debugging HTML can sometimes be a challenge. One tip for debugging HTML is to use a web inspector tool(Ctrl+Shift+I), which allows you to view the source code of a web page and see how the elements are structured. This can help identify issues with the layout and formatting of the page, and for finding unclosed tags or other mistakes in the HTML.

Additionally, using a tool like a linter can help you catch common mistakes and ensure that your HTML is valid and well-formed. Look at some good Linting tools for VS Code.

Takeaway

This is a very basic example, but it should give you a good starting point. You can add more elements and styles to create more complex and interactive web pages.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="This is an image">

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

<form>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form> 

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Samuel</td>
    <td>samuel@jabaz.com</td>
  </tr>
  <tr>
    <td>Cool Boi</td>
    <td>coolboi@example.com</td>
  </tr>
</table>

</body>
</html>

Some Best Free Resources

I hope this helps! Let me know if you have any other questions. In the next post, I'll look into, CSS and JavaScript. Share with others. You can also support me from this link - https://buymeacoffee.com/rahuldotbiz