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 at www.freeliquidtemplates.com

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.

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>
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>

Note: Use the new meta added in HTML5 to define your character set. (required for w3C validation)

<meta 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
Class Attribute

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 Class Attribute and Float Property


Heading Tag (HTML5 h1-h6 Element)

The Heading 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 Heading 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.

HTML5 restricts the use of the address tag to actual internet addresses, links to and email addresses of the author.

Place copyright info and physical addresses in paragraphs.

<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 like paragraphs. Should not be used for creating empty space between page elements.

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