HTML Basics: Everything You Need to Know to Create Your First Web Page

Sathish Kumar M's photo
Sathish Kumar M
·

7 min read

Table of contents

HTML is the code that is used to structure a web page and its content. It stands for Hyper Text Markup Language and it consists of a series of elements that tell the browser how to display the content1. In this blog, I will explain everything you need to know about HTML basics, such as:

  • What is HTML and how it works

  • How to create and save an HTML file

  • How to use HTML elements and attributes

  • How to structure a web page with headings, paragraphs, lists, images, links, tables, etc.

  • How to use HTML comments

  • How to validate your HTML code

What is HTML and how it works

HTML is a markup language that defines the structure of your content2. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way2. For example,

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

The <p> element represents a paragraph. The opening tag <p> marks the beginning of the paragraph element and the closing tag </p> marks the end. The text between the tags is called the element’s content.

An element can have one or more attributes that provide additional information about the element1. For example,

<img src="image.jpg" alt="A beautiful image">

The <img> element represents an image. It has two attributes: src and alt. The src attribute specifies the source URL of the image file. The alt attribute provides an alternative text for screen readers or browsers that cannot display images.

HTML elements can also be nested inside other elements1. For example,

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

The <div> element represents a generic container for other elements. It has no specific meaning or style by itself. The <h1> element represents a level-one heading. It has higher importance than other headings like <h2>, <h3>, etc. The <p> element represents a paragraph as before.

HTML documents have a specific structure that must be followed1. For example,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <!-- This is where your content goes -->
</body>
</html>

The first line <!DOCTYPE html> declares that this document is an HTML document. The <html> element wraps all the other elements in the document. It has an attribute lang that specifies the language of the document (in this case English). The <head> element contains information about the document such as its title (<title>) and character encoding (<meta charset="UTF-8">). The <body> element contains all the visible content of your web page.

How to create and save an HTML file

To create an HTML file, you need a text editor or an online tool that can write plain text files with .html extension3. You can use any text editor such as Notepad (Windows), TextEdit (Mac), or Gedit (Linux). You can also use online tools such as W3Schools Tryit Editor or CodePen.

To save an HTML file, you need to choose File > Save As from your text editor menu and give your file name with .html extension (for example index.html). You should save your file in a folder where you can easily find it later.

To view your HTML file in a browser, you need to open it with your browser application (such as Chrome, Firefox, Safari) by double-clicking on it or dragging it into your browser window.

How to use HTML elements and attributes

As we have seen before, HTML elements are used to define different parts of your web page’s content1. There are many different types of elements for different purposes. Some common ones are:

  • Headings: Use <h1> to <h6> elements to create headings with different levels of importance.

  • Paragraphs: Use <p> elements to create paragraphs of text.

  • Lists: Use <ul> elements to create unordered lists (with bullets) and <ol> elements to create ordered lists (with numbers). Use <li> elements inside lists to create list items.

  • Images: Use <img> elements to display images on your web page. You need to provide the source URL of the image file using the src attribute. You should also provide an alternative text using the alt attribute for accessibility reasons.

  • Links: Use <a> elements to create hyperlinks that can take you to other web pages or locations within the same page. You need to provide the destination URL using the href attribute. You can also specify how the link should open using the target attribute (for example _blank for a new tab).

  • Tables: Use <table> elements to create tables of data on your web page. You need to use <tr> elements inside tables to create table rows and <td> elements inside rows to create table cells. You can also use <th> elements instead of <td> elements for table headers.

You can find more HTML elements and their descriptions on W3Schools HTML Elements Reference or MDN HTML Elements Reference.

HTML attributes are used to provide additional information about HTML elements1. There are many different types of attributes for different purposes. Some common ones are:

  • id: The id attribute is used to specify a unique identifier for an element. You can use this identifier later for styling or scripting purposes.

  • class: The class attribute is used to specify one or more class names for an element. You can use these class names later for styling or grouping purposes.

  • style: The style attribute is used to specify inline CSS styles for an element. You can use this attribute to change the appearance of an element without using external style sheets.

  • src: The src attribute is used to specify the source URL of an image, audio, video, or script file that is embedded in an element.

  • href: The href attribute is used to specify the destination URL of a hyperlink that is created by an anchor (<a>) element.

  • alt: The alt attribute is used to specify an alternative text for an image, area, or input element that cannot be displayed or understood by some users or browsers.

You can find more HTML attributes and their descriptions on W3Schools HTML Attributes Reference or MDN HTML Attributes Reference.

How to structure a web page with headings, paragraphs, lists, images, links, tables, etc.

To structure a web page with different types of content, you need to use the appropriate HTML elements and attributes as explained before. Here is an example of a simple web page that uses headings, paragraphs, lists, images, links, and tables:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My First Web Page</h1>
  <p>This is a paragraph that introduces myself. My name is John and I am learning HTML.</p>
  <p>Here are some of my hobbies:</p>
  <ul>
    <li>Reading books</li>
    <li>Playing games</li>
    <li>Watching movies</li>
  </ul>
  <p>Here is an image of my favorite book:</p>
  <img src="book.jpg" alt="The Hitchhiker's Guide to the Galaxy">
  <p>If you want to learn more about HTML, you can visit these websites:</p>
  <a href="https://www.w3schools.com/html/" target="_blank">W3Schools HTML Tutorial</a><br>
  <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank">MDN Learn HTML</a><br>
  <a href="https://www.codecademy.com/learn/learn-html" target="_blank">Codecademy Learn HTML</a><br>

  <p>Here is a table of some HTML elements and their descriptions:</p>

<table border="1">
<tr><th>Element</th><th>Description</th></tr>

<tr><td>&lt;h1&gt; to &lt;h6&gt;</td><td>Create headings with different levels of importance.</td></tr>

<tr><td>&lt;p&gt;</td><td>Create paragraphs of text.</td></tr>

<tr><td>&lt;ul&gt; and &lt;ol&gt;</td><td>Create unordered and ordered lists.</td></tr>

<tr><td>&lt;img&gt;</td><td>Display images on your web page.</td></tr>

<tr><td>&lt;a&gt;</td><td>Create hyperlinks that can take you to other web pages or locations within the same page.</td></tr>

<tr><td>&lt;table&gt;</td><td>Create tables of data on your web page.</td></tr>

</table>


</body>
</html>

This is how the web page looks like in a browser:

How to use HTML comments

HTML comments are used to add notes or explanations to your HTML code that are not displayed on the web page. They can help you or other developers understand your code better. To create an HTML comment, you need to use this syntax:

<!-- This is a comment -->

You can place comments anywhere in your HTML code. For example,

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- This is the head section -->
  ...
</head>
<body>
 <!-- This is the body section -->
 ...
 <!-- This is the end of the body section -->
</body>
<!-- This is the end of the html document -->
</html>

How to validate your HTML code

To validate your HTML code means to check if it follows the rules and standards of HTML. Validating your code can help you avoid errors and improve your web page’s performance and accessibility.

There are online tools that can help you validate your HTML code automatically. One such tool is W3C Markup Validation Service. You can use this tool by entering your web page URL or uploading your HTML file or pasting your code directly.

The tool will show you any errors or warnings in your code and suggest how to fix them. For example,

You should try to fix all the errors and warnings in your code before publishing it online.

I hope this blog has helped you understand everything about HTML basics. If you have any questions or feedback, please leave a comment below. Happy coding! 😊

HTML5RoadmapWeb Development