Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

📄 Contents

  1. It's the Whole Purpose of Coding
  2. So What Does HTML Do, Exactly?
  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

So What Does HTML Do, Exactly?

HTML just tells us what sort of content we're looking at. To write HTML, you need to read the content from your copywriter so that you can identify what each chunk of content is. It's actually pretty simple, so don't freak out; here's a list of the main types of content you'll need to identify:

  • Paragraph: A chunk of text; ideally it's a series of related sentences that create a unified thought.
    • HTML also lets you put breaks between chunks of content to mimic a soft return. Don't be fooled: Adding space below a chunk of text with a soft break is not the same as identifying it as a paragraph. HTML is not about what something looks like; it's about what it is.
  • Headline: Summarizes the chunk of content that follows it.
    • Main headlines summarize the overall meaning of the following content, while the lesser headlines progressively summarize smaller, less global ideas.
    • HTML gives you six levels of headlines to pick from.
    • Typically, the more important the headline, the bigger it is. This is not always the case, though, which is why HTML exists. HTML helps you establish what the content is before you tell it what to look like. For example, you should work hard to ensure that <h3> tags are not above <h2> tags.
  • List: A series of related items.
    • HTML lets you work with a few different types of lists:
      • Unordered lists are what we typically call bulleted lists. But don't be fooled; not all unordered lists have bullet points. They might have arrows, or dashes, or squares. They might not even have these graphics at all. For example, navigation, which is a list of page links, does not. In case I haven't convinced you already, HTML isn't about what something looks like. It's about what it is.
      • Ordered lists are what we might call numbered lists. They can be 1., 2., 3... or i., ii., iii., etc. Use them when you're ordering items deliberately.
      • Definition lists have an item that's followed by some sort of definition or clarification. For example, a glossary of terms would use a definition list.
  • Other stuff: There are other little HTML chunks that you'll need to learn about that will let you emphasize, link, or group things together. But for now, paragraphs, headlines, and lists are the main ones I want you thinking about.

Using just the tags described above, your content can be displayed in an RSS feed or mobile-optimized Web site that has its own look and feel. It won't use the same typography or colors as your Web site, but it will be readable because it has HTML telling it which chunks of text are headings, paragraphs, and lists.

When your copywriter gives you a Word document, the document typically reads from top to bottom. It isn't pretty, but it's logical. Next time you get content from your copywriter, refer back to this section and try to identify each chunk of text the way HTML asks us to identify it. Just mark in the margins what each chunk of text is (Figure 4.3).

Figure 4.3

Figure 4.3 When you start writing HTML, it might help to put pen to paper and mark up the chunks of content.

If you ever get stuck trying to figure out how to identify a chunk of content, it wouldn't be a bad idea to check with your copywriter. Copywriters often use styles to format their documents, which you know can be mapped to InDesign. Similarly, this sort of structure could make your HTML writing easier.

Just like there's no flow content button that works for a 60-page technical manual you're designing with InDesign (boy, wouldn't that be nice!), there's no magic button that does this for coding Web sites—you have to use your brain.

  • + Share This
  • 🔖 Save To Your Account