Tutorials > Basic HTML Tutorial
Basic HTML Tutorial
I explain some of the very basic HTML knowledge: how to start, tags, document structure, some useful tags, language and character encoding, escape characters.
Contents:
- What do you need to start editing
- About tags
- Basic document structure
- Some of the most useful tags
- Language and character encoding
- HTML Escape characters
What do you need to start editing
There aren't many things you need to start. Most likely you already have software that you need.
Software
There are many specialized HTML editors but all you need to start editing is:
- Plain text editor (not a word processor like from an office suite). I recommend to use one with syntax highlighting.
- Web browser.
What to do next
It's really simple:
- Use your text editor to save a file with an ".html" extension.
(Main page on a website usually should be called "index.html". Other pages can be given any other name like "example.html". Names can also contain numbers, "-" and "_" characters.) - Open the file in a web browser.
- After making changes and saving the file again you can refresh the page in a browser to see the results.
(Later in this tutorial you will know what text to put in a file.)
About tags
(If you already know what tags and their attributes are and how to use them you can skip to basic document structure part.)
Before I'm going to write about HTML document structure I'll explain few things about tags.
Tags are the most important parts of an HTML code. They have multiple purposes. Tags can represent elements that get displayed on a page and communicate other things to browsers, search engines etc.
Opening and closing tags
Most of the HTML code is composed of opening and closing tags.
For example this is an opening tag:
<html>
This is a matching closing tag:
</html>
Text and/or other tags are put between them. Closing tags always have a forward slash "/" added at the beginning.
It is the best practice to use opening and closing tags in such an order so that everything is nested one in another (closing tags in a reversed order), like that:
<p><strong>some text</strong></p>
Not like that:
<p><strong>some text</p></strong>
Browsers are made to manage many situations, but if you end up with HTML code that is not valid some browsers can act in unpredictable way (and additionally if you publish your site on the Internet, search engines also don't like invalid HTML).
Empty tags
Generally when you use a tag you need to close it somewhere but some tags in HTML are not meant to be closed, like the line break tag:
<br>
(If you see somewhere <br /> or similar, it's only necessary in XHTML to use "/" at the end of empty tags to close them properly, not in HTML. When you write HTML code use <br> etc.)
Attributes
Tags can have attributes and some are even required to have them. Below is an example of <img> tag with two attributes that inserts an image:
<img src="image.png" alt="Sample image">
Block and inline elements
Most elements on a page have block or inline display value by default.
Block means that an element starts on a new line and takes all available width when displayed on a page (like a paragraph).
Inline elements don't start on a new line and take so much width as necessary (like words in a paragraph).
Basic document structure
Example of a simple HTML file content:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Put your page content between body tags. -->
<h1>Main Header</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
You can save the text in an ".html" file that was mentioned earlier and open it in a browser. You'll need the file later in this tutorial.
Explanation
<!DOCTYPE html> is a declaration for the browser that says about document type. It must be the first thing in a document, placed before <html> tag. (There are longer and more complicated document type declarations. They are used for pages written in older HTML versions.)
<html> tag is the root of an HTML document. It contains all other elements.
<head> section is a place for some special purpose tags. It should contain at least the <title> tag which is required in every HTML document for it to be valid.
<title> tag provides title text for browser toolbars, bookmarks and also for search engine results.
<body> section is the document's body. It contains things like text, links, images etc. (in the example above there is a comment, header and paragraph inside).
Blank characters
Most of the time multiple spaces, tab characters and new lines in the source file are taken into consideration in a limited way or not at all. In some places like inside paragraphs and other text they get displayed as a single space.
For formatting purposes tags and other markings are used. To get more control on how content of your page is displayed you can learn how to use CSS.
If there is a specific purpose for that, blank characters can also be taken literally by a browser. It can be achieved by putting the text between <pre></pre> (preformatted text) tags. To display more spaces one after another or to 'stick' words together, you can use so called non-breaking spaces. I explain that kind of spaces later in this tutorial.
Some of the most useful tags
You can try all the tags below in ".html" file containing example text that you saved before. Place everything between <body> and </body> tags.
Headers
Header tags are numbered from <h1> to <h6>.
Headers are by default displayed as big and bold text. Higher the number, header is less important (displayed with smaller font).
Example header:
<h1>Header Text</h1>
I recommend to use only one <h1> header in a document. The remaining header tags can be used multiple times, in hierarchical order. There shouldn't be any gap in header importance when going from more important to less important. It all makes document structure logical for the reader. For example they can be ordered like that:
<h1>Main Header Text</h1>
<h2>Header Text</h2>
<h3>Header Text</h3>
<h3>Header Text</h3>
<h2>Header Text</h2>
<h2>Header Text</h2>
<h3>Header Text</h3>
<h4>Header Text</h4>
<h4>Header Text</h4>
<h2>Header Text</h2>(Normally you don't use indentation for headers like that. It's here only for demonstration. I used <pre> tag mentioned earlier to create this effect.)
Paragraphs
They are block elements so they take all available width on a page.
By default, all blank characters in the text between paragraph tags get collapsed to single space by a browser, unless they are at the very beginning or end of a paragraph text (in which case they are not displayed at all).
Some example paragraphs:
<p>This is how you put text in a paragraph.</p>
<p>Next paragraph.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</p>
Line breaks
The <br> tag mentioned before inserts a line break. It is an empty tag (has no closing tag).
<p>Example paragraph.<br>This sentence starts on a new line.</p>
<br>
<p>This paragraph has a new line inserted before it.</p>
<br><br>
<p>This paragraph is separated from the one above with two additional new lines.</p>
Links
The <a> tag creates a hyperlink to another page.
Destination URL is specified in the href attribute. Text that appears on the site is put between opening and closing tags:
<a href="http://example.com/">Go to example page</a>
If you want the destination to be opened in a new window or tab, use the target attribute with "_blank" value:
<a href="http://example.com/" target="_blank">Open in new window or tab</a>
Links are inline elements by default so sometimes you need to use other tags to place them on the site the way you want.
Absolute and relative URLs
I used so called absolute URL in the example above.
To link to a different page on your website you can use relative URL:
<a href="example.html">Go to another page on my website</a>
(In this tutorial I assume that you put every file in the same directory. If you need more control on that you can learn more about absolute and relative URLs.)
Images
The <img> tag inserts an image.
It should have at least two required attributes:
| src | specifies image URL (it can be relative or absolute, it's like with the href attribute in <a> tag) |
|---|---|
| alt | provides alternate text when for some reason image cannot be displayed (you can write something descriptive about image or leave it empty like that alt="" if image is only for decoration and does not have any other purpose) |
You don't close <img> tags in HTML.
Image tag in it's simplest form:
<img src="image.png" alt="Alternate text">
To scale image into specific size, you can use width and height attributes:
<img src="image.png" alt="Scaled image" width="128" height="128">
Although images are not threated by most browsers as purely inline elements (they are displayed as inline-block), they stack one after another when there is enough space and if there are no other tags that would make them act differently, like for example <br> tag.
Images as links
You can create image links by using <a> and <img> tags together:
<a href="http://example.com/"><img src="image.png" alt="Image link"></a>
Text in the alt attribute is especially important in here. Without it if image for any reason can't be displayed, browser has nothing available to show. That's why always remember to add text in alt attribute for images that serve as links.
Lists
To create a list you need to use more than one tag name.
I describe how to make lists below.
Unordered lists
Unordered (bulleted) list looks like that:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Whole list is enclosed between <ul></ul> tags.
Every list item is between <li></li> tags.
Ordered lists
To create ordered list (numerical or alphabetical) you need to use <ol> tag instead:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>Ordered lists are numerical by default. To use different kind of markers you can use type attribute with one of five possible values: 1, A, a, I, i. For example:
<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
Nested lists
You can nest ordered or unordered lists one in another if you want to get more complicated lists.
Thats how you nest lists:
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>List item 3</li>
</ul>(Of course you can mix types of lists while nesting. Remember to close everything properly.)
Tables
To make a table you need to use at least three tag names:
<table> |
the table itself |
<tr> |
table row (cells are specified in rows not in columns) |
<td> |
table cell |
This is how you make a simple table:
(read below about the border attribute)
<table border="1">
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
</table>Important: The border attribute is deprecated. I use it here for demonstration, because it still works and can easily make table borders visible for somebody not familiar with CSS. Possible values are: 0, 1. If you don't need visible table borders (or you're also learning CSS and you know what to do), using <table> tag without border attribute makes the code more valid.
Table headers
To get table headers you can use <th> tag instead of <td>. Table headers are cells displayed with bold and centered text by default.
Table cells that span horizontally or vertically
You can make certain cells span horizontally or vertically across other cells. To do that you can use colspan and/or rowspan attributes in <td> (or <th>) tags, with number of cells as an argument. The number of cells actually put in each row should be appropriate for arguments used (to not create holes or other problems with table).
The colspan attribute example:
<table border="1">
<tr>
<td colspan="2">colspan</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
</table>The rowspan attribute example:
<table border="1">
<tr>
<td rowspan="2">rowspan</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 2</td>
</tr>
</table>Bold and italic text
To make some text bold or italic you can use one of the tags below:
| tag | meaning | displayed as |
|---|---|---|
<b> |
bold text | bold |
<i> |
italic text | italic |
<strong> |
important text | bold |
<em> |
emphasized text | italic |
Example:
<p><b>bold text</b>,
<i>italic text</i>,
<strong>important text</strong>
and <em>emphasized text</em></p>
You can make text bold and italic at the same time for example like that:
<b><i>bold italic text</i></b>
Horizontal rule
The <hr> tag defines a thematic change. It separates content.
It is an empty element so it doesn't have an end tag.
Making comments
Everything put inside <!-- --> tag is ignored by a browser. It can be used for notes or to disable parts of page for testing or other purposes.
<!-- Text that gets ignored by a browser -->
<!--
<p>Paragraph to be ignored.</p>
<p><a href="http://example.com/">Link that won't be displayed</a></p>
-->
Language and character encoding
Those things are essential if you plan to use languages with character sets other than English, or to get outside of the basic (ASCII) character set in your documents.
Language
Specifying languages is a very simple thing to do. I explain how to do it below.
Primary language of the document
You just need to add the lang attribute with a language code as its value to the <html> tag:
<html lang="en">
(You can easily find lists of HTML language codes on the Internet.)
Different languages for parts of a single page
It is also possible to use the lang attribute on any HTML element, e.g., a paragraph.
Character encoding
Character encoding of the file is best to be specified at the beginning of the <head> section, using the <meta> tag like that:
<meta charset="utf-8">
UTF-8 is the default, most frequently used character encoding on the Web. I recommend to always use UTF-8 for HTML documents, whenever it's possible.
Important: You should always save the file using an encoding specified in its <meta charset> tag. If you don't - it is likely that browsers won't interpret some characters properly.
Language and encoding example
Simple HTML document with language and character encoding specified:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<h1>Sample Header</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
HTML Escape characters
To display characters that have special meaning in HTML (and more) on your website you can use so called escape characters. You simply put one of those special character strings where you want specific character to appear on the site.
As you can see below they start with "&" character, next there is a name or a number (numbers have "#" character at the beginning) and they end with ";" character.
Not all escape characters have names (which I think are more convenient) so in those cases you have no choice and use numeric references.
Example escape characters
Few of the many HTML escape characters:
| named | numeric | symbol |
|---|---|---|
< |
< |
< |
> |
> |
> |
& |
& |
& |
" |
" |
" |
Escape characters can be very helpful, for example when you want to display samples of HTML or other code on your page:
<p>This is a paragraph tag: <p></p>
Non-breaking space
The (or  ) escape character represents a non-breaking space. It looks like a usual space character but when put for example between some words in a paragraph it prevents automatic line break (words separated by it are displayed in the same line whenever possible). When non-breaking spaces are placed one after another they don't get collapsed into single space.
Non-breaking space example:
<p>Browsers should try to display those two words in the same line.</p>
<p>Browsers display two spaces between those two words.</p>
<p> This paragraph starts with two spaces.</p>
Using non-breaking spaces you can also c r e a t e t h i s e f f e c t .
You can do it by copying and pasting into the right places between letters and usual spaces:
<p>o n e t w o t h r e e</p>
(If you need more text like that it's more convenient to use CSS property called letter-spacing, but that's a different story.)
This is the first tutorial I published on this site. I hope you find it helpful.
Tutorials > Basic HTML Tutorial