Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and structure web pages. Think of it as the skeleton of a website—it defines the layout, text, images, links, and other elements you see in your browser.

Key Facts About HTML:

  • Not a programming language: HTML doesn’t handle logic like Python or JavaScript—it’s a markup language that structures content.

  • Works with CSS & JavaScript: While HTML provides the structure, CSS styles it, and JavaScript makes it interactive.

  • Universal & beginner-friendly: All browsers understand HTML, and it’s one of the easiest coding languages to learn.

How Does HTML Work?

When you visit a website, your browser reads the HTML document (usually an .html file) and renders it as a visual page. Here’s a simple breakdown:

  1. You write HTML code in a text editor (like VS Code, Notepad++, or even a basic text editor).

  2. Save the file with .html extension (e.g., index.html).

  3. Open it in a browser, and the browser translates the code into a webpage.

Example of a Basic HTML Page:

				
					<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/codersship.com\/wp-admin\/admin-ajax.php","nonce":"b412b71eec","url":"https:\/\/codersship.com\/html\/introduction-to-html","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg","width_threshold":1600,"height_threshold":700,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://codersship.com/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body>
</html>

  • <!DOCTYPE html> tells the browser this is an HTML5 document.

  • <html> is the root element of the page.

  • <head> contains meta-information (like the title).

  • <body> holds the visible content (headings, paragraphs, images, etc.).

Key HTML Tags Every Beginner Should Know

HTML uses tags (enclosed in angle brackets, like <tag>) to define elements. Here are the most common ones:

TagPurposeExample
<h1> to <h6>Headings (h1 = most important)<h1>Main Title</h1>
<p>Paragraph<p>This is a paragraph.</p>
<a>Hyperlink<a href="https://example.com">Visit Example</a>
<img>Image (self-closing)<img src="photo.jpg" alt="Description">
<ul>, <ol>, <li>Lists (unordered & ordered)<ul><li>Item 1</li></ul>
<div>Container for styling/grouping<div>Content here</div>

Why Learn HTML in 2024?

Even with advanced website builders (like WordPress or Wix), knowing HTML is incredibly valuable because:

✅ Control Over Your Content – Fix formatting issues, tweak layouts, and embed custom elements.
✅ Essential for Web Careers – Front-end development, UX/UI design, and digital marketing all require HTML knowledge.
✅ Better Collaboration with Developers – Understand how websites work, making teamwork smoother.
✅ Foundation for Learning Other Tech – Master HTML first, then move to CSS, JavaScript, and frameworks like React.

How HTML Works with CSS and JavaScript

  • HTML = Structure (The skeleton)

  • CSS = Styling (The design & colors)

  • JavaScript = Functionality (The interactivity)

Example:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Styled Page</title>
    <style>
        body { font-family: Arial; background: #f4f4f4; }
        h1 { color: blue; }
    </style>
</head>
<body>
    <h1>Welcome!</h1>
    <button onclick="alert('Clicked!')">Click Me</button>
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/codersship.com\/wp-admin\/admin-ajax.php","nonce":"b412b71eec","url":"https:\/\/codersship.com\/html\/introduction-to-html","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg","width_threshold":1600,"height_threshold":700,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://codersship.com/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body>
</html>

  • CSS (inside <style>) makes the heading blue.

  • JavaScript (via onclick) triggers an alert when the button is clicked.

Getting Started with HTML

Ready to try it yourself? Here’s how:

  1. Open a text editor (VS Code, Sublime Text, or Notepad).

  2. Write basic HTML (use the example above).

  3. Save as .html (e.g., test.html).

  4. Open in a browser (double-click the file).

Final Thoughts

HTML is the gateway to web development—simple to learn but powerful in its applications. Whether you’re building a personal blog, optimizing a business site, or starting a tech career, mastering HTML gives you the foundation to grow.

Next Steps:

  • Experiment with basic tags.

  • Try adding CSS for styling.

  • Explore JavaScript for interactivity.

Have questions? Drop them in the comments—we’d love to help! 🚀

Scroll to Top