It seemed fitting to begin this blog by posting about HTML. This is not a you-should-be-using-a-text-editor rant. I hope to give some background on HTML for folks who normally only use a What You See Is What You Get (WYSIWYG) editor so maybe you’ll look behind the curtain.
What is the purpose of HTML?
HTML is about defining structure for information on web pages. Well-written HTML also facilitates accessibility and Search Engine Optimization (SEO). For the purposes of this post all of my examples will adhere to the XHTML 1.0 Strict Specification.
HTML is not about presentation, i.e, look and feel. Modern web standards advocate for keeping information separate from presentation. Presentation should be handled by a Cascading Style Sheet (CSS). Keeping presentation in the CSS will allow you to make changes to presentation (or styles) in one place, without altering your markup. We’ll cover CSS in a future post.
Tags
HTML consists of tags. Tags are what you use to mark the beginning and end of elements. Tags are enclosed in angle brackets “<>”. In XHTML each “opening” tag must be accompanied by a “closing tag”. Closing tags start with “</” and end with “>”. Here is how you would mark up a paragraph element:
<p>This is a paragraph.</p>
There are some notable exceptions to the opening and closing tag rule. The image tag is a common example of this:
<img src="path/to/image.jpg" alt="Description of the image." />
Notice that the image tag doesn’t have an accompanying </img> tag to close it, but is self-closed with “/>” at the end. Other common tags that behave this way are the horizontal rule (<hr />) and line-break (<br />) tags.
You may have noticed some other information in that image tag:
<img src="path/to/image.jpg" alt="Description of the image." />
Those are attributes. Attributes consist of a name and a value enclosed in double quotes. (E.g., name=”value”) In this case, “src” and “alt” are required attributes.
You should have a basic understanding of what makes up an HTML tag. How about an HTML page? It’s pretty simple actually.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>This is the page title</title> </head> <body> <h1>Hello World!</h1> <p>This is my first web page.</p> </body> </html>
Those first two lines comprise the doctype. It’s important because it tells the browser which HTML specification you’re using. If it’s not there, your content may not render as expected. The dirty little secret is that almost everyone just copies and pastes that in. Once you decide which HTML specification you’re going to use, find the correct doctype and insert it into the first line. It will prevent headaches later.
The <head> tags enclose information used by the browser for things like the page title and paths to JavaScript and CSS files among other things. The human-readable content all goes in the body (enclosed between <body> and </body>). That’s what I want to focus on.
Headings
Notice I started with an h1 tag. There are six heading tags starting with h1 and ending with h6. Heading tags are commonly misused. Many folks tend to use them as a way to make text big and bold. Remember: Heading tags are meant to convey the structure of the information on the page. They should not be used to change the appearance of the text. That should be done in the CSS. Here is an example of correct heading structure:
<h1>This Is The Page Topic</h1> <h2>This Is a Sub-heading Related to The Heading Above</h2> <h3>This Is a Sub-sub-heading</h3> <h2>This Is Another Sub-heading</h2>
This is incorrect:
<h2>This Is The Page Topic And Should Be an H1</h2> <h2>This Is a Sub-heading</h2> <h4>This Is Meant to Be a Sub-heading But We Used H4 For Smaller Text</h4>
Here’s why you should care about this:
- Screen readers, used by the visually impaired, rely on well-structured headings for users to quickly navigate through a page
- Search engines rely on well-structured headings to read and index page information
It’s easy to forget how your content fits into the page structure once it’s all put together inside a template, for example.
Hopefully this is enough to get you to peak at what’s happening behind that WYSIWYG editor and start playing around with editing your markup yourself. At the very least, I hope you have a better understanding of what that editor is generating for you. Give it a try.