How to Make Text Bold or Colorful?

Think about the web pages you see every day. They have headings in different sizes, colored text, clickable links, images, buttons, tables, and all kinds of visual structure. How is that possible?

Open Notepad (or any plain text editor) or try typing some text in the textarea below. For example "Hello my webpage.".

You can write whatever you want, but the text is just that - plain text.
You can't make a word bold. You can't change the color of a sentence. You can't turn a line into a large heading, or arrange data into a table. It's all just flat, uniform characters on a screen.

What makes a web page different from a plain text file?

The answer is actually quite simple: you wrap your text in keywords surrounded by angle brackets, like <strong>Hello</strong>. These keywords carry special meaning. Web browsers such as Chrome are built to recognize them - for example, when a browser sees <strong>Hello</strong>, it knows to display "Hello" in bold (emphasized) text. Different keywords produce different results: headings, links, images, tables, and more.

Here's the surprising part: web pages are also just text files. If you right-click on any web page and select "View Page Source," you'll see that it's all text. The trick is that this text follows a special set of rules that browsers know how to read and turn into the rich, visual pages you're used to. That set of rules is called HTML.

This article explains what HTML is, why it exists, and how to write your first web page from scratch. By the end, you'll understand the core structure of every web page on the internet.

What Does HTML Stand For?

HTML stands for HyperText Markup Language. Let's break that down:

HyperText

In the late 1980s, a computer scientist named Tim Berners-Lee was working at CERN, a huge physics research lab in Switzerland. CERN focuses on particle physics research - the kind of work that spans decades and involves thousands of researchers constantly coming and going, producing mountains of documents and data along the way. Tim wanted a way to connect all of that information together - so that you could be reading one document and instantly jump to a related one with a single click.

That idea - text that links to other text - was called hypertext. "Hyper" as in "beyond normal": unlike plain text sitting flat on a page, hypertext could take you somewhere. It was a genuinely revolutionary concept at the time, and it became the foundation of the World Wide Web.

Markup

As we saw earlier, plain text on its own has no structure. Markup is the idea of adding special keywords to plain text to give it meaning and structure. When you write <strong>Hello</strong>, you're "marking up" the word "Hello" as emphasized text. This <strong> keyword is called a tag. By wrapping text in tags, you tell the browser that the text has a special meaning, and it displays it accordingly.

In the early days of HTML, markup was limited to basic elements like headings, paragraphs, images, and links. Over the years, as new versions of HTML were released, the language grew to support tables, forms, and many more structural building blocks. The browser reads these markers and renders the page accordingly.

Language

The "Language" part simply means a set of rules that browsers know how to read. HTML is not a programming language - it doesn't have logic, loops, or variables. It's a markup language: a system for describing the structure of a document.

Tim Berners-Lee published the first version of HTML in 1991, and it has evolved significantly since then. The current version is HTML5, finalized in 2014 and still being updated through the WHATWG Living Standard.

HTML, CSS, and JavaScript - How They Work Together

Most modern websites use three technologies together:

• HTML - The structure of the content. Headings, paragraphs, images, links - HTML defines what's on the page and what each piece means.
• CSS (Cascading Style Sheets) - The appearance. While HTML gives text meaning, CSS gives it style: colors, fonts, spacing, layout, and more.
• JavaScript - A programming language that controls dynamic behavior. For example, showing an alert when a button is clicked, or updating content on the page without reloading it.

Think of it like a house: HTML is the frame and walls, CSS is the paint and furniture, and JavaScript is the wiring and appliances - press a switch and the light turns on. A page with just HTML works fine on its own. CSS and JavaScript make it look better and feel interactive.

In this article, we'll focus on HTML only. We'll cover CSS and JavaScript in separate articles.

Your First HTML Page

Here is the simplest possible HTML page:

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

If you save this as a .html file (for example, index.html) and open it in a browser, you'll see a heading that says "Hello, World!" and a paragraph below it. That's it - you've just created a web page.

Let's go through each part.

The Structure of an HTML Document

Every HTML page follows the same basic structure. Let's look at what each piece does:

<!DOCTYPE html>

You might notice this doesn't look like a regular tag - and you're right, it's not. This is called a DOCTYPE declaration (Document Type Declaration), and it's the only line in HTML that has this special format. Don't worry! Everything else you write will use the tag syntax you've already seen.

When a browser sees <!DOCTYPE html> at the top of a file, it renders the page in HTML5 mode. Older versions of HTML had much longer DOCTYPE declarations that included version strings, but you don't need to worry about those today - <!DOCTYPE html> is all you need.

It should be the very first line of the file. For simple pages, things might appear to work fine without it, but once you start adding CSS for styling, you'll almost certainly run into layout issues and inconsistencies. Because HTML has had several versions over the years (such as HTML 4), without this declaration, some browsers fall back to an old compatibility mode, which can mess up your layout. So as a rule of thumb, always include this line at the top.

