The Ultimate HTML Crash Course

Hi there! wonderful ones👋

In this blog, we'll go over every HTML topic genuinely needed to build a website.

"HTML is the language of the Internet. It is used to create and structure web pages, making them accessible and easily readable to users."

What is HTML?

Hyper Text Markup Language.
HTML is not a programming language instead it is a markup language.
HTML is the backbone of any website.

Anatomy of an HTML document

This is what we refer to as "HTML boilerplate," which simply means that it will ALWAYS follow this structure regardless of the type of webpage you are constructing.

While above is the necessary tags, here's the real version of the HTML boilerplate.

The basic structure of an HTML document includes several key components:

<!DOCTYPE>: This tag defines the document type and version of HTML being used.
<html>: This tag signifies the start of an HTML document.
<head>: This tag contains meta information about the document, such as the page's title, which is displayed in the browser's title bar or tab.
<title>: This tag specifies the title of the document, which is displayed in the browser's title bar or tab.
<body>: This tag contains the visible content of the document, such as text, images, and links.
<p>: This tag defines a paragraph of text.
<link> - This allows you to connect your CSS stylesheet. We will be talking more about this in a future lesson.

Classification as HTML tags

HTML tags are simple but there are two types of tags :

Empty tags
Container tags

Empty tags

<p></p>
<h1></h1>
<div></div>
<span></span>
<strong></strong>

Container tags: Also called 'self-closing tags'

  <img />
  <input />
  <meta />
  <link />

Types Of HTML Tags

Structural tags: These tags define the structure and layout of a web page, such as the <header>, <nav>, <main>, <article>, <aside>, <footer> tags.
Semantic tags: These tags provide additional meaning to the content on a web page, such as the <figure>, <figcaption>, <time>, <mark>, <details>, <summary> tags.
Text-level tags: These tags format text, such as the <b>, <strong>, <i>, <em>, <u>, <s>, <sub>, <sup>, <mark>, <ins>, <del>, <abbr>, <cite>, <code>, <pre> tags.
Media tags: These tags embed multimedia content, such as the <img>, <audio>, <video>, <picture>, <source> tags.
Form tags: These tags create form controls, such as the <form>, <input>, <select>, <option>, <textarea>, <label>, <legend>, <fieldset>, <button> tags.
Meta tags: These tags provide metadata about the document, such as the <meta>, <link>, <base>, <head> tags.
Other tags: These tags include <div>, <span>, <p>, <a>, <br>, <hr>, <ol>, <ul>, <li>, <table>, <caption>, <th>, <tr>, <td> tags.

HTML Attributes

They provide additional information about elements.
It is also specified in starting of the tag.
Attributes usually come in pairs like name="value".

Lists

In HTML, there are two types of lists that can be created: ordered lists (numbered) and unordered lists (bulleted).

An ordered list is created using the <ol> element, and each list item is defined using the <li> element. For example:

Copy code<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

An unordered list is created using the <ul> element, and each list item is defined using the <li> element. For example:

Copy code<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

You can also create nested lists by having a list inside another list. This can be achieved by adding another <ul> or <ol> element inside a <li> element of the outer list.

Copy code<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

You can also use <dl> tag for definition lists in which <dt> defines the term and <dd> describes the definition of the term.

Copy code<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Image Tag in HTML

In HTML, the <img> tag is used to embed images into a webpage. The <img> tag does not have a closing tag, it is a self-closing tag.

The src attribute is used to specify the URL or file path of the image file, and the alt attribute is used to provide alternative text for the image, in case the image cannot be displayed or for accessibility purpose.

For example, to add an image to a webpage with the file name "image.jpg" stored in the same directory as the HTML file, the following code can be used:

Copy code<img src="image.jpg" alt="An example image">

You can also use "height" and "width" attributes to specify the size of the image in pixels.

Copy code<img src="image.jpg" alt="An example image" height="200" width="300">

HTML Form

An HTML form is used to collect input from a user, such as text fields, checkboxes, radio buttons, and more. Forms are typically used to gather information from a user, such as a search query, contact information, or a survey.
A form is created using the <form> element, and the different form controls (text fields, buttons, etc.) are added inside the <form> element.
The <form> element has a few attributes, the most important of which is the action attribute, which specifies the URL or file path where the form data should be sent when the form is submitted. The method attribute specifies the HTTP method to be used when sending the form data (e.g. GET, POST).

For example, a simple form to collect a user's name and email address might look like this:

Copy code<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Submit">
</form>

In this example,

The <form> element has an action the attribute of "/submit-form" and a method the attribute of "post". Inside the form, there are two text fields (<input type="text"> and <input type="email">) and a submit button (<input type="submit">). Each form of control also has a name attribute, which specifies the name of the form control when the form data is sent.
Additionally, the <label> element is used to give the form controls a text description, the for the attribute of the label is used to connect the label to the associated form control by matching the id the attribute of the control element.

You can also use different form controls like textarea, select, checkbox, radio, file, etc. depending on the requirement of your form.

Thanks for reading!!

I hope you loved this! Have a wonderful day.