HTML is the main content for every web page. It helps you structure text, links, and media. You can build pages that browsers convert into a well-designed page.
What is HTML?
HTML stands for HyperText Markup Language, which tells the browser how to show content. So, each web page you see on the internet has HTML.
A web page can hold many elements, such as:
- Text
- Links
- Images
- Forms
And other parts through HTML tags.
You need HTML because no page exists online without it. HTML gives order to a page. A browser reads HTML to know how to display content.
A page shows text without style or links if there is no HTML. HTML also helps you add CSS and JavaScript to the web page.
An HTML page has a root element called <html>. You have a <head> part and a <body> part inside it. The head part places the title and metadata, while the body part shows the visible page content.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my page.</p>
</body>
</html>
This returns a page with a title in the browser tab and a heading with a paragraph.
An element has an opening tag, content, and a closing tag. For example <p>Hello</p> has a tag <p>, text content, and a closing </p>.
Some tags do not need a closing part, such as <br> or <img>. Tags define the role of content in the document.
How to Write Your First HTML Page
You write HTML in a plain text editor and save it as .html. Then you open that file in a browser to see the result.
Start with a <!DOCTYPE html> line, then add <html>, <head>, and <body>. Inside the body, add headings, paragraphs, and links to shape your page.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a sample paragraph.</p>
<a href="https://example.com">Visit Example</a>
</body>
</html>This shows a title in the tab, a main heading, a paragraph, and a link.
Attributes give extra data to elements. They sit inside the opening tag.
For example <a href="https://site.com">Link</a> has an href attribute.
It tells the browser where the link should go.
For example:
<img src="photo.jpg" alt="Profile Photo">This loads an image and shows text if the image does not load.
You can place elements inside other elements. For example, you can put a <strong> tag inside a <p>. Browsers read elements from top to bottom in the source order. That order affects how users and screen readers view the page.
So, how do browsers read and render HTML?
A browser reads HTML code line by line. It builds a tree of nodes called the DOM. That tree tells the browser what elements exist and how they link. The browser then draws the final page on the screen.
Examples
Blog Post:
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
</head>
<body>
<article>
<h1>My Post</h1>
<p>This is the start of my first blog post.</p>
</article>
</body>
</html>This code shows a blog post with a title and a short text inside an article tag.
Navigation Menu:
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<nav>
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</body>
</html>Navigation Menu:
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<nav>
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</body>
</html>This shows three links inside a nav element. Each link points to a page.
Profile Card:
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
</head>
<body>
<section>
<h2>John Doe</h2>
<img src="john.jpg" alt="John Photo">
<p>Email: john@example.com</p>
</section>
</body>
</html>This example shows a profile with a name, an image, and contact data.
Form with Input:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="username">
<button type="submit">Send</button>
</form>
</body>
</html>This code shows a form with a text field and a button. The form tag sends the user data to the server path defined in the action attribute.
Wrapping Up
You learned what HTML is and how it works. You also learned about elements, tags, attributes, and document flow. Here is a quick recap:
- HTML tells the browser how to show page content.
- A document has a head and body parts.
- Elements and attributes give role and data.
- Nesting and semantic tags add order and meaning.
- Browsers read HTML into a DOM tree and then show the page.
FAQs
What is HTML Introduction for Beginners?
<html>.
Basic format looks like:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first HTML page.</p>
</body>
</html>How do beginners write their first HTML page?
- Open a text editor like Notepad.
- Write code with root
<html>element. - Save file with extension
.html. - Open file in browser to view.
<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>
<p>Welcome to my HTML page.</p>
</body>
</html>What are common HTML tags for beginners?
<h1> to <h6>→ Headings<p>→ Paragraph<a>→ Link<img>→ Image<ul> and <li>→ List<div>→ Section container
<h1>HTML Example</h1>
<p>Learning HTML tags is easy.</p>
<a href="https://example.com">Visit Site</a>Why should beginners learn HTML first?
Similar Reads
The HTML blockquote tag defines a long quote from another source. It sets the quoted text apart from other content.…
The HTML title attribute adds extra info to any element. You can use it to show tooltips on hover. What…
Use the HTML b tag to make text bold without giving it extra meaning. It adds visual weight only. Understand…
In this article, you will learn how HTML legend works in the fieldset tag with examples. HTML fieldset and legend…
The HTML textarea tag gives users space to enter longer messages. This element helps build forms that accept feedback, comments,…
This guide explains how to use the HTML meta http-equiv attribute, why it matters for SEO, and how browsers treat…
The form novalidate attribute in HTML lets you skip browser checks when you submit a form. You can control errors…
The <dialog> tag is used to build modal popups in HTML. It shows alerts and messages without third-party scripts. Understand…
A web page must follow a clear structure so browsers can read and show it correctly. This guide helps you…
The abbr tag refers to an abbreviation in HTML. It helps you save space and improve accessibility. The screen readers…
