HTML Basics | CX Tutorials

1

What is HTML?

HTML stands for HyperText Markup Language. It is the language that every webpage in the world is written in. When you visit a website, your browser reads HTML and turns it into the page you see.

Think of HTML as the skeleton of a webpage. It tells the browser: "here is a heading", "here is a paragraph", "here is an image". HTML does not make things look good. That is CSS's job. HTML just defines what things are.

Analogy: If a webpage were a house, HTML would be the bricks and walls. CSS would be the paint and decoration. JavaScript would be the electricity that makes things work.

HTML files are just plain text files saved with a .html extension. You can open them in any browser just by double-clicking the file.

2

Tags & Elements

HTML is built from tags. A tag looks like this: <p>. Most tags come in pairs: an opening tag and a closing tag (with a slash):

HTML

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

<h1>This is a big heading</h1>

<strong>This text is bold</strong>

The content goes between the opening and closing tags. Everything between the tags is the element's content.

Some tags don't need a closing tag because they don't contain content; these are called self-closing tags:

Self-closing tags

<br>         <!-- line break -->
<hr>         <!-- horizontal line -->
<img src="photo.jpg">  <!-- image -->

Tags are case-insensitive, but always write them in lowercase. <p> and <P> both work, but lowercase is the standard.

3

Structure of a Page

Every HTML page follows the same basic structure. Here is the minimum required code for a valid HTML page:

index.html

<!DOCTYPE html>            <!-- tells browser this is HTML5 -->
<html lang="en">             <!-- root element, language = English -->
<head>
  <meta charset="UTF-8">     <!-- character encoding -->
  <title>My First Page</title> <!-- tab title in browser -->
</head>
<body>
  <!-- Everything visible goes here -->
  <h1>Hello, world!</h1>
</body>
</html>

<head>: Contains information about the page (title, metadata). Not visible to visitors.
<body>: Contains everything the visitor actually sees.

4

Text & Headings

HTML has 6 levels of headings. <h1> is the biggest (main title) and <h6> is the smallest.

Headings & Text

<h1>Page Title (biggest)</h1>
<h2>Section Heading</h2>
<h3>Sub-section</h3>

<p>A regular paragraph. Great for body text.</p>

<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>

<ul>                     <!-- unordered (bullet) list -->
  <li>Item one</li>
  <li>Item two</li>
</ul>

Try it: edit the HTML and click Run

5

Links & Images

Links and images are the building blocks of the web. Both use attributes, which are extra information you add inside the opening tag.

Links & Images

<!-- A link -->
<a href="https://google.com">Click here to visit Google</a>

<!-- Open in a new tab -->
<a href="https://google.com" target="_blank">Opens in new tab</a>

<!-- An image -->
<img src="photo.jpg" alt="A photo of my cat">

href: the URL the link goes to
src: the image file path or URL
alt: a text description of the image (important for accessibility)

Always add alt text to images. Screen readers use it for visually impaired users, and Google uses it for search ranking.

6

Your First Webpage

Now put it all together! Here is a complete, real webpage. Copy this into a new file called index.html, save it, and open it in your browser.

index.html: complete page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Website</title>
</head>
<body>

  <h1>Welcome to My Website</h1>

  <p>Hi! My name is <strong>Alex</strong> and I am learning HTML.</p>

  <h2>My Favourite Things</h2>
  <ul>
    <li>Pizza</li>
    <li>Football</li>
    <li>Coding (obviously)</li>
  </ul>

  <p>
    Visit my 
    <a href="https://github.com" target="_blank">GitHub</a>.
  </p>

</body>
</html>

Try it: customise the page below

You did it! You now know the fundamentals of HTML. In the next tutorial, you'll learn CSS to make your page look incredible.