HTML Tutorial: the Basics
This page is a basic, practical, 5 minutes tutorial of HTML.
HTML is a very simple markup language. Here's a example. Save the following text in a file, name it
sample.html, then open the file in a browser.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Sample HTML</title> </head> <body> <h1>Sample HTML</h1> <p>Earth is round!</p> </body> </html>
Basically, text are enclosed by tags. For example, in the above,
<html>…</html> wraps around the whole file indicating that the whole file is a HTML file.
<head>…</head> contains some meta info about the file. The
<title>…</title> gives the title of the file.
</body> are the content of the file.
<h1>…</h1> is the header of the content. The
<p> is a paragraph.
Each of the
<…> is called a tag.
The opening and closing tag together is called a element. For example,
<p>…</p> is called the “p element”.
Most Important Elements
Here's some of the most commonly used elements.
<h1>First lever header</h1> <h2>Second lever header</h2> <h3>Third lever header</h3> <p>“p” is for paragraph.<br /> The “br” is for line break inside paragraph. Text can be marked bold by “b” tag, like this: <b>to boldly go …</b>. There's also “i” for <i>making text slanted/italicized</i>. </p> <pre> “pre” is for text formatted with linebreaks usually for computer code or poetry </pre> <div> inline image is done like this: <img src="my_cat.jpg" alt="my cat" /> </div> <div>“div” is a general markup for a block of text. It is similar to “p”. “div” is usually used to group other elements inside.</div> <p>“span” is a general markup for inline text. Similar to the bold tag “b”</p> <ul> <li>list item 1</li> <li>list item 2</li> </ul> <ol> <li>ordered list item 1</li> <li>ordered list item 2</li> </ol>
Some element do not have a closing tag. For example,
<img src="cat.jpg" alt="my cat" width="320" height="240" />
These are called self-closing tags.
[see List of HTML Self-Closing Tags]
Each element may have “attributes”.
Attributes are name/value pairs.
The syntax for attributes is like this:
The one without the equal sign is called boolean attributes. They are rare.
What attributed are allowed for each elements depends on the element.
Most Important Attributes: class, id
Two most frequently used attributes, can be used on any element, are
A element can have many attributes. For example, here's a inline image:
<p id="x34" class="xyz">I traveled around the world.</p>
Versions of HTML
There are many versions of HTML and XHTML, and it is really a mess. If you are creating new pages, not maintaining old websites, i recommend HTML5. Put the following line at the beginning of your file.
- HTML Basics
- HTML5 Tags
- Case Sensitivity
- Allowed Characters
- Charset and Encoding
- Self-Closing Tags
- Multiple Class Value
- HTML Entity List
- HTML Table Examples
- HTML Table, thead, tbody, tfoot
- HTML Table, colgroup, col
- Styling HTML Table with CSS
- CSS: 3 Columns Page Layout
- Pure CSS Table
- Viewport Meta
- the Root Element
- dl, dt, dd
- s strike del
- HTML5 Custom Data Attribute
- Big Tag
- Image Maps
- Marquee, Scrolling Text
- How to Markup Subtitle
- Meta Language Tag Obsolete
- Browser Auto Refresh
If you have a question, put $5 at patreon and message me.