Heading into HTML

Your eyes light up as you read comments on your latest blog post. It’s been eight months since you started your blog, and you’re excited to have followers who visit regularly and comment on your posts.

Who knew a blog about birdwatching would attract so much attention?

Well done!

You’ve got a workflow for your blog, an audience interacting with your content, and you’ve become a pro at creating posts with the Visual editor in WordPress.

Ready for the next step? How about getting more control over your content by switching to the Text editor?

Text Editor and HTML

The Text editor in WordPress enables you to use HTML, or HyperText Markup Language, to write your content. You’ll hear many people refer to HTML simply as “markup.”

To switch from the Visual editor to the Text editor, open a new page or post and select the Text tab in the top right section of the editing area. Note that the icons in the Visual editor are replaced with quicktags in the Text editor.

HTML consists of text wrapped in special markers that represent content (paragraphs, headings, lists, etc.) on web pages. The special markers are called tags, which consist of an opening and closing tag. Tags surround the content and add meaning to it. (Note: there are some tags that don’t have a closing tag.)

Tags, along with the content they surround, are called elements. Examples of elements are page titles, paragraphs and headings. Elements are what make up web pages.

To get you started with HTML, I’ll show you how to code headings, paragraphs and unordered lists.

Headings

Headings on a web page are similar to headings you use to write a report or an outline. They define your document structure and add hierarchy to your web page, making it easier for visitors to understand your content.

HTML provides six levels of headings, though most web pages don’t typically contain all heading levels. Headings are marked up with one of the h1-h6 elements. h1 is the top-level heading, which in WordPress is used for the title of the post or page.

Your next post is “How To Identify Birds in 4 Easy Steps.” Let’s get started with coding the headings in the post.

To add the “Size and Shape” heading, you would use the following code:

<h2>Size and Shape</h2>

where <h2> is the opening tag for the heading and </h2> is the closing tag. The entire line of code is referred to as the <h2> element.

Within “Size and Shape,” you have several paragraphs about bird silhouettes you want to group under one heading. Create the next heading level, h3, with the following code:

<h3>Silhouettes</h3>

Great! Let’s add some content.

Paragraphs

Paragraphs on a web page are similar to paragraphs in a report or book. A paragraph can contain one sentence or multiple sentences. You’ll mark up each paragraph with the <p> element.

For the first paragraph of your post, you would use the following code:

<p>You see the shadow of the bird on the sidewalk. You look up into the gold-colored autumn foliage of the sugar maple, squinting your eyes to avoid the sun. There it is, on the bottom branch of the tree. Now, what bird is it?</p>

where <p> is the opening tag for the paragraph and </p> is the closing tag. The entire line of code is referred to as the <p> element.

Tip: Make it easy for your followers to read your content; keep your paragraphs short.

Unordered Lists

Along with headings, lists are a great way to break up content on a page. Unordered (bulleted) lists allow you to display a list of related items; think of a list of fruit, such as apples, peaches and pears.

Add a list of recommended birdwatching equipment to your post with the following code:

<ul>
<li>Binoculars</li>
<li>Bird guide (book or application)</li>
<li>Notebook or some method to track what birds you see</li>
</ul>

where <ul> is the opening tag for the unordered list and </ul> is the closing tag.

Each item in the unordered list is marked up with an opening <li> list item tag and a closing </li> list item tag.

Tip: Always check that you have opening and closing tags for each list item. When I have problems with the display of unordered lists, it’s usually due to a missing opening or closing tag.

Where to Learn More About HTML

Now that you have a taste of HTML, where do you go to learn more? Many people start by looking at the source of web pages to get an idea of how pages are coded.

Unfortunately, that can be problematic, since not all pages are coded correctly. For example, in place of HTML headings, you’ll often find text that is bold and larger in size to give the look of a heading.

One option is to attend classes or workshops. Personally, I’m fond of books, online tutorials (paid and free) and online resource sites.

Books

• HTML and CSS Visual Quick Start Guide, Eighth Edition, by Elizabeth Castro and Bruce Haslop. I’ve had multiple editions of this book over the years. The latest edition was released in August 2013, with updates for HTML5 and best practices.

• InterACT with Web Standards, A holistic approach to web design, multiple authors. This was my go-to reference book a few years ago. In addition to HTML, the book provides a background in web design fundamentals and information architecture. It also covers  CSS, accessibility, content strategy and more. You’ll find examples and practical exercises that allow you to better understand concepts. I believe only the ebook version is available.

Free Online Tutorials

• HTMLDog: One of my favorite sites I discovered almost ten years ago, the site was updated this past spring with new content. Note: the site is all text and code based; there are no videos.

• CodeAcademy: Learn to code with a web-based code editor. The forums are helpful, but may take a couple days for someone to reply to your questions.

• TutsPlus: Their 30 Days to Learn HTML and CSS tutorial is video-based and taught by Jeffrey Way. Set aside 15-20 minutes daily for the lessons. My only wish is that the videos had transcripts and captions.

• A Beginner’s Guide to HTML and CSS: My friend Shay Howe published the guide earlier this year. It’s a great way to get started with HTML and CSS. And when you finish, you can move on to his Advanced Guide to HTML and CSS.

Paid Online Tutorials

If you’re a visual learner, you can’t go wrong with any of the following online tutorial sites. Each site is constantly updated with new content from well-known authors, designers and developers. Note: Pricing is as of September 2013; prices are in U.S. dollars.

• Lynda.com: $25/monthly or up to $375/annually

• Team Treehouse: $25/monthly or $250/annually

• Learnable: $29/monthly or $180/annually

Resource Sites

• Web Platform Docs: Led by the World Wide Web Consortium (W3C), and in collaboration with Adobe, Apple, Microsoft, Opera, Google, Mozilla, Nokia, and others, the new Web Platform Docs is a community-based web professionals resource site.

• SitePoint: With multiple authors publishing articles weekly, you’ll find lots of good information on their site. Note: their HTML reference site doesn’t look to be current. I found no reference to HTML5.

• HTML5 Doctor: Get answers to your HTML5 questions from the experts including Rich Clark, Steve Faulkner, Bruce Lawson, Remy Sharp, Tom Leadbetter, Oli Studholme, and Ian Devlin.

---

Deborah Edwards-Onoro is a front-end web developer and user experience professional who develops websites and provides consulting through her company, Lireo Designs. Her interests are user experience, accessibility and WordPress. As leader of Metro Detroit WordPress Meetup, Refresh Detroit and Detroit User Experience Meetup she plans and promotes events and conferences. She lives in the Mitten State (Michigan), and when she’s not at her computer, she’s usually bicycling, watching tennis or birdwatching.