Create a Free Website

HTML Code Tutorial


12 Basic HTML Tags & CSS

This is a list of the 12 HTML tags and common CSS settings that you will need to learn to build a basic website like those found in our Simplified Template Gallery.

Easy CSS template

We've kept the HTML code very simple so that you can learn to build your own website with just a basic knowledge of HTML coding.

Try to get a basic understanding of what each HTML tag does and how the corresponding CSS settings affect appearance.

You can do that by copying and pasting the code into your own text or HTML editor.

Study all of the lessons and then work your way through the Learning the Basics tutorial.

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites


Start Your FREE Website Now!



HTML Tags in Logical Order

The HTML tags are listed in a logical order in which they would be used to create a web page. The corresponding tutorial pages are provided and where applicable the commonly used CSS for the tag is also given.


Doctype Tag

Provides information to the browser about the type of content in the web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
See: Doctype



HTML Tag

Required on all HTML pages except those that use framesets. (Frames Obsolete in HTML 5)
Defines the content as HTML code.

<html></html>
Common CSS
dir:
lang:
xml:lang

Note: An easy way to define the attributes for your HTML tag is to add these two meta tags to your head section.

<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

See: Basic HTML Page



Head Tag

Defines the head section of the HTML page and provides information to the browser about the content of the web page.

<head></head>
Common CSS
none
See: Basic HTML Page



Link Tag

This tag always appears in the head section and is used to link a style sheet to the web page.

<link rel="stylesheet" href="style-div.css" type="text/css">
Common CSS
none
See: Style Sheets



Body Tag

Defines the body section of the HTML page where the code for the visible content of the page resides.

<body></body>
Common CSS
width:
height:
margin:
padding:
color:
background-color:
background:
background-image:
background-repeat:
See: The Body Tag



Division Tag

The division tag used to to create sections, columns and rows in the body section. Can be used to create the entire structure of the page.

<div></div>
Common CSS
width:
height:
float:
margin:
padding:
border:
background-color:
background:
background-image:
background-repeat:
See: The Division Tag, The ID Attribute and Float Property



Header Tag

The header tag comes in six default sizes and is used for page and paragraph headings.

<h1></h1>
Common CSS
font-family:
font-style :
font-size :
font-weight :
text-align :
color :
background-color:
background:
margin:
padding:
float:
line-height:
Also: h2, h3,h4 h5 and h6
See: Style Sheets, Working With Fonts and The Header Tag



The Paragraph Tag

Use this tag to place paragraphs on your web page.

<p></p>
Common CSS
font-family:
font-style :
font-size :
font-weight :
text-align :
color :
background-color:
background:
margin:
padding:
float:
line-height:
See: Style Sheets, Working With Fonts and The Paragraph Tag



Anchor Tag

The anchor tag is most often used to create links for linking one web page to another.

<a href=""></a>
Common CSS
font-family:
font-style :
font-size :
font-weight :
text-decoration :
color:
background-color:
background:
margin:
padding:
line-height :

Note: When placed within paragraphs, anchor text inherits the settings of the paragraph tag as far as font-family, style and size. You do need to define color if you want to change them from the default link colors.
See: Anchor Tag



Image Tag

The image tag is used to add pictures to a web page.

<img src="" alt="Alternate text required">
Common CSS
width:
height:
border:
float:
margin:
padding:
max-width:

Note: When building liquid web pages, DO NOT define the dimensions ( width and height ) of your images. Add the line, img { max-width: 100% } to your style sheet and images will expand and contract with the size of the browser window and container. Images will not scale properly if you add dimensions!
See: Using Images, Anchor Tag - Image and Paragraphs-Images



Address Tag

The address tag can be used to add footer information to a web page.

<address></address>
Common CSS
font-family:
font-style :
font-size :
font-weight :
text-align :
color:
background:
margin:
padding:
See: Style Sheets and Working With Fonts



Line Break Tag

The line break tag is used to break lines of text or to add space between elements on a page.

<br>
Common CSS
clear:
See: Line Break Tag