SUBSCRIBE

BOARD LOGIN

HTML for Writers

Welcome to HTML for writers, thank you for joining me.

The purpose of this mini course is to familiarize you with the various HTML tags you’re most likely to encounter as a writer on the internet.

HyperText Markup Language is the language in which the internet is written. CSS styles it, JavaScript makes it interactive, and other languages like PHP pull pages together in a content management system, but none of that is important for a writer.

You make content, HTML is content.

Luckily, all our sites are in WordPress, and you’ll never be asked to write HTML; the editor functions just like a text editor.

However, sometimes this editor messes something up in the formatting, like forgetting to close a tag, or nesting tags improperly. This is when we require human intervention. Thus I’m teaching you the basics to empower you to fix things when they’re mildly broken.

Anatomy of an HTML tag

HTML consists of written content punctuated and contained by tag elements. The most common tags you’ll encounter are:

  • <a href=”path/to/your”>link</a>
  • <p>
  • <h1> through <h5>
  • <span>
  • <strong>
  • <div>
  • < /br>
  • <ul>
  • <ol>
  • <li>

Hyperlinks/Anchor Tags

Links are the glue that connects the internet and keeps it all together. They look like this:

<a href="http://www.yoursite.com/path/to/page">Text for the link</a>

The <a declares the link tag to be open. The href (hypertext REFerence, yes I know, it’s an old tag) is an attribute that tells the browser where to go. The opening tag is then closed with a > and you can begin the text of the link. After that, a </a> closes the tag. It’s important to close the tag, otherwise the browser will render other things on your page as part of the same link until it finds another closing tag of another link.

You can also force a link to open in a new tab or window by adding target=”_blank” after the href attribute.

Please Note: The <a> tag is different than the <link> tag, if you ever see that on a document. You’ll only be using the <a> tag as a writer, the <link> tag is for importing documents. You may notice some inconsistencies throughout the HTML language, and that’s mostly because it started in 1993 and has had four major releases since, each release having to build on the foundation of the previous one.

Paragraphs

Paragraphs are the basic building blocks of writing on the web. For formatting purposes, wrap your paragraphs in <p> tags, like so:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non tristique elit. Aenean fermentum, eros nec fringilla cursus, dui ex ultrices urna, et fringilla diam nunc et nibh.</p>
<p>Phasellus aliquam odio eget facilisis gravida. Ut ac nibh tortor. Sed at enim <a href="http://www.yoursite.com">sit amet sem tempus</a> laoreet. Nunc finibus ultricies volutpat.</p>

As you can see, you can nest other elements inside of the paragraph tag. You can almost always nest one tag inside of another.

Strong

You may see the <strong> tag in the output of your writing at some point, and that’s just how HTML does bold:

<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit. Praesent id bibendum enim. </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id bibendum enim.

Headings

Headings are for titles, subtitles, bylines, and anything that needs to be bigger than paragraph text. They come in five different sizes, <h1> being the largest, and <h5> being the smallest.

Headings help to enforce the information structure of the page, with larger headings denoting more important things.

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five

Using the headings in order is important not only for visual hierarchy, but also for accessibility. Blind users of the internet use screen readers on their browsers to access content. These screen readers read out the information to the user and rely heavily on semantic markup, or using the right tags in the right places, in the right order.

Span

The <span> tag doesn’t actually really technically do anything on its own, but when combined with a class attribute, it can style a string of text:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="cyan">Aenean non tristique elit.</span> Aenean fermentum, eros nec fringilla cursus, dui ex ultrices urna, et fringilla diam nunc et nibh.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non tristique elit. Aenean fermentum, eros nec fringilla cursus, dui ex ultrices urna, et fringilla diam nunc et nibh.

A class is a way of defining the styling of an element through CSS, or Cascading Style Sheets. In this case, anything with the class “cyan” would have the CSS property “color: cyan;” applied to it. Classes have to be defined before you can use them, but that’s my job and I will provide you a list of classes you can use on any given site.

< /br>

Line Break. Plain and simple. One tag, self-closing. It’s cousin the < /hr> element will give you a horizontal divider.

Lists

Lists are a little more complicated because they consist of two different elements, one nested within the other. The <ul> element stands for “unordered list,” and <li> is “list item.” 

<h4>Finches of North America</h4>
<ul>
   <li>Cassins's Finch</li>
   <li>House Finch</li>
   <li>Purple Finch</li>
   <li>Saffron Finch</li>
   <li>Cuban Bullfinch</li>
   <li>Greater Antillean Bullfinch</li>
   <li>Common Chaffinch</li>
   <li>American Goldfinch</li>
   <li>Lawrence's Goldfinch</li>
   <li>Lesser Goldfinch</li>
   <li>Hawfinch</li>
   <li>Common Rosefinch</li>
</ul>

Finches of North America

  • Cassins’s Finch
  • House Finch
  • Purple Finch
  • Saffron Finch
  • Cuban Bullfinch
  • Greater Antillean Bullfinch
  • Common Chaffinch
  • American Goldfinch
  • Lawrence’s Goldfinch
  • Lesser Goldfinch
  • Hawfinch
  • Common Rosefinch

Images

In all likelihood, you’re not going to have to worry about the formatting of image tags, but they can get messed up easily by both humans and code editor programs, so here’s how an <img> tag works:

<img src="path/to-file.jpg" />

So that’s pretty easy. It has one attribute that defines a file path to an image you want to display, very much like the href= in the <a> tag. Why aren’t the attributes that do the same thing called by the same name? I have no idea.

Class it up

Classes are a way of defining the appearance of an element by way of a Cascading Style Sheet, or CSS document. As the UX/Front End Designer, that’s what I do, but I will make a list of useful classes available for each site that you write for. While the classes could technically be named anything, it’s best practices for them to make sense in the context in which you’re using them.

Any element can have a class attribute, and it looks like this:

<p class="cyan"><p>Lorem ipsum dolor sit amet</p>
<h3 class="baskerville">Heading in Baskerville</h3>
<a class="gray-link" href="http://2019.jewishdetroit.org">Go Back Home</a>

Lorem ipsum dolor sit amet

Heading in Baskerville

Go Back Home

And that’s about it.

HTML is a simple language and pretty easy to learn to read and write. The structure is reasonably consistent, even if the attribute names aren’t. But that’s something that comes with using an old language that’s changed a lot in the 26 years since its introduction. This should be just enough to get you started, but here’s a list of other resources to browse if you’re curious and want to learn more and see more examples of the code in use:

Posted

in

by

Brian Fritz

Tags: