Written by: rJTutorial Team | Last Updated:

HTML Introduction

HTML was introduced by Tim Berners-Lee, a British computer scientist, in 1991. While working at CERN, Berners-Lee envisioned a system where researchers could easily share and link documents across different computers. This vision became the World Wide Web, and HTML (Hypertext Markup Language) served as the foundational language used to describe the structure of those documents.

Think of HTML as the architectural blueprint of a website. Just as a blueprint defines where the walls, doors, and windows of a house go, HTML defines where the headings, paragraphs, images, and links appear on a web page. It isn't a programming language that handles logic (like math or data processing); instead, it is a markup language that tells the browser how to organize and label content so it makes sense to the user.

Developer Tip: Even though modern web development involves complex frameworks like React, Angular, or Vue, they all eventually compile down to standard HTML. Mastering the basics of HTML is the single most important step in your journey because it is the one thing every browser understands.

To get started, here are the core concepts that form the backbone of HTML:

  • Structure: HTML documents are organized using a hierarchical tree of "elements." These elements are defined by tags enclosed in angle brackets < >. A standard document follows a specific skeleton: the <html> tag wraps the entire page, the <head> contains metadata (like the page title and character encoding), and the <body> contains the visible content that users actually see.
Best Practice: Always indent your nested code. While the browser doesn't care about extra spaces, proper indentation makes your structure easy for you and your teammates to read. A standard is usually 2 or 4 spaces for each level of nesting.
  • Tags: Tags act as labels for your content. Most tags come in pairs: an opening tag <p> and a closing tag </p>. The closing tag is identical to the opening tag but includes a forward slash. Common examples include:
    • <h1> to <h6>: For headings (H1 being the main title of the page).
    • <p>: For standard blocks of text or paragraphs.
    • <div>: A generic container used to group elements together, often used for styling with CSS or layout positioning.
Common Mistake: Forgetting to close a tag. If you open a <div> but forget the </div>, it can "break" the layout of the rest of your page, causing elements to nest inside each other in ways you didn't intend.
  • Attributes: Attributes provide additional instructions or information about an element. They are always placed inside the opening tag and usually come in name/value pairs like name="value". For example, the <a> (anchor) tag uses the href attribute to tell the browser where a link should go, and the target="_blank" attribute to open that link in a new tab.
Developer Tip: Think of attributes as "settings" for your HTML tags. Just like a car has a color or a model, an HTML tag has attributes that define its behavior, identity (using id), or classification (using class).
  • Text Content: HTML allows you to wrap text in various tags to give it meaning (semantics). Beyond paragraphs and headings, you can use <ul> (unordered lists) for bullet points or <ol> (ordered lists) for numbered steps. Using the right tag for the right job is called "Semantic HTML," and it helps search engines understand your content better.
Best Practice: Use headings in a logical, descending order (H1 followed by H2, then H3). Never skip levels (like going from H1 to H4) just because you like the default font size. Use CSS for styling and HTML purely for the logical structure of the document.
  • Links and Images: The web is built on connections. The <a> tag creates hyperlinks that connect pages. To display visual content, we use the <img> tag. Interestingly, the image tag is "self-closing" or "void," meaning it doesn't wrap around text and therefore doesn't need a separate </img> tag.
Watch Out: Always include an alt (alternative text) attribute in your <img> tags. This provides a text description for screen readers used by visually impaired users and helps your images show up in Google search results.
  • Comments: Sometimes you need to leave notes for yourself or other developers to explain why a certain section was built a specific way. HTML comments look like this: <!-- This is a comment -->. The browser completely ignores these, so they won't appear on the live website, but they are visible to anyone who "Views Source" on your page.
  • Doctype Declaration: Modern web pages should always start with <!DOCTYPE html>. This isn't actually an HTML tag; it’s a "preamble" that tells the browser to use the HTML5 standard.
Watch Out: If you omit the Doctype, browsers may enter "Quirks Mode." This is a legacy rendering mode that tries to emulate old bugs from the 90s, which will likely make your modern CSS look broken or inconsistent.

By mastering these fundamental building blocks, you gain the ability to create structured, accessible, and professional web content. Every site you visit—from high-end SaaS platforms to simple personal blogs—relies on these exact principles to deliver information to the world.