Demystifying HTML: The Building Block of the Web

Introduction:

The world of web development can be as fascinating as it is complex, with a multitude of languages and technologies powering the digital landscapes we explore every day. But if you're just starting on this exciting journey, there's one language you absolutely must befriend: HTML.

HTML, or HyperText Markup Language, is the foundation upon which the web is built. It's the secret sauce that turns lines of code into the stunning websites and immersive web applications we adore. In this blog series, we're going to demystify HTML and guide you through its fascinating world, showing you why it's the essential first step in your web development adventure.

So, what exactly is HTML, and why should you care? Imagine HTML as the blueprint of a house, a blueprint that browsers like Chrome, Firefox, and Safari use to construct the websites you visit. Without HTML, the web would be a shapeless void, devoid of structure, and devoid of the mesmerizing content you enjoy.

Getting Started with HTML

HTML is the standard markup language for creating web pages. To get started with HTML, you'll need the following:

HTML tags and keywords :

HTML tags are keywords enclosed in angle brackets (<>) that represent HTML elements. Tags are case-insensitive in HTML, meaning they can be written in uppercase or lowercase, but lowercase is the recommended convention for consistency.

Here are some common HTML tags and their purposes:

<html>: The root element that contains all other HTML elements on the page.
<head>: Contains meta-information about the document, such as the title and links to external resources like stylesheets and scripts.
<title>: Sets the title of the web page, displayed in the browser's title bar or tab.
<meta>: Provides metadata about the document, including character encoding and description.
<script>: Embeds or references JavaScript code.
<body>: Contains the visible content of the web page, including text, images, and other elements.
<div>: A generic container for grouping and styling elements.
<a>: Creates hyperlinks to other web pages or resources.
<img>: Embeds images in the document.
<ul> and <ol>: Create unordered and ordered lists, respectively.
<li>: Defines list items within <ul> (unordered) or <ol> (ordered) lists.

DOCTYPE

All HTML documents should start with a DOCTYPE declaration to specify the HTML version. For HTML5, use:

<!DOCTYPE html>

This tells the browser that this is an HTML5 document.

HTML Tags

The HTML code goes within <html></html> tags:

<!DOCTYPE html>
<html>

</html>

The main parts of an HTML document are:

<head> - Contains meta information
<body> - Contains the actual content

A basic structure would be:

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

  </body>
</html>

Headings

You can add headings using <h1> to <h6> tags:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings of decreasing importance, with <h1> being the most important and <h6> the least.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Paragraphs

Use <p> tags for paragraphs:

<p>: Defines a paragraph of text.

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

Links

You can add links using the <a> tag:

<link>: Specifies external resources like stylesheets (CSS) or icons.

<a href="https://www.example.com">Link to Example</a>

Images

Add images with the <img> tag and the src attribute:

<img src="image.jpg" alt="Description">

The alt attribute provides an alternative text.

So in summary, the basic structure of an HTML page would be:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>   
  </head>
  <body>
    <h1>Heading</h1>      
    <p>Paragraph.</p>     
    <a href="#">Link</a>     
    <img src="#" alt="Image">
  </body>
</html>

Attributes: HTML elements can also have attributes, which provide additional information about the element or modify its behaviour. Attributes are specified within the opening tag and are written as name-value pairs.

For example, the <a> (anchor) element often includes an href attribute to specify the URL to which the link points:

htmlCopy code<a href="https://example.com">Visit Example.com</a>

Attributes vary depending on the element and can control things like styling, behaviour, and more.

HTML Forms and User Input

How HTML Forms Work

HTML forms allow users to interact with web pages by filling in text fields, selecting options from drop-down menus, and clicking buttons. When the user submits the form, the data is sent to the web server for processing.

Here's how HTML forms work:

The Element

All HTML forms start with a <form> element. This element defines the form and contains all the form controls. It has several attributes that control how the form works:

action: Specifies the URL to which the form data is submitted.
method: Specifies the HTTP method used to send the form data. Common values are GET and POST.

For example:

<form action="/process-form.php" method="post">
</form>

Form Controls

Form controls are the different elements that users interact with, like:

<input>: Creates several types of form controls like text fields, checkboxes, radio buttons, etc.
<select>: Creates drop-down menus.
<textarea>: Creates multi-line text fields.
<button>: Creates submit and reset buttons.

Each form control has a name attribute that identifies the form data being submitted.

For example:

<input type="text" name="username">
<input type="password" name="password">

Submitting the Form

When the user submits the form, usually by clicking a submit button, the data is sent to the URL specified in the action attribute.

The data is sent as name-value pairs, with the name attribute acting as the name and the value being whatever the user entered.

For example, if a user enters "john" for username and "password123" for password, the submitted data would be:

username=john&password=password123

Server-Side Processing

The server-side script at the action URL then processes the submitted data. Each programming language has APIs to access the submitted form data.

For example, in PHP you can use the $_POST and $_GET arrays to access data submitted via POST and GET respectively.

So in our example, in PHP you can access the submitted data like this:

$username = $_POST['username']; 
$password = $_POST['password'];

HTML Semantic Elements List

Some of the main semantic HTML elements are:

<header> - Defines a header for a document or section. It often contains the site name and main navigation.
<nav> - Contains major navigational links for the site.
<article>- Defines independent, self-contained content. Good for blog posts, forum posts, user comments, etc.
<section> - Defines a section in a document, typically with a heading.
<aside> - Defines content aside from the main content, like a sidebar.
<footer> - Defines a footer for a document or section. Contains things like copyright info, author info, related links, etc.
<main> - Specifies the main content of a document. Should only be used once per page.
<figure> and <figcaption> - Used to wrap images and their caption.
<time> - Specifies a date/time.

Semantic elements give meaning to the content and make the HTML more readable for humans and machines. Some benefits of using semantic elements are:

Better accessibility for assistive technologies like screen readers
Better search engine optimization (SEO)
Easier to style with CSS
More logically structured HTML

For example:

<header>
  <h1>My Website</h1>
</header>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>  
</nav>  

<main>
  <article>
    <h2>My First Blog Post</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </article>
</main>

<footer>
  <p>&copy; 2023 My Website</p>
</footer>

HTML Links and Anchors

You can create hyperlinks in HTML using the <a> tag. The basic syntax is:

<a href="link url">Link Text</a>

Where:

href is the required attribute that contains the URL of the link
The text between the <a> tags is the visible link text that the user will click

For example:

<a href="https://www.example.com/">Example Link</a>

This will create a link with the text "Example Link" that points to https://www.example.com/

You can link to:

Other web pages using full URLs or relative URLs
Email addresses using mail to:
Phone numbers using tel:
Specific sections on the same page using #section-id
JavaScript using javascript:

You can also link images, headings, paragraphs, and any other HTML element by wrapping them in an <a> tag.

For example:

<a href="https://www.example.com/">
  <img src="image.png" alt="Example">
</a>

This will make the entire image clickable and link to https://www.example.com/.

HTML Images and Multimedia:

You can add images to HTML pages using the <img> tag. The basic syntax is:

<img src="image_url" alt="alternative text">

Where:

src - Specifies the path (URL) to the image. This can be a relative or absolute URL.
alt - Provides an alternative text if the image cannot be displayed. This is important for accessibility.

For example:

<img src="dinosaur.jpg" alt="Dinosaur skeleton">

This will add an image called dinosaur.jpg and provide an alternative text Dinosaur skeleton.

You should also specify the width and height of the image to avoid reflow issues:

<img src="dinosaur.jpg" alt="Dinosaur skeleton" width="400" height="300">

This ensures the layout is stable when the image loads.

You can add images from:

The same folder: <img src="dinosaur.jpg">
A subfolder: <img src="images/dinosaur.jpg">
An external website: <img src="https://example.com/dinosaur.jpg">

However, external images have downsides so it's best to host images on your own server.

For the alt text, you should provide:

A brief description if the image contains meaningful content.
An empty string alt="" for purely decorative images.

You can also annotate images with captions using the <figure> and <figcaption> tags:

<figure>
  <img src="dinosaur.jpg" alt="Dinosaur skeleton" width="400" height="300">
  <figcaption>Dinosaur skeleton in a museum.</figcaption>
</figure>

This provides a semantic grouping of the image and its caption.

HTML Lists and Tables

Creating Lists and Tables in HTML

Lists and tables are essential elements for structuring information in HTML. Here are the basics of creating lists and tables:

Lists

HTML provides three types of lists:

Unordered Lists:

Use the <ul> element:

<ul>
  <li>Coffee</li> 
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered Lists:

Use the <ol> element:

<ol>
  <li>Brush teeth</li>
  <li>Take a shower</li>  
  <li>Get dressed</li>
</ol>

Definition Lists:

Use the <dl> element:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>  
  <dt>Tea</dt>  
  <dd>Made from camellia sinensis</dd>
</dl>

Tables

Tables are created using the <table> element, and consist of rows (<tr>) and cells (<td>):

<table>
  <tr>
    <th>Name</th>  
    <th>Age</th>
  </tr> 
  <tr>
    <td>John</td>
    <td>30</td>   
  </tr>
</table>

You can also have:

Table headers with <th>
Columns spanned with colspan
Rows spanned with rowspan
Groups of related rows with <thead>, <tbody>, and <tfoot>

Hope this helps!

"Stay tuned for our next post, where we'll uncover the magic of CSS and how it brings your HTML to life. Until then, keep coding!"

Connect with me on my socials:

Twitter: Click here

LinkedIn: Click here

GitHub: Click here

Demystifying HTML: The Building Block of the Web

HTML for beginners

Table of contents

Introduction:

Getting Started with HTML

HTML tags and keywords :

DOCTYPE

HTML Tags

Headings

Paragraphs

Images

HTML Forms and User Input

How HTML Forms Work

The Element

Form Controls

Submitting the Form

Server-Side Processing

HTML Semantic Elements List

HTML Links and Anchors

HTML Images and Multimedia:

HTML Lists and Tables

Creating Lists and Tables in HTML

Lists

Unordered Lists:

Ordered Lists:

Definition Lists:

Tables