Image Tags, DOCTYPEs, and Meta Tags

This section is a collection of assorted miscellaneous topics in introductory HTML. First off, there’s the fairly essential <img> tag. This tag has two main attributes - a “src” attribute that grabs the right image off the server, and an “alt” tag that provides text in the case the image is unavailable, or for individuals using screen readers for a sight impairment.

Here’s an example of a typical image tag:

                	
<img src=”myimages/test.jpg” alt=”random image” />
					
				

Here we can see a self-closing tag - something used in XHTML when a tag doesn’t need a separate end tag. XHTML is a version of HTML that is also compliant with the XML standard. When you’re designing a web page, it’s worth taking a moment to think about which standard best suits you - HTML5, HTML 4, or XHTML 1.0.

Here is the DOCTYPE for XHTML Strict 1.0:

                	
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
					
                

And here is the DOCTYPE for HTML 4.01 Transitional:

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

Note that XHTML also requires a special set of attributes on the HTML tag, stating that it is an XML document, like so:

                	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
					
				

If you intend to use HTML5 features such as the <audio> or <video> tags, or the <header> and <footer> tags, then you can use the simple DOCTYPE for HTML5:

                	
<!doctype html>
					
                

Choosing XHTML or HTML is really up to you and your project’s requirements.

Meta tags are special tags used to convey various bits of information to the browser. This includes fairly outdated tags such as the “keywords” meta-tag, which search engines no longer consider all that useful, and more useful tags such as the “charset” meta-tag and the “description” meta-tag. The “charset” tag describes which character set your page is using, and the “description” tag describes your site, and usually shows up on search engines as the description. Here are those two useful meta tags:

                	
<meta charset=”utf-8”>
<meta name=”description” content=”Description of my site”>