{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

Introduction to HTML

This tutorial is an introduction to HTML will cover what HTML is and the basic syntax of HTML.

What is HTML?
HTML Tags
HTML Elements
HTML Document Example
Basic HTML Tags

HTML Headings
HTML Paragraphs
Image Tags
HTML Comment Tags
HTML Line Breaks
Viewing Your Web Pages

What is HTML?

HTML (Hyper Text Markup Language) is the predominantly markup language used to create web pages. Markup languages define the elements of a web page. HTML is not a programming language.

HTML and CSS (Cascading Style Sheets) are two of the main technologies used to create web pages. HTML provides the structure of a web page and also defines the elements of a web page and CSS is used to control the layout of the elements within the web page and to apply styles (the visual presentation) to the elements within a web page.

The HTML specification is maintained by the World Wide Web Consortium (W3C).

A web page is a document that can be created and edited with a text editor and that can be accessed through a web browser and displayed on a monitor or mobile device.

There are plenty of free (and paid) text editors that can be used to create web pages and all web browsers are made available for free.

Below is the barebones HTML markup code for a web page.

HTML Tags

HTML is made up of markup tags and are usually called HTML tags.

HTML tags are keywords (in HTML) that are surrounded by less than (<) and greater than (>) angle brackets, for example <html>
HTML tags normally come in pairs, for example <body> and </body>. The first tag is the starting tag and the second tag is the ending tag
Some HTML tags do not have an ending tag, for example <img>

HTML Elements

HTML elements define the structure and content of a web page. HTML elements include headings, text, tables, lists, images, forms, hypertext links and more. HTML elements are generally made up:

Most HTML elements have starting tag and an ending tag, for example: <p> and </p>
The element content is everything between the starting tag and the ending tag (<p>This is the element content</p>)
Some elements do not have an ending tag, for example, the <img> tag. These elements have what is called empty content
Most HTML elements can have attributes and attribute values that are located within the starting tag.
Most HTML elements can be nested within other elements (most elements can contain other HTML elements)
HTML documents are made up of nested HTML elements

HTML Document Example

The HTML code below is an example of an HTML document.

<html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <p>This is my first web page</p> </body> </html>

HTML Tags (<html></html>)

The starting <html> tag and the ending </html> define the HTML document. Any other HTML tags must be placed within the starting and ending <html> tags.

HTML Head Element (<head></head>)

The starting head element tag (<head>) and ending head element tag (</head>) contains content that is not displayed on the web page. The <head> tag commonly contains:

The title of the page (<title> and </title>) which is shown at the very top left every web browser
Meta tags, which contain descriptive information about the web page (<meta>)
Style blocks, which contain Cascading Style Sheet rules (<style>) to add styles to your web page(s)
References (links) to external style sheets or javascript
Script blocks, which contain scripting languages such as javascript to add functionality and interactivity to your web page(s)

<html> <head> <title>Hello World!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Introduction to HTML"> <meta name="keywords" content="Introduction to HTML"> <link rel="stylesheet" type="text/css" href="your_stylesheet.css" media="screen,projection"> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> </html>

Body Tags (<body></body>)

The starting <body> tag and ending </body> tag defines the content of the document which is the part of the document that you see on the web page. All of the content goes within the the <body> tags.

The starting <h1> tag and the ending </h1> tag define the level 1 heading in the document and the starting <p> tag and the ending </p> tag define the paragraph in the document. Both the <h1> and the <p> tags are examples of content that can be placed within a web page.

HTML Heading Tags (<h1></h1>)

HTML headings are defined with the <h1> through <h6> tags and have a starting and ending tag.

<html> <head> </head> <body> <h1>level 1 heading</h1> <h2>level 2 heading</h2> <h3>level 3 heading</h3> <h4>level 4 heading</h4> <h5>level 5 heading</h5> <h6>level 6 heading</h6> </body> </html>

Paragraph Tags (<p></p>)

Paragraphs are defined with the <p> tag and have a starting and ending tag.

<html> <head> </head> <body> <p> This is a paragraph. </p> </body> </html>

Image Tags (<img>)

Images in HTML are defined with the <img> tag. To display an image on a web page, the src (stands for source) attribute is needed within the <img> tag.

HTML Comment Tags ()

HTML comment tags allow you to add comments to HTML code without having the comments display on the web page. HTML comment tags begin with a less than symbol (<) immediately followed by 2 consecutive dashes (--) and ends with 2 dashes immediately followed by a greater than symbol (>).

<html> <head> </head> <body> <-- This comment will not be displayed by the web browser --> <p> This is a paragraph.<-- This comment will not be displayed by the web browser --> </p> </body> </html>

HTML Line Breaks (<br>)

An HTML line break tag starts a new line without starting a new paragraph. An HTML line break tag starts with a less than symbol (<) followed by the letters "br" followed by a greater than symbol (>).

<html> <head> </head> <body> <p> This is some text in a paragraph.<br>This text will be displayed on a new line. </p> </body> </html>

Viewing Your Web Pages

Copy and paste the HTML code above into a text editor and save the document with either an ".html" or ".htm" extension, for example you can name the file "hello_world.html". Now upload the file to your web host and go to the web page in your web browser.

Your web page should look like the example shown below.

Introduction to HTML by LearnWebsiteDesign.com

Home

Tutorials

Templates

Free Website Templates

References

CSS References