Show Sidebar Log in

HTML Basics

What is HTML?

Firstly, HTML is short for “HyperText Markup Language”. That may sound scary, but it simply means it is a language for describing web-pages using ordinary text. HTML is not a complex programming language.

HTML Files

Every web page is actually a HTML file. Each HTML file is just a plain-text file, but with a .html file extension instead of .txt, and is made up of many HTML tags as well as the content for a web page.

A web site will often contain many HTML files that link to each other. You can edit HTML files with your favourite editor.

HTML Tags

HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.

Most tags must have two parts, an opening and a closing part. For example, <html> is the opening tag and </html> is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. I tend to interpret this as the “end” or “close” character.

There are some tags that are an exception to this rule, and where a closing tag is not required. The <img> tag for showing images is one example of this.

Each HTML file must have the essential tags for it to be valid, so that web browsers can understand it and display it correctly.

The rest of the HTML file can contain as little or as many tags as you want to display your content.

Tag Attributes

Attributes allow you to customise a tag, and are defined within the opening tag, for example:
<img src=”image1.jpg”> or <p align=”center”> … </p>

Attributes are often assigned a value using the equals sign, such as border=”0″ or width=”50%”, but there are some that only need to be declared in the tag like this: <hr noshade>.

Most attributes are optional for most tags, and are only used when you want to change something about the default way a tag is displayed by the browser. However, some tags such as the <img> tag has required attributes such as src and alt which are needed in order for the browser to display the web page properly.

Example:
Below is a basic HTML document, containing all the essential tags. You can copy the code below, paste it into your editor, and save as mypage.html to start your own web page.

<html><head><title>My Page Title</title></head><body>This is where all my web page content goes!</body></html>

Essential HTML Tags

There are four sets of HTML tags that are needed to form the basic structure for every HTML file:

<html></html>
<head></head>
<title></title>
<body></body>

Definition – <html> </html>

This basically defines the document as web page. It also identifies the beginning and end of the HTML document. All other tags must fall between the HTML tags.

Header – <head> </head>

The header contains information about the document that will not appear on the actual page, such as the title of the document, the author, which stylesheet to use and also meta tags.

Title – <title> </title>

The title tag defines the title that will appear in the title bar of your web browser. The title must appear between the head tags.

Body – <body> </body>

The body tags contain all the information and other visible content on the page. All your images, links and plain text must go between the <body> and </body> tags.

These four tags are special. There must only be one set of each and they must be in the correct order like in the example below. The fun and creative part comes when using the basic tags for adding content and headings.

Example:
Below is a basic HTML document. Notice that everything falls between the HTML tags, the title appears within the head of the document, and that the body comes after the head.

<html><head><title>My Page Title</title></head><body>This is where all my web page content goes!</body></html>

 

Tags: html, markup, tags

Discussion (0)

There are no comments for this doc yet.

Leave a Reply