A Step by Step HTML Guide Made Easy

Welcome to A Step by Step HTML Guide for Beginners. The foundational technology known as HTML serves as the web’s framework. Without it, we couldn’t produce and distribute information the way we can now. Understanding HTML is a crucial ability to have whether you’re a blogger, a business owner, or just someone trying to develop a personal website. We’ll go over all you need to know to start using HTML in this guide.

Table of Contents

What is HTML?
HTML Syntax
Basic HTML Tags
Structuring Content with HTML
Links and Images
Tables
Forms
HTML5
Conclusion
Bonus: List of most common HTML tags

What is HTML?

HTML stands for Hypertext Markup Language. It’s a markup language used to create web pages. HTML uses tags to define elements such as headings, paragraphs, and images on a web page. These elements can then be styled using CSS and given interactivity using JavaScript.

By using tags, developers can provide information to web browsers about how to render the content on a page. For example, the <h1> tag tells the browser that the enclosed text is a top-level heading, while the <p> tag tells the browser that the enclosed text is a paragraph. This helps the browser to display the content in a readable and organized manner.

HTML tags can also be used to embed media, such as images and videos, into a web page. The <img> tag allows developers to insert images into a web page, while the <video> tag allows for the embedding of videos.

HTML Syntax

HTML is written in plain text and consists of tags and their attributes. Tags are enclosed in angle brackets (<>) and can be either opening tags or closing tags. The opening tag tells the browser where the element starts, and the closing tag tells it where the element ends. Attributes are added to tags to provide additional information about the element. Attributes consist of a name and a value and are added to the opening tag.

Here’s an example of a basic HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

In this example, we have an HTML document that includes a title, a head, and a body. The title element tells the browser what to display in the title bar of the browser window. The head element contains information about the document that is not displayed on the page itself, such as the title and any links to external stylesheets. The body element contains the content of the web page. This is the basic structure of any HTML page.

Basic HTML Tags

HTML5

Now that we’ve covered the basics of HTML syntax, let’s take a look at some of the most commonly used HTML tags.

<h1> - <h6> - Headings
<p> - Paragraphs
<strong> - Bold Text
<em> - Italic Text
<a> - Links
<img> - Images

The <h1> – <h6> tags are used to define headings. The <h1> tag is the largest and is usually used for the main heading of the page, while the smaller heading tags are used for subheadings.

The <p> tag is used to define paragraphs. Any text between the opening and closing <p> tags will be treated as a paragraph.

The <strong> tag is used to make text bold, while the <em> tag is used to make text italic.

The <a> tag is used to create links. The href attribute is used to specify the URL of the page that the link should go to. Here’s an example:

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

The <img> tag is used to display images. The src attribute is used to specify the URL of the image, while the alt attribute is used to provide alternative text that is displayed if the image cannot be loaded. Here’s an example:

<img src="https://www.example.com/image.jpg" alt="Example Image">

Structuring Content with HTML

HTML is all about structuring content. The <div> tag is used to create a container for content, while the <span> tag is used to define a small piece of content within a larger block of content. Here’s an example:

<div>
  <h1>Main Heading</h1>
  <p>This is some text.</p>
  <span>Small piece of text</span>
</div>

In this example, we have a <div> element that contains a main heading, a paragraph, and a small piece of text defined by the <span> tag.

The <ul> and <ol> tags are used to create unordered and ordered lists, respectively. Here’s an example:

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

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

Above we have an unordered list and an ordered list, both containing three items.

Links and Images

Links and images are an essential part of any web page. Let’s take a closer look at how to create links and images in HTML.

To create a link, we use the <a> tag, as we saw earlier. The href attribute is used to specify the URL of the page that the link should go to. We can also use the target attribute to specify whether the linked page should be opened in a new window or in the same window as the current page. Here’s an example:

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

In this example, we have a link that goes to the website https://www.example.com and is set to open in a new window.

To display an image, we use the <img> tag, as we saw earlier. The src attribute is used to specify the URL of the image, while the alt attribute is used to provide alternative text that is displayed if the image cannot be loaded. We can also use the width and height attributes to specify the size of the image. Here’s an example:

<img src="https://www.example.com/image.jpg" alt="Example Image" width="400" height="300">

Here we have an image with a width of 400 pixels and a height of 300 pixels.

Tables

Tables are a great way to display data on a web page. In HTML, we use the <table> tag to create a table, and the <tr> tag to create a table row. We start by defining the table column header titles using the <th> tags within the first table row, then within each row, we use the <td> tag to create a table cell. Here’s an example:

<table>
  <tr>
    <th>ITEM NAME</td>
    <th>PRICE</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Price 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Price 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Price 3</td>
  </tr>
</table>

ITEM NAME	PRICE
Item 1	Price 1
Item 2	Price 2
Item 3	Price 3

