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?
- The HTML <p> tag – Creating paragraphs
- <em> tag – Emphasizing text
- <strong> tag – Strongly emphasized text
- <h1> to <h6> tags – Headings
- <ol> tag – Ordered lists
- <ul> tag – Unordered lists (bulleted lists)
- <a> tag – Linking to another page
- <img> tag – Adding images
- <br> tag – Adding line breaks
- <pre> tag – Preformat some content
- HTML Tables
- HTML Practice Problems
- HTML Forms – Accepting user input
So, what does an HTML file look like?
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>This is the page title</title> </head> <body> YOUR HTML CODE GOES HERE </body> </html>
- 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).
The HTML <p> tag – Creating paragraphs
<p>My first paragraph.</p> <p>My second paragraph.</p>
- 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).
<em> tag – Emphasizing text
Make something stand out
<em>This sentence has been emphasized.</em>
- 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)
<strong> tag – Strongly emphasized text
Some of this sentence has been <strong>strongly emphasized</strong> (but not all of it).
- Shown in bold by default
<h1> to <h6> tags – Headings
Used to organize your page and make it more readable
<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>
- 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.
<ol> tag – Ordered lists
<ol> <li>My first list item</li> <li>My second list item</li> <li>My third list item</li> </ol>
- li = list item
<ul> tag – Unordered lists (bulleted lists)
<ul> <li>My first list item</li> <li>My second list item</li> <li>My third list item</li> </ul>
<a> tag – Linking to another page
<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).
- href and target are attributes of the <a> tag.
- Attributes let you specify additional information to an HTML tag.
<img> tag – Adding images
<p>Here's the delidded.com logo:</p> <img src="https://www.delidded.com/logo.png" alt="Delidded logo">
- 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).
<br> tag – Adding line breaks
Moving to another line
This line is <br> broken in half.
- br = break
- Needed because HTML ignores line breaks by default
- Without the br tag, this would have appeared as 1 line
<pre> tag – Preformat some content
Don't ignore extra spaces or line breaks
<pre> This sentence is formatted exactly like I want. </pre>
- 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).
Show data as a table of rows and columns (like an Excel spreadsheet)
<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>
- tr = table row
- th = table header cell (used to label what that row or column is about)
- td = table data cell
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 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.