By the way, <!DOCTYPE html> is case-insensitive - <!doctype html> works just as well. We use uppercase here for clarity.

<html>

The <html> element declares that this is an HTML document. All of your HTML content goes inside this tag - it's the root element that wraps everything else. An HTML document forms a tree structure with the <html> element at the top (the root), and every other element branching out inside it. Even if you leave it out, the browser will add it internally, but it's good practice to always write it explicitly.

You can also set the language of the page here, like <html lang="en"> for English. This helps search engines and screen readers understand your page.

<head>

The <head> section contains metadata - information about the page that doesn't appear on the screen. This can include the page title, character encoding, links to CSS or JavaScript files, and other settings.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>

The <title> tag sets the title of the page. It doesn't appear on the page itself, but it shows up in the browser tab and is used by search engines. It's also the title that appears when you bookmark the page in your browser.

The charset="UTF-8" line makes sure special characters (like accented letters or emoji) show up correctly. The viewport meta tag makes the page look right on mobile devices. The initial-scale=1.0 part sets the default zoom level to 100%. There are other viewport options like minimum and maximum scale, but we won't go into those here.

The <meta> tag supports many other types of metadata, but these are the essentials. You'll want to include these two lines in pretty much every HTML page you write.

<body>

The <body> section contains everything that is visible on the page: text, images, links, buttons, forms, and so on. When you "view" a web page, you're looking at the contents of the <body>.

Tags and Elements

Now let's look at the basic HTML tags you'll use most often. HTML uses tags to mark up content. A tag is a keyword wrapped in angle brackets, like <p>Some text</p>. Most tags come in pairs: an opening tag and a closing tag.

<p>This is a paragraph.</p>

Here, <p> is the opening tag, </p> is the closing tag (note the forward slash), and the text between them is the content. Together, they form an element.

Some elements don't have any content and don't need a closing tag. These are called void elements (or empty elements). Void elements include: <img> (for images), <hr> (horizontal rule), <br> (line break), and a few others.

You'll also notice <!-- ... --> in the code below. Anything wrapped in these markers is a comment - it won't appear on the page. We'll cover comments in more detail later.

<!-- Image -->
<img src="/img/samples/cat.jpg" alt="A cat">

<!-- Horizontal rule (a divider line) -->
<hr>

<!-- Line break -->
This is the first line.<br>
This is the second line.<br>
This is the third line.

---

This is the first line.
This is the second line.
This is the third line.

Notice that <img> has no closing tag. Instead, it uses attributes to provide the information it needs.

Attributes

Attributes give extra information to an element. They are written inside the opening tag as name="value" pairs.

<a href="https://example.com/">Visit Example</a>

In this example, <a> is the anchor (link) element, and href is an attribute that specifies where the link goes. When a user clicks "Visit Example," the browser navigates to that URL.

Attribute values are wrapped in either double quotes ("...") or single quotes ('...'). If the value doesn't contain spaces, the browser may still recognize it without quotes, but this can lead to unexpected behavior. Always wrap your attribute values in quotes to be safe.

Here are some commonly used attributes:

