What is HTML?

HyperText Markup Language (HTML) creates and structures web page content. It employs a system of tags to define elements such as headings, paragraphs, images, and links. Think of HTML as the essential building blocks for constructing anything on the web. Once you write HTML code, you can enhance the page with other languages like CSS and JavaScript to introduce interactivity, styling, and advanced functionality.

"Picture yourself creating a document in a word processor. You typically assign different font sizes to distinguish sections like headers, main content, footers, and tables of contents. HTML constructs this document framework and defines text sizes for web pages.”

HTML structure and syntax

An HTML document has a simple structure, as shown below. The key components of this document are:

Tag	Purpose
`<!DOCTYPE html>`	Declares the document type as HTML5.
`<html>`	Encloses the entire HTML document.
`<head>`	Contains metadata like the title and links to stylesheets (if required).
`<title>`	Sets the title of the page (displayed on the browser tab).
`<body>`	Contains the content displayed on the web page.

<!DOCTYPE html>
<html>
<head>
  <title> HTML BAsics </title>
</head>

<body>
  <!--The content goes here-->
</body>

</html>

HTML elements and tags

An element is an individual component of an HTML document that represents the semantics of that page. For example, the title element translates to the title of a page.

<!DOCTYPE html>
<html>
<head>
  <title>Html Basics</title>
</head>

<body>
  <h1>This is h1 tag</h1>
  <ul>
    <li>li tag1</li>
    <li>li tag2</li>
    <li>li tag3</li>
    <li>li tag4</li>
  </ul>
  <h2>This is h2 tag</h2>
  <p>This is paragraph tag.</p>
  <img 
    src="source of your image" 
    alt="if the image doesnt displays here ,alt tag displays its content" 
    width="250" 
    height="125"
  >
  <h3>This is h3 tag</h3>
  <ol>
    <li>This is li tag 1</li>
    <li>This is li tag 2</li>
    <li>This is li tag 3</li>
  </ol>
  <h4>This is h4 tag</h4>
  <h5>This is h5 tag</h5>
  <h6>This is h6 tag </h6>
</body>
</html>

We create elements using tags, which form the building blocks of any web page. Each tag defines a specific content type or layout component. Here are some essential tags:

<p>: Creates text blocks
<h1> to <h6>: Structure content hierarchically
<a>: Generates hyperlinks to other pages
<img>: Embeds images in web pages
<ul>/<ol>: Build unordered (bulleted) or ordered (numbered) lists
<li>: Defines individual list items
Semantic tags (<header>, <footer>, <nav>, <article>): Provide meaningful context to boost content readability and SEO.

/Note: Semantics refers to the meaning of a particular element. Syntax refers to the structure of a programming language.

Using HTML tags

We wrap content between an opening and closing tag to define elements. The closing tag includes a forward slash (/), while the opening tag omits it. Modern browsers interpret HTML tags as case-insensitive, treating <P> identically to <p>. However, modern HTML5 standards recommend lowercase tags. Below are correct usage examples:

<!DOCTYPE html>
<html>

<head>
  <title>Html Basics</title>
</head>

<body>
  <P>Blog Page</P>
  <p>This is the home page </p>
</body>

</html>

HTML also offers inline text styling tags to enhance visual appeal. Combine these with other elements for richer formatting. Key styling tags include:

<strong>: Bolds important content
<em>: Emphasizes text with italics
<u>: Underlines relevant content
<sup>/<sub>: Formats superscript or subscript text

You can nest HTML elements to apply multiple styles simultaneously. For example, to create a bold paragraph, nest the <strong> tag within a <p> element like this:

<!DOCTYPE html>
<html>

<head>
  <title>Html Basics</title>
</head>

<body>
  <p>Blog Page</p>
  <p><strong>This is the home page </strong></p>
</body>

</html>

HTML attributes

HTML attributes provide additional information about the tags. Think of these as properties of an element. Attributes are added to the opening tag of an HTML element in the form of name-value pairs, separated by an equals sign (e.g., attribute_name="value").

The common syntax for writing attributes is:

<tagName attribute_name="attribute_value"></tagName>

Common attributes

Let’s look at some of the commonly used attributes:

id: To specify a unique identifier for an element
class: To specify one or more class names for an element
style: To add inline styles to an element

Consider the following example where we use the attributes with some tags.

<!DOCTYPE html>
<html>
<head>
  <title>Html Basics</title>
  <style>
    .highlight{
      color: yellow;
    }
  </style>
</head>
<body>
  <div id="main-section">
    <p class="highlight">Important text.</p>
    <p style="color: blue;">This is the home page .</p>
  </div>
</body>
</html>

Specific attributes

Certain attributes apply exclusively to specific HTML elements. Key examples include:

For the `<a>` (anchor) tag:

href: Specifies the link's destination URL
target: Defines where to open the linked document (e.g., new tab)

<!DOCTYPE html>
<html>
<head>
  <title>HTML Basics</title>
</head>
<body>
  <ul>
    <li>
      <a href="https://google.com">Google</a>
    </li>
    <li>
      <a href="https://facebook.com" target="_blank">Facebook</a>
    </li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Educative</title>
</head>
<body>
  <img src="https://google.com/logo" alt="Google Logo" height="10px" width="100px">
  <br/>
  <br/>
<h1>Google</h1>
</body>
</html>

For the `<img>` (image) tag:

src: Sets the image file path
alt: Provides alternative text for accessibility
width & height: Control the image dimensions

Note: The image tag does not use a closing tag.

HTML tables

We can add tables to a web page by translating their data into rows and columns. Each row/column pair will have a piece of data called a table cell.

