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: [email protected]</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
HTML tags that no longer work stay in the deprecated list. This article explains them and shows the modern replacements.…
The address tag in HTML shows contact details. The <address> tag helps show who owns the page or article. Understand…
The HTML time Tag marks time values in a document. Use it to show dates or times that machines and…
The nav tag defines a navigation block in HTML. It holds main links to other parts of your site. Search…
This guide explains how to use the HTML meta http-equiv attribute, why it matters for SEO, and how browsers treat…
The HTML span tag acts as a simple container for inline text or other inline elements. It groups text and…
The breadcrumb in HTML shows a path through a site and marks the place of a page inside it. It…
The <footer> tag defines a footer section in HTML. It creates a clear endpoint for a page or section. Browsers…
The title tag in HTML shows the page name in the browser tab and helps search engines know the topic.…
You need images to show products or ideas on your site. The HTML img tag places those images on the…
