Day 1 - HTML - Introduction & Basic Structure

Niotechone Marketing Team
November 12, 2025
2:30 pm

Learning Objectives (Before the Tutorial)

By the end of this tutorial, you will understand :

What HTML is and why it is important.
Learn how to create the basic structure of a simple web page in HTML.
Know the meaning of elements, attributes, and tags.
Write headings, paragraphs, and basic formatting of text.
Apply simple inline styles to text.
Understand how to include comments in HTML.

Concept Box – Why This Matters

HTML (HyperText Markup Language) is the foundation of all web pages. It conveys to the browser what to display and the structure of the content in the page.

Without HTML you cannot write a web page or build a website. The knowledge of HTML gives you the ability to create the basic structure of any website.

Section 1: HTML Introduction

HTML is an acronym for HyperText Markup Language. It utilizes “tags” to explain how content on the web should appear in a browser.

A web browser will read the tags and display the page accordingly.

Example:

🌐

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

Brief Summary:

HTML tells browsers which content will display what.
Tags establish structure.
The <html>, <head>, and <body> tags are the building blocks.

Section 2: Editors and Basic Structure

You can write HTML in any text editor, like Notepad, VS Code, or Sublime Text. Next, save the file with a .html extension (for example, index.html) and open it in a browser.

Example basic structure:

🌐

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <p>Paragraph text goes here.</p>
  </body>
</html>

Section 3: Elements and Attributes

An HTML element is usually made up of a start tag, the content itself, and an end tag. Attributes provide additional information concerning an element.

Example:

🌐

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

Section 4: Headings and Paragraphs

HTML has 6 levels of headings (<h1> to <h6>). Paragraphs are created using the tag.

🌐

<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph of text.</p>

Section 5: Styles and Formatting

Inline styles are used to change an element’s appearance.

🌐

<p style="color:blue; font-size:18px;">This is blue text.</p>

Bold, Italic, and Underline are used for formatting text.

Section 6: Comments

Comments are text that is not rendered in the browser that can help you or someone else understand your code.

Example:

🌐

<!-- This is a comment -->

Common Mistakes

Forgetting to close a tag
Writing tags in uppercase (although HTML5 is not case-sensitive, lowercase is preferred)
Not using quotation marks around values of attributes.
Forgetting to save the file as .html

Mini Practice Challenges

1. Create a .html file, and add your name to the title.

2. Add two headings, and a paragraph

3. Make one word bold, and another italicized

4. Add a comment: “This is my first webpage!”

Summary – What You Learned

In this lesson, you learned how HTML builds a page with elements, attributes, and tags, and wrote some headings, paragraphs, and inline styles. You also learned how to write a comment and have a better understanding of what to avoid doing when building HTML.

Useful References & Learning Resources

LeetCode and Practice References

– LeetCode HTML Basics Practice: https://leetcode.com/problemset/all/?topicSlugs=html
– W3Schools HTML Tutorial:
https://www.w3schools.com/html/

Source Code:

https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/Html-Mastery/Day%20-%201%20-%20HTML%20-%20Introduction%20%26%20Basic%20Structure

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is HTML and why is it important?

HyperText Markup Language or HTML is the coding language that is commonly used to create web pages. HTML is responsible for the structure and layout of any website you access, from blogs to e-commerce. Everything on the world wide web is based on HTML as the primary foundation.

What does <!DOCTYPE html> mean?

<!DOCTYPE html> is an instruction for the browser to indicate this webpage is an HTML5 document (the latest version of HTML). It helps to render correctly across all modern browsers.

What is the difference between HTML tags and elements?

Tag: The code containing the angle brackets, like or .

Element: The entire structure; the opening tag, content, and closing tag. For example, Hello World That's an element.

What are the <head> and <body> tags?

The <head> section has the meta-data, such as the page title, links to stylesheets, and scripts.

The <body> section contains all the visible content such as text, images, buttons, and links.

Can I write HTML using any text editor?

Yes! You can write HTML in Notepad, VS Code, Sublime Text, or Atom. However, we suggest using Visual Studio Code for beginners as it has syntax highlighting.