To declare an HTML table, we use the <table> tag. We then add rows to our table with the <tr> tag. From there, we specify the cells with the <td> tag.

Let’s look at a simple table in HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Html Basics</title>
</head>

<body>
  <table>
   <tr>
     <th>Name</th>
     <th>DOB</th>
     <th>Weight(kg)</th>
   </tr> 
   <tr>
     <td>Aryan</td>
     <td>07/12/1994</td>
     <td>70</td>
   </tr>
    <tr>
     <td>vishal</td>
     <td>28/07/2000</td>
     <td>90</td>
   </tr>
 </table>
</body>
</html>

Build a web page from scratch

Now, we know the basic terms of HTML and how to format an HTML file properly. But how do you make a web page? Let’s go through a step-by-step guide to learn how it’s done. We will be making a simple “About Me” web page that includes the following:

Title with your name
Description of yourself in a paragraph
Hyperlink to a website (e.g., a personal website)
List of your skills
Table to list your work experience

Step 1: Create the HTML file

We will start with a new file and write the basic structure of an HTML page. A simple starting HTML file structure will be as follows:

<!DOCTYPE html>
<html>

<head>
  <title>My HTML Webpage: Hari Rajak</title>
</head>

<body>
  <h1>About Me: Hari Rajak</h1>
  <p>I am learning how to build webpages using HTML.</p>
</body>

</html>

Explanation:

Line 1: We declare the document type. This tells the browser that we’re using HTML5, the latest version of HTML.
Lines 2–13: We wrap all our content within the <html> tag.
Lines 4–6: We start with the <head> section that includes the <title> tag that sets the title of your web page.
Lines 8–11: We define the <body> section. Everything inside the <body> tag will be displayed on your web page.
- Line 9: We use the <h1> tag to define the heading of our page.
- Line 10: We use the <p> tag to write a sentence about ourselves.

Step 2: Add a link to a website

Now, let’s add a link to an external website

<!DOCTYPE html>
<html>

<head>
  <title>My HTML Webpage: Hari Rajak</title>
</head>

<body>
  <h1>About Me: Hari Rajak</h1>
  <p>I am learning how to build webpages using HTML.</p>

  <!--Link to website-->
  <a href="https://www.google.com" target="_blank">Google</a>
</body>

</html>

We used the <a> tag with the href attribute to add a link to https://google.com

Step 3: Add a list of skills

<!DOCTYPE html>
<html>

<head>
  <title>My HTML Webpage: Hari Rajak</title>
</head>

<body>
  <h1>About Me: Hari Rajak</h1>
  <p>I am learning how to build webpages using HTML.</p>

  <!--Link to website-->
  <a href="https://www.google,com" target="_blank">Google</a>

  <!--List of Skills-->
  <h3>My Skills</h3>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>React</li>
  </ul>
</body>

</html>

Explanation:

Line 13: We use the <h3> tag to define the subheading for the skills section.
Lines 14–19: We use the <ul> and <li> tags to create an unordered list.

Step 4: Add a table for work experience

Now, let’s add a table for adding work experience. We will add multiple rows where each row will specify a separate job experience entry. The column headers will be Employer, Job Title, and Years.

<!DOCTYPE html>
<html>

<head>
  <title>My HTML Webpage: Hari Rajak</title>
</head>

<body>
  <h1>About Me: Hari Rajak</h1>
  <p>I am learning how to build webpages using HTML.</p>

  <!--Link to website-->
  <a href="https://www.google.com" target="_blank">Google</a>

  <!--List of Skills-->
  <h3>My Skills</h3>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>React</li>
  </ul>

  <!--Work experience-->
  <table>
    <tr>
    <th>Employer</th>
    <th>Job Title</th>
    <th>Years</th>
   </tr> 
   <tr>
     <td>Microsoft</td>
     <td>Developer</td>
     <td>2010-2011</td>
   </tr>    
   <tr>
     <td>Facebook</td>
     <td>Developer</td>
     <td>2011-2015</td>
    </tr>
    <tr>
      <td>Educative</td>
      <td>CEO</td>
      <td>2018-now</td>
   </table>
</body>

</html>

Conclusion

Congratulations! You've built a functional web page using pure HTML. Throughout this blog, you've mastered HTML fundamentals—from document structure and essential tags to content creation and styling techniques. By completing this hands-on project, you've established a critical foundation for your web development journey.

Keep experimenting: add new sections, explore CSS styling, or incorporate JavaScript interactivity. Remember: consistent practice unlocks HTML mastery and builds unshakeable coding confidence

HTML for Beginners: Building the Skeleton of a Webpage

Table of contents

What is HTML?

HTML structure and syntax

HTML elements and tags

Using HTML tags

HTML attributes

Common attributes

Specific attributes

For the `<a>` (anchor) tag:

For the `<img>` (image) tag:

HTML tables

Build a web page from scratch

Step 1: Create the HTML file

Explanation:

Step 2: Add a link to a website

Step 3: Add a list of skills

Explanation:

Step 4: Add a table for work experience

Conclusion

Subscribe to my newsletter

Hari Rajak

Hari Rajak

HTML for Beginners: Building the Skeleton of a Webpage

Table of contents

What is HTML?

HTML structure and syntax

HTML elements and tags

Using HTML tags

HTML attributes

Common attributes

Specific attributes

For the <a> (anchor) tag:

For the <img> (image) tag:

HTML tables

Build a web page from scratch

Step 1: Create the HTML file

Explanation:

Step 2: Add a link to a website

Step 3: Add a list of skills

Explanation:

Step 4: Add a table for work experience

Conclusion

Subscribe to my newsletter

Hari Rajak

Hari Rajak

For the `<a>` (anchor) tag:

For the `<img>` (image) tag: