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