• href - URL for links (<a>)
• src - Source file for images (<img>), scripts, etc.
• alt - Alternative text for images (displayed when the image can't load, and read by screen readers)
• class - A name used to apply CSS styles to the element
• id - A unique identifier for the element on the page

Common HTML Elements

Here are the elements you'll use most often:

Headings

HTML has six levels of headings, from <h1> (the largest) to <h6> (the smallest). Use them to create a hierarchy in your document, like chapters and sections in a book.

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Usually a page has one <h1> for the main title, then <h2> through <h6> for the sections below it. Search engines also look at headings to figure out what the page is about, so it's worth using them properly.

Paragraphs

The <p> element is a paragraph of text. Browsers automatically add some spacing above and below each one.

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Links

The <a> (anchor) element creates a clickable link. Links are what make the web a "web" - they connect pages together. The href attribute specifies the URL the link points to. You can also use the target attribute to control how the link opens. For example, adding target="_blank" makes the link open in a new tab.

<a href="https://example.com/" target="_blank">Example Link</a>

Images

The <img> element embeds an image into the page.

<img src="/img/samples/cat.jpg" alt="A cat on the sofa">

The alt attribute is used to describe an image. You can display an image without the alt attribute, but it's considered best practice to always include one. If the image fails to load (for example, due to a broken link or slow connection), the browser shows this text instead. It's also read aloud by screen readers for visually impaired users, and helps search engines like Google understand what the image is about.

If an image is purely decorative and doesn't add meaning to the content, you can use an empty alt like this: alt="". This tells the browser and search engines to simply skip over it.

Lists

HTML supports two types of lists: unordered lists (<ul>) with bullet points, and ordered lists (<ol>) with numbers.

<!-- Unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Nesting: Elements Inside Elements

HTML elements can be placed inside other elements. This is called nesting. For example, you can put a link inside a paragraph, or list items inside a list:

<p>This is a paragraph with an <a href="https://example.com/">example link</a>.</p>

When nesting elements, make sure to close them in the correct order. The last element opened should be the first one closed:

<!-- Correct -->
<p><strong>Bold text</strong></p>

<!-- Incorrect - tags overlap -->
<p><strong>Bold text</p></strong>

Browsers try to "fix" incorrect nesting automatically, but the result might not be what you expected. Keeping your tags properly nested makes your code easier to read and avoids weird bugs when you add CSS later.

Comments

You can add comments to your HTML that are invisible to the user but visible in the source code. Text enclosed between <!-- and --> will be hidden as a comment. Comments are useful for leaving notes or temporarily hiding parts of your page.

<!-- This is a comment. It won't appear on the page. -->

<!--
  You can also write
  multi-line comments like this.
-->

<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden.</p> -->

Comments are hidden from the page, but not from the source code. If you right-click any web page and choose "View Page Source", you'll see all the HTML - comments included. It's a good way to learn how other sites are built.

HTML entities (Character References)

You might be wondering: "If angle brackets are used for tags, how do I display a literal < or > on the page?"

If you type <p> directly, the browser will interpret it as a tag, not as visible text. To display these special characters as-is, HTML provides HTML entities (also known as Character References). You write a special code starting with & and ending with ;, and the browser renders the corresponding character.

Here are some of the most common ones:

• < → < (less-than sign)
• > → > (greater-than sign)
• & → & (ampersand)
• " → " (double quote)
• ' → ' (single quote / apostrophe)

For example, this code:

<p>This is a & symbol.</p>

will be displayed as:

<p>This is a & symbol.</p>

Putting It All Together

Here's a complete HTML page that uses almost everything we've covered:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Web Page</title>
  </head>
  <body>
    <h1>HTML Web Page</h1>
    <p>
      This page is built with <strong>HTML</strong> (HyperText Markup Language).<br>
      HTML defines the structure and content of every web page on the internet.
    </p>
    <hr>

    <h2>Essential Elements</h2>
    <p>
      In HTML, we use tags to mark up different types of content.<br>
      For example, you can use &lt;strong&gt; to <strong>emphasize</strong> text.
    </p>

    <h3>Web Technologies</h3>
    <ul>
      <li><strong>HTML</strong> - The skeleton: structure and content.</li>
      <li><strong>CSS</strong> - The skin: style and appearance.</li>
      <li><strong>JavaScript</strong> - The brain: logic and interactivity.</li>
    </ul>
    <hr>

    <h2>Special Characters</h2>
    <p>
      Use "HTML Entities" to display reserved characters:
    </p>
    <ul>
      <li>Angle Brackets: &lt; and &gt;</li>
      <li>Ampersand: &amp;</li>
    </ul>

    <h2>Try it yourself</h2>
    <p>
      Ready to start coding?
      Try writing your own HTML in the
      <a href="https://syncfiddle.net/fiddle/editor" target="_blank">SyncFiddle editor</a>.
    </p>
  </body>
</html>

That's a complete HTML5 page. You can copy this, save it as index.html, and open it in your browser to see the result.

What Happens When a Browser Loads HTML?

Now that you know how to write HTML, let's take a quick look at what happens behind the scenes. When you open a web page, the browser does roughly this:

When you open a web page, the browser does roughly this:

1. Fetch - Downloads the HTML file from the server (or reads it from your local disk).
2. Parse - Reads the HTML and builds a tree structure called the DOM (Document Object Model). Each element becomes a node in this tree.
3. Render - Uses the DOM (plus CSS, if any) to figure out the layout and draw everything on screen.

This happens in a fraction of a second. The DOM is also how JavaScript changes the page on the fly - but we'll get into that in a later article.

Summary

• HTML stands for HyperText Markup Language. It defines the structure and content of web pages.
• HTML uses tags (like <p>, <h1>, <a>) to mark up content.
• Every HTML page has a <head> (metadata) and a <body> (visible content).
• Attributes provide extra information to elements (like href for links and src for images).
• Elements can be nested inside each other - just make sure to close them in the correct order.
• Use character references like < to display special characters that would otherwise be interpreted as HTML.
• HTML works alongside CSS (appearance) and JavaScript (behavior) to create complete web pages.

Try It Yourself

The best way to get the hang of HTML is to just write it yourself. Open the SyncFiddle Editor, throw in some headings, paragraphs, lists, and links, and you'll see the result by clicking the "Run" button.

» Open the SyncFiddle Editor and start writing HTML