HTML Tutorial (Beginner) – Learn HTML fast by example

HTML

0 Comments

HTML (HyperText Markup Language) is the language of the web, and if you want to make websites, you'll need to know how it works.

In this guide, we're going to teach you all the important parts of HTML as fast as possible (through a series of short examples and practice problems at the end). You'll soon see HTML is a very simple and easy to understand language. You don't need hundreds of pages of explanation -- The code usually speaks for itself. And when it doesn't, we'll give a brief explanation to make it clear.

So, what does an HTML file look like?

Example:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">

        <title>This is the page title</title>
    </head>

    <body>
        YOUR HTML CODE GOES HERE
    </body>
</html>

Result:

  • Don't worry about understanding most of this file at this point.
  • The important part for this guide is on lines 9 through 11.
  • The <body> of an HTML document holds all of the HTML code that will be visible on the page.
  • In the examples that follow, the only thing that will change in this file is what's on line 10 (inside the body).

Practice in Editor

The HTML <p> tag – Creating paragraphs

Example:

<p>My first paragraph.</p>

<p>My second paragraph.</p>

Result:

  • In the example code here, we've only shown the code inside the <body> section (since the rest of the HTML file is the same).

Practice in Editor

<em> tag – Emphasizing text

Make something stand out

Example:

<em>This sentence has been emphasized.</em>

Result:

  • Emphasized text is shown in italic by default
  • However, you can style this tag however you want using CSS (the next thing you should learn after HTML)

Practice in Editor

<strong> tag – Strongly emphasized text

Example:

Some of this sentence has been <strong>strongly emphasized</strong> (but not all of it).

Result:

  • Shown in bold by default

Practice in Editor

<h1> to <h6> tags – Headings

Used to organize your page and make it more readable

Example:

<h1>This is an h1 heading</h1>

<h2>This is an h2 heading</h2>

<h3>This is an h3 heading</h3>

<h4>This is an h4 heading</h4>

<h5>This is an h5 heading</h5>

<h6>This is an h6 heading</h6>

Result:

h1 (heading) tag
Usually used to give a brief summary of what the page is about and is placed at the top of the page. There's usually only 1 h1 heading per page.
h2 tag
Usually used to separate the page into different sections (and to let the reader know what the upcoming section is about).
h3 tag
Used to break a section that already has an h2 heading into subsections.
h4, h5, and h6 tags
There are also h4, h5, and h6 tags, which can further organize your page, but they aren't used as often.

Practice in Editor

<ol> tag – Ordered lists

Example:

<ol>
	<li>My first list item</li>
	<li>My second list item</li>
	<li>My third list item</li>
</ol>

Result:

  • li = list item

Practice in Editor

<ul> tag – Unordered lists (bulleted lists)

Example:

<ul>
	<li>My first list item</li>
	<li>My second list item</li>
	<li>My third list item</li>
</ul>

Result:

Practice in Editor

<a> tag – Linking to another page

Example:

<a href="https://www.delidded.com">Click here</a> (opens in same browser window).

<a href="https://www.delidded.com" target="_blank">Click here</a> (opens in a new window).

Result:

  • href and target are attributes of the <a> tag.
  • Attributes let you specify additional information to an HTML tag.

Practice in Editor

<img> tag – Adding images

Example:

<p>Here's the delidded.com logo:</p>

<img src="https://www.delidded.com/logo.png" alt="Delidded logo">

Result:

src (source) attribute
The URL or location of the image.
Since we're loading an image from our own website, we could have left off the: https://www.delidded.com. It would then look like: src="/logo.png". You can also use this trick with the <a> tag (in the href attribute).
alt (alternative) attribute
Short description of the image (used by search engines and screen readers).

Practice in Editor

<br> tag – Adding line breaks

Moving to another line

Example:

This line is
<br>
broken in half.

Result:

  • br = break
  • Needed because HTML ignores line breaks by default
  • Without the br tag, this would have appeared as 1 line

Practice in Editor

<pre> tag – Preformat some content

Don't ignore extra spaces or line breaks

Example:

<pre>
This sentence
    is formatted
        exactly    like I
want.
</pre>

Result:

  • HTML ignores extra spaces and line breaks by default.
  • Without the pre tag, this example would appear as only 1 line (with only 1 space between each word).

Practice in Editor

HTML Tables

Show data as a table of rows and columns (like an Excel spreadsheet)

Example:

<table>
	<tr>
		<th>Heading for column 1</th>
		<th>Heading for column 2</th>
		<th>Heading for column 3</th>
	</tr>

	<tr>
		<td>This is row 1, column 1</td>
		<td>This is row 1, column 2</td>
		<td>This is row 1, column 3</td>
	</tr>

	<tr>
		<td>This is row 2, column 1</td>
		<td>This is row 2, column 2</td>
		<td>This is row 2, column 3</td>
	</tr>
</table>

Result:

  • tr = table row
  • th = table header cell (used to label what that row or column is about)
  • td = table data cell

Practice in Editor

HTML Practice Problems

Available on the following page: HTML Practice Problems

HTML Forms – Accepting user input

To learn about all the HTML form related tags (that allow you to accept user input), check out our HTML Form Tutorial.

CSS & JavaScript Tutorials

CSS Tutorial - Styling your pages

HTML (especially tables) can look pretty basic by default and could really use some styling. However, you'll need to learn a new language to be able to do that: CSS.

Learn CSS

JavaScript Tutorial - Making your pages interactive

Once you've learned CSS, the next thing to learn is JavaScript. JavaScript will help you make your pages more interactive.

Learn JavaScript

Leave a Comment