Free collection of beautiful vector icons for your web pages.

Lesson 1.2 Introduction to HTML

HTML files

HTML source code is stored in a text file (with the extension .html or .htm) which can be opened with any text editor, even when the HTML code is dynamically generated (ie by a computer program). You can read and edit these files with any text editor (NotePap, Notepad, gedit ...).

Markup structure

HTML is a markup language. It means that markup are added in the page content. Markup are also called tags or HTML tags.

The tags start with the symbol << and end with >>, they serve to inform the browser how to interpret the content. The general structure of a tag is described by the following diagram:

In this example, the text contained in the tag is wrapped between an opening and closing tag. Note that in sometime there is no closing tag. For example: <br> (line break) has only one opening tag.

Optional attributes can be added to define properties applied to the tag and its descendants (other tags encapsulated in it).

Example

Here is an example of HTML source code and how it is rendered in the browser:

<h1>Bicycles are great</h1>
Three reasons to ride a bicyle

<ol> 
    <li>It does not pollute</li>
    <li>It keeps you in shape</li>
    <li>It's cheaper than a car</li>
</ol>

When the previous code is interpreted by the browser, it displays the following page:

Try it online

The previous example illustrates some common tags:

<h1> title of size 1 1 (Heading 1)
<ol> Ordered List
<li> List Item

Exercice

Create a HTML file titled "I like, I hate". Add two subtitles (heading 2) named "I like" and "I hate". Under the first one, add and unordered list with thinks you like. Under the second title, add an ordered list with stuff you don't like.

Try online

Solution

Lesson 1.1 Summary Lesson 1.3

Lesson 1.2 Introduction to HTML

HTML files

Markup structure

Example

Exercice

See also