Basic HTML Tags

Below is a list of some of the most commonly used tags.

1. Basic HTML page

<html>
<head>
<title>Basic HTML Example</title>
</head>

<body>
Some text for the <b>basic html</b> example page

</body>
</html>

2. Linking external CSS file

<link href=”styles.css” rel="stylesheet" type=”text/css” />

3. Heading styles

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

<html>
<head>
<title>HEADINGS</title>
</head>
<body>
The heading tag<br>
<h1>The largest heading</h1>
<h2>The second largest heading</h2>
<h3>The third largest heading</h3>
<h4>The fourth largest heading</h4>
<h5>The fifth largest heading</h5>
<h6>The sixth largest heading</h6>
</body>
</html>

4. Paragraph

<html>
<head>
<title>Line break tag vs Paragraph tag</title>
</head>

<body>
<h3>Line break tag vs Paragraph tag</h3>
<strong>Some text with one line break tag at the end.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>

<strong>Some text with two line break tags at the end.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br />

<p><strong>Some text enclosed inside of a paragraph tag.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p><strong>Some text enclosed inside of a paragraph tag.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

5. Line break

<html>
<head>
<title>Line break tag vs Paragraph tag</title>
</head>

<body>
<h3>Line break tag vs Paragraph tag</h3>

<strong>Some text with one line break tag at the end.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>

<strong>Some text with two line break tags at the end.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br />

<p><strong>Some text enclosed inside of a paragraph tag.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p><strong>Some text enclosed inside of a paragraph tag.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</body>
</html>

6. Horizontal rule

<html>
<head>
<title>HR</title>
<style type="text/css">
hr {
border: 0;
color: #999999;
background-color: #999999;
height: 1px;
width: 100%;
}
</style>
</head>
<body>
This is some text above the horizontal rule.
<hr>
This is some text below the horizontal rule.
</body>
</html>

width: [ pixel or percentage value ] specifies the width of the element
height: [ pixel value ] specifies the line height of the element
border: [ pixel value ] in this case it should be set to zero
color: [ hex value ] this describes the color of text within an element
background-color: [ hex value ] sets the background color for the current element
text-align: details how the element will be horizontally aligned.

You’ll need to include both the color and background-color attributes in the style sheet as not all browsers will understand them. Browsers that understand both, will draw a border around the element so it is important to use the height attribute to control this.

7. Bold and italic

<strong>Some bold text</strong><br>

<em>Some italic text</em><br>

<strong>Some bold text AND <em>some bold and italic text</em></strong>

How would you use html markup to produce this sentence (bold & italic, then italic)?

8. Blockquote  Indenting a paragraph, creates a paragraph and adds margin on left and right

<blockquote>some indented text</blockquote>

9. Links
A link to another web site

<a href="http://www.nytimes.com/">Link to the New York Times</a>

A link to a page within the website

<a href="about.html">About </a>

A link that sends an email.

<a href="mailto:jane@jane.com">Email Jane Doe</a>

The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position – assuming that the link is far enough away to need a scroll. The “href” code is the link and must include the “#”, the “name” code is the location on the page to scroll to and must NOT include the “#”. NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won’t work in Explorer. If you don’t want anything to so in the name tag, use the non-breaking space HTML code:

<a href="#top">Link to a location on top of this page</a>
<a name="top">Some text at the top of the page</a>

10. Image

<img src="images/flower.gif" width="200" height="100" alt="short description of flower" />

11. Div

<div>A block-level section in a document</div>

12. Span

<span>An inline section in a document</span>

13. Ordered List, types: numbered=no type, upper letters=”A”, lower letters=”a”, upper roman=”I”, lower roman=”i”

<ol type="i">
<li>this is item 1 in an ordered list</li>
<li>this is item 2 in an ordered list</li>
<li>this is item 3 in an ordered list</li>
<li>this is item 4 in an ordered list</li>
</ol>

14. Unordered List

<ul>
<li>this is item 1 in an un-ordered list</li>
<li>this is item 2</li>
<li>this is item 3</li>
<li>this is item 4</li>
</ul>

Navigation using the ul list tag

<ul>
<li><a href=”http://www.website.com/about.html/”>About</a></li>
<li><a href=”http://www.website.com/portfolio.html/”>Portfolio</a></li>
<li><a href=”http://www.website.com/services.html/”>Services</a></li>
<li><a href=”http://www.website.com/contact.html/”>Contact</a></li>
</ul>

15. Definition List

<dl>
<dt>Apple</dt>
<dd>Red fruit</dd>
<dt>Banana</dt>
<dd>Yellow fruit</dd>
</dl>

16. Table

<table border="1">
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>
</table>

17. Form

<form action="contact.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

18. Meta tags refresh=go to a new page after N seconds, description=used by search engines, keywords=used by search engines

<meta http-equiv=”Refresh” content=”15; URL=http://academy.smc.edu”>
<meta name=”description” content=”The New York Times on the Web”>
<meta name=”keywords” content=”New York Times, newspaper, international, news, business”>

19. Comments used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with “<!–”, end it with “–>”, and do not use “–” within the comment.

<!– this is a comment –>

20. Special Characters HTML is used to create quotes, ampersands, copyright symbols and many other special characters. Here’s link to a list of special characters and the corresponding html code: http://www.webmonkey.com/2010/02/special_characters/

&lsquo; creates a left quote
&rsquo; creates a right quote
&#38; or &amp; creates an ampersand
&#169; or &copy;  creates a copyright symbol

2 thoughts on “Basic HTML Tags”

  1. Cod ghost hack says:

    Wow! This blog looks just like my old one! It’s on a entirely different subject but it has pretty much the same layout
    and design. Superb choice of colors!

  2. Pingback: Resource List | DMAD 200
  3. Trackback: Resource List | DMAD 200

Leave a Reply

Your email address will not be published. Required fields are marked *