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 Free Responsive Web Templates
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 lang="en"></html>
Note: lang attribute is required for W3C validation. (Substitute your language code if not English.)
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>
No Attributes
See: Line Break Tag
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried our free mobile ready website template kit? Download Template #402 - 6 Page Kit