In this example, we have a table with three rows and two columns. Each row represents an item and its price and each column has a header

Forms

Forms are used to collect information from users. In HTML, we use the <form> tag to create a form, and the <input> tag to create form elements such as text boxes, radio buttons, and checkboxes. Here’s an example:

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

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

  <label for="message">Message:</label>

  <textarea id="message" name="message"></textarea><br><br>
  <input type="submit" value="Submit">
</form>

In this example, we have a form with three fields: name, email, and message. The action attribute is used to specify where the form data should be sent when the user clicks the submit button, while the method attribute is used to specify whether the form data should be sent using GET or POST.

HTML5

HTML5 is the latest version of HTML, and it introduces many new features and improvements. Here are some of the most notable new features:

Semantic elements: HTML5 introduces new elements such as <header>, <footer>, and <article> that have specific meanings and can be used to better structure content.
Video and audio: HTML5 includes built-in support for video and audio playback, making it easy to include multimedia content on a web page.
Canvas: HTML5 includes a new <canvas> element that can be used to draw graphics and animations on a web page.
Geolocation: HTML5 includes a new API that allows web applications to access the user’s location, making it possible to create location-based services.

Conclusion

In this guide, we’ve covered the basics of HTML, including syntax, tags, and structuring content. We’ve also looked at how to create links, images, tables, and forms, and we’ve introduced some of the new features in HTML5. With this knowledge, you should be well on your way to creating your own web pages. Happy coding!

Bonus: List of Most Common HTML tags

<html>: The root element of an HTML document.
<head>: Contains metadata about the document, such as the title and links to external stylesheets.
<title>: Defines the title of the document, which is displayed in the title bar of the browser window.
<meta>: Contains metadata about the document, such as the character encoding and description of the page.
<body>: Contains the content of the document, such as headings, paragraphs, and images.
<h1> – <h6>: Defines headings of different levels, with <h1> being the largest and <h6> being the smallest.
<p>: Defines a paragraph of text.
<strong>: Defines text that should be displayed in a bold font.
<em>: Defines text that should be displayed in an italic font.
<a>: Defines a hyperlink, which is used to link to other pages or resources.
<img>: Displays an image on the page.
<ul>: Defines an unordered list of items.
<ol>: Defines an ordered list of items.
<li>: Defines an item in a list.
<table>: Defines a table.
<tr>: Defines a row in a table.
<th>: Defines a header cell in a table.
<td>: Defines a data cell in a table.
<form>: Defines a form for user input.
<input>: Defines an input element, such as a text box or a checkbox.
<select>: Defines a drop-down list.
<option>: Defines an option in a drop-down list.
<textarea>: Defines a multi-line text input field.
<button>: Defines a clickable button.
<label>: Defines a label for an input element.
<fieldset>: Groups related form elements together.
<legend>: Defines a caption for a <fieldset>.
<br>: Inserts a line break.
<hr>: Inserts a horizontal rule.
<div>: Defines a division or a section of the page.
<span>: Defines a small piece of content within a larger block of content.
<style>: Defines CSS styles for the document.
<script>: Defines JavaScript code for the document.
<canvas>: Defines an area on the page where graphics can be drawn using JavaScript.
<video>: Displays a video on the page.
<audio>: Plays an audio file on the page.
<iframe>: Displays another web page within the current page.
<embed>: Embeds external content, such as a video or a map.
<object>: Embeds external content, such as a Flash animation or a PDF file.
<param>: Defines parameters for an <object> element.
<source>: Defines multiple sources for media elements, such as <video> or <audio>.
<track>: Defines text tracks for media elements, such as subtitles or captions.
<nav>: Defines a section of the page that contains navigation links.
<header>: Defines a header section of the page.
<footer>: Defines a footer section of the page.
<section>: Defines a section of the page.
<article>: Defines an independent, self-contained section of the page.
<aside>: Defines a section of the page that is tangentially related to the content around it.
<details>: Defines additional details that can be shown or hidden.
<summary>: Defines a heading for a <details> element.
<mark>: Defines text that should be highlighted.
<time>: Defines a date or time.
<progress>: Defines a progress bar.
<meter>: Defines a gauge.
<output>: Defines the result of a calculation.
<datalist>: Defines a list of pre-defined options for an input element.
<keygen>: Defines a key pair generator field for forms.
<source>: Defines multiple sources for media elements, such as <video> or <audio>.
<track>: Defines text tracks for media elements, such as subtitles or captions.
<menu>: Defines a list of commands or options.
<command>: Defines a command that can be invoked by the user.
<figure>: Defines a figure or illustration with an optional caption.
<figcaption>: Defines a caption for a <figure> element.

If you would like to read more in depth information on HTML, check out these resources:
Mozilla
w3schools

HTML is an essential component of Web Development but without CSS then it won’t look very good. You can learn the basics of CSS here

Trending now