How to Write HTML, Part 3: Formatting Structural Content

Brad Yale
Brad Yale
Nov 2, 2017 · 6 min read
Image for post
Image for post
Learning Web Standards

In How to Write HTML, Part 2: Understanding Tags, we touched on the basic functionality of tags and how they serve to format on page content relationships along with the look and feel of that content.

As noted:

“A tag is the basic bedrock principle of HTML. It is the building block tool which enables formatting of font, color, graphic, and hyperlinks. Tags are used universally across HTML to identify specific types of content and how a webpage is formatted… By knowing the rules of how tags work, which tags to use in a specific situation and more importantly, how tags relate to one another, it becomes stupid simple to create a HTML page.”

On the surface, HTML is used to determine if text is bold, italicized, blue, or bold italicized and blue. The truth though is HTML used to determine the structural relationship of content placed on a webpage.

Structure and Clarity

More important than the look of content is how that content is organized using basic tagging mechanisms. When you write, you naturally sort that content into distinct structures to allow yourself and your reader to make sense of the fundamental meaning and how that meaning relates to additional content within.

It’s the process of applying paragraphs, headers, quotes, lists, tables, alignments, etc. Without this process, even the most compassionate and well intention piece of content will make no sense. As such, let’s take a look at how these tags work.

Paragraph

The paragraph tag is pretty straight forward. It is used to define paragraph sections within a webpage.

The tag is formatted as:

As you can tell, the paragraph tag is a simple p with angled brackets and the standard backslash to close the tag.

Headers

The header tag is used to define structural breaks in the content organized under section headers. The tag itself is pretty straight forward yet variations on the tag are utilized to define the impact of that header. More importantly, the tag is used by web browsers to categorize and spider content within a page (more on that in a bit).

The tag is formatted as:

Depending on the importance of the section, you will define the header tag in descending numeric value, 1 to 6, to define the weight of that header.

For example, the h1 tag looks like this:

Rick Grimes

The h2 tag looks like this:

Daryl Dixon

The h3 tag looks like this:

Maggie Greene

In short, the higher the numerical value of the tag, the lesser visual impact is applied to that header.

Now, it is important to remember the secondary nature of the header tag — spidering content. We won’t get into it fully here but the base search functionality of headers allow web crawlers — spiders a.k.a. bots — to determine content organization within a site and index it for natural search.

Quotes

The blockquote tag is used to define quotes within a post. The tag allows the web browser to determine what content on the page is organically written and what content on that page is being referenced to a source.

The tag is formatted as:

As live text, it looks like this:

“Because you’ve never had to do it any other way. You haven’t been through it, not really. Not like Rick. Rick was out there, I was out there. We know, you don’t. But if you don’t learn, you will die, we will.”

The blockquote tag, as you can see, is a very easy way to mark quoted text within body copy.

Lists

When you need to build a list of data within a document, list tags accomplish the goal. While list tags define information, there are a few ways in which that definition occurs. The most common types of lists are:

  • Bullets or hyphens

or

  1. Numerical

As differences exist, the tags for each are different. In addition, the list function hinges on two main tags:

  • Tags which define the type of list ol and ul
  • Tags which define listed content li

A bullet list is formatted as:

A numerical list is formatted as:

The change in formatting is slight yet, as you can see, it defines the difference.

Tables

To understand tables, you have to understand lists. For our first few formatting functions, we stuck with a basic singular tag structure p or h2 or blockquote. Moving to lists, a dual tag nature appeared, both ol or ul combined with li. The table functionality uses four core tags - table, tr, th and td.

When formatted properly, it looks like this:

The output of that table will look like:

Image for post
Image for post

The formatting for tables looks a bit more difficult to understand yet if you understand the basic tagging structure of using multiple tags within an overall function, the table premise makes sense.

A single note: as you might have noticed, embedded in the table code is style="width:100%". This style command is telling the web browser to display the table at 100% width of the container. It's a style command - not to dissimilar from CSS (which we will touch on in a later lesson) - to inform the look and feel of the table.

Alignments

The alignment function, as is the case with the above style="width:100%" function, tells the web browser how a given element should be aligned on a web page. The three basic alignments are aligncenter, alignright and alignleft.

For example, if you wanted to call an image into your webpage and align it to the center of the page:

The visual representation of that command would be:

Image for post
Image for post

The same function can be performed to define alignment at alignright or alignleft. Likewise, adding additional functional commands such as alt="The Walking Dead Rick Grimes" will add alt text content to the image to allow image disallowed browsers and spiders to understand what the image is.

With that, you know have a pretty solid understanding of the core formatting functionality of HTML. From this article, you should now be able to distinguish between functional tagging and visual format tagging.

Now, let’s talk about CSS.

HEALTHWELLNEXT is a thought leadership platform focused on…

Brad Yale

Written by

Brad Yale

HealthWellNext
Brad Yale

Written by

Nerd at heart. I write about health, tech, data, search and content.

HealthWellNext

HEALTHWELLNEXT is a thought leadership platform focused on forward-thinking insights, strategies, ideas and innovation, brought to you by The Bloc.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store