Learn HTML5 With Examples

by Keshav Kumar
a few seconds ago 12 min read

Introduction to HTML

What is HTML?

HTML stands for Hyper Text Markup Language. A markup language uses tags to identify content.

File Extension: .html or .htm

Modern Web Design

HTML: Structure
CSS: Presentation
Javascript: Behaviour
PHP or Similar: Backend
CMS: Content Management System

HTML files are text files, so you can use any text editor like Notepad to create and modify them. More advanced text editors like VS Code provide a wide variety of additional tools and functionalities that greatly enhance and speed up the coding workflow.

HTML Document Structure

HTML documents are made up of HTML elements. An HTML element is written using a start tag and an end tag, and with the content in between. HTML documents consist of nested HTML elements. HTML is a not a case-sensitive language.

Any HTML file starts with the <html> tag and it's made by two main sections: the <head> and the <body>.

Basic Tags:

<!DOCTYPE html> defines that this document is a HTML5 document
<head> is the first building block of any HTML page </head>
<title> for placing a title describing the web page on the browser tab </title>
<body> is the second building block that contains the visual part of the web page </body>
<h1> heading tag </h1>
<p> paragraph tag </p>
<br> line break tag
<hr> horizontal line. This tag is used to define a thematic break in the HTML page content

HTML `<div>` and `<span>` Tags

The <div> tag is used as a container for HTML elements, which can be then styled with CSS or manipulated with Javascript.

The <span> tag is like an inline container used to select a particular part of a text, or a part of a document.

<p>He has <span style="color:blue">blue</span> eyes.</p>

Text Formatting Tags

Here is a list of tags that specify text style:

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
<b> Bold Text </b>
<strong> Strong text looks like bold, but it is also considered as "Important" </strong>
<i> Italic Text </i>
<em> Shown as italic text but considered as "important" </em>
<big> Big Text </big>
<small> Small Text </small>
<sub> Subscripted Text </sub>
<sup> Superscripted Text </sup>
<ins> Inserted Text </ins>
<del> Deleted Text </del>

Headings are not just to make the text big and bold. Search engines use headings to index the web page structure and content.

HTML Attributes

Attributes provide additional information about an element or a tag, while also modifying them. Most attributes have a value. The value modifies the attributes.

Attributes are always specified in the start tag, and they appear in name="value" pairs.

<p align="center">
  This text is aligned to the center
</p>
<hr width="100px" />

An element's width can be defined using Pixels(px) or Percentages(%).

Here is a list of most commonly used attributes we can use:

action can be used to specify where to send the form data when a form is submitted
```
<form action="/action.php">
<input type="text" />
</form>
```
alt generally used with <img> tag to provide alternate text when the original element fails to display
```
<img src="image.jpg" alt="Image Description" />
```
class is used to add one or more CSS classnames for an element
```
<div class="text-center">
This is a text
</div>
```
cols specifies the width of a <textarea>
```
<textarea cols="20"></textarea>
```
dir specifies the text direction for the content in an element
```
<p dir="rtl">Write this text right-to-left!</p>
```

disabled specifies that specific element or group of elements should be disabled

<!-- Button Example -->
<button type="button" disabled>Sign In</button>

<!-- Fieldset Example -->
<fieldset disabled>
<legend>Register:</legend>
Name: <input type="text"><br>
Email: <input type="email"><br>
DOB: <input type="date">
</fieldset>

<!-- Input Example -->
<form action="/action.php">
First Name: <input type="text" name="TxtFname"><br>
Last Name: <input type="text" name="Txtlname" disabled><br>
<input type="submit" value="Submit">
</form>

<!-- Option Example -->
<select>
<option value="Delhi">Delhi</option>
<option value="Bihar" disabled>Bihar</option>
<option value="Goa">Goa</option>
<option value="Karnataka">Karnataka</option>
</select>

<!-- Select Example -->
<select disabled>
<option value="Bihar">Bihar</option>
<option value="Goa">Goa</option>
<option value="Karnataka">Karnataka</option>
<option value="Delhi">Delhi</option>
</select>

<!-- Textarea Example -->
<textarea disabled>
At Blogbudz.com you will learn about many things. We regularly post informational content about everything here.
</textarea>

for specifies which form element(s) a label is bound to

<form action="/action.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

height specifies the height of the element

<img src="image.jpg" width="100px" height="50px" />

hidden used to hide any element which specifies that the content is not no longer relevant
```
<input type="text" hidden />
```
href specifies the URL of the page the link goes to
```
<a href="about.html">About Page</a>
```
id specifies a unique id for an element which can be used for CSS or JS both
```
<div id="container">
This is a container
</div>
```

method specifies the HTTP method to use when sending form data

<!-- We use two HTTP methods in the form which are GET or POST -->
<form action="/action.php" method="GET">
First Name: <input type="text" name="TxtFname"><br>
Last Name: <input type="text" name="Txtlname"><br>
<input type="submit" value="Submit">
</form>

multiple used to allow the user to select multiple file in an input type file field.

<form>
<label for="files">Select multiple images:</label>
<input type="file" id="images" name="images" multiple>
</form>

rows specifies the height of a <textarea>

<textarea rows="5" cols="15">
At Blogbudz.com you will learn about many things. We regularly post informational content about everything here.
</textarea>

src specifies the URL of the media file

<img src="smiley.gif" alt="Smiley face">

style specifies an inline CSS style for an element

<p style="color: red;">This is a paragraph.</p>

title specifies extra information about an element

<p title="Coders Helpline Website">codershelpline.com</p>

type specifies the type of element

For <button> elements, the type attribute specifies the type of button.

For <input> elements, the type attribute specifies the type of <input> element to display.

<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>

<form action="/action.php">
Username: <input type="text" name="username"><br>
<input type="submit" value="Submit">
</form>

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

value specifies an initial value for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

width specifies the width of the element

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Please check the Complete HTML Attributes List.

Image Tag

The `<img>` Tag

The <img> tag is used to insert an image. It contains only attributes, and does not have a closing tag.

Image Location

The image's URL (address) can be defined using the src attribute. The HTML image syntax looks like this:

<html>
   <head>
      <title>Blogbudz Img Example</title>
   </head>
   <body> 
      <img src="tree.jpg" alt="Palm Tree" />
   </body>
</html>

In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is required.

Image Resizing

To define the image size, use the width and height attributes. The value can be specified in pixels or as a percentage:

<html>
   <head>
      <title>Blogbudz Image Resize Example</title>
   </head>
   <body> 
      <img src="tree.jpg" height="150px" width="150px" alt="" />
      <!-- or -->
      <img src="tree.jpg" height="50%" width="50%" alt="" />
   </body>
</html>

Link Tag

The `<a>` Tag

You can add links to text or images which will redirect the user to another file or webpage. In HTML, links are defined using the <a> tag.

Use the href attribute to define the link's destination address:

<a href="http://codershelpline.com"> Coders Helpline </a>

To link an image to another document, simply nest the <img> tag inside <a> tags.

The `target` attribute

The target attribute specifies where to open the linked document. Giving a _blank value to your attribute will open the link in a new window or new tab:

<a href="http://codershelpline.com" target="_blank"> Coders Helpline </a>

Bonus Tip: You can do more than just hyperlinks with an anchor tag though. You can also have a link to an email address:

<a href="mailto: keshav@blogbudz.com">Send Email</a>

Lists

HTML Ordered Lists

An ordered list starts with the <ol> tag, and its each list item is defines by the <li> tag. The list items will be automatically marked with numbers.

HTML Unordered Lists

An unordered list starts with the <ul> tag. The list items will be marked with bullets.

Tables

Creating a Table

Tables are defined by using the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table columns (table data) with the <td> tag.

The <th> tags represent the table headers.

A table cell can span two or more columns using the colspan attribute.

A table cell can span two or more rows using the rowspan attribute.

The <thead> tag is used to group header content in an HTML table.

The <tbody> tag is used to group body content in an HTML table.

The <tfoot> tag is used to group footer content in an HTML table.

<thead>, <tbody> and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.

Forms

An HTML form is used to collect user input and also send that input to server for processing.

The `<form>` element

The HTML <form> element is used to create an HTML form. Use the action attribute to point to a webpage that will load after the user submits the form.

<form action="action.php">

</form>

The `method` and `name` attributes

The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted:

<form action="action.php" method="GET">
<form action="action.php" method="POST">

When you use GET, the form data will be visible in the page address. Use POST if the form is updating data, or includes sensitive information (passwords). POST offers better security because the submitted data is not visible in the page address.

To take in user input, you need the corresponding form elements, such as text fields. The <input> element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc. The example below shows a form requesting a username and password:

<form>
  <input type="text" name="Username" /><br/>
  <input type="password" name="Password"/>
</form>

Notice that each input field have a name attribute to be submitted. The name attribute is used to send input value of the field for further processing. In case of input type radio, name attribute also allows the user to select only one of a number of choices:

<input type="radio" name="gender" value="Male"> Male <br/>
<input type="radio" name="gender" value="Female"> Female

HTML Input Types

Here are the different input types you can use in HTML:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

There are some most commonly used Input Types, which are following:

Input Type Text

Input Type Password

Input Type Radio

Input Type Checkbox

Input Type Button

Input Type Color

Input Type Date

Input Type Email

Input Type File

HTML Semantic Elements

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>,<table> and <article> - Clearly defines its content.

Semantic Elements in HTML

Here are some semantic elements that can be used to define different parts of a web page:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<nav>
<section>
<summary>

Semantic Elements in HTML

HTML `<section>` Element

HTML `<article>` Element

HTML `<header>` Element

HTML `<footer>` Element

HTML `<nav>` Element

HTML `<aside>` Element

HTML `<figure>` and `<figcaption>` Element

Some References:

Tags: learn html5html5 basicshtml tags with exampleshtml csshtml5 tagshtml formhtml attributeshtml5 semantics

Author

Keshav Kumar

Self Taught Full Stack Web Developer. Loves to share my knowledge back to community. Passionate Blogger.

Learn HTML5 With Examples

Introduction to HTML

Modern Web Design

HTML Document Structure

HTML <div> and <span> Tags

Text Formatting Tags

HTML Attributes

Image Tag

The <img> Tag

Image Location

Image Resizing

Link Tag

The <a> Tag

The target attribute

Lists

HTML Ordered Lists

HTML Unordered Lists

Tables

Creating a Table

Forms

The <form> element

The method and name attributes

HTML Input Types

Input Type Text

Input Type Password

Input Type Radio

Input Type Checkbox

Input Type Button

Input Type Color

Input Type Date

Input Type Email

Input Type File

HTML Semantic Elements

What are Semantic Elements?

Semantic Elements in HTML

HTML <section> Element

HTML <article> Element

HTML <header> Element

HTML <footer> Element

HTML <nav> Element

HTML <aside> Element

HTML <figure> and <figcaption> Element

Keshav Kumar

Join our occasional newsletter

HTML `<div>` and `<span>` Tags

The `<img>` Tag

The `<a>` Tag

The `target` attribute

The `<form>` element

The `method` and `name` attributes

HTML `<section>` Element

HTML `<article>` Element

HTML `<header>` Element

HTML `<footer>` Element

HTML `<nav>` Element

HTML `<aside>` Element

HTML `<figure>` and `<figcaption>` Element