How to Write HTML, Part 3: Formatting Structural Content

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:

<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. 
De carne lumbering animata corpora quaeritis. Summus brains sit,
morbo vel maleficia?</p>
<p>De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus
resi dentevil vultus comedat cerebella viventium.</p>
<p>Qui animated corpse, cricket bat max brucks terribilem incessu zomby. 
The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.
Zonbi tattered for solum oculi eorum defunctis go lum cerebro.</p>

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:

<h1>Rick Grimes</h1>
<p>Zonbi tattered for solum oculi eorum defunctis go lum cerebro.
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror.
Nigh tofth eliv ingdead.</p>
<h2>Daryl Dixon</h2>
<p>Cum horribilem walking dead resurgere de crazed sepulcris creaturis,
zombie sicut de grave feeding iride et serpens. Pestilentia, shaun of
the dead scythe animated corpses ipsa screams.</p>
<h3>Maggie Greene</h3>
<p>Pestilentia est plague haec decaying ambulabat mortuos.
Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror
soulless vulnerum contagium accedunt, mortui iam vivam unlife.</p>

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:

<h1>Rick Grimes</h1>

Rick Grimes

The h2 tag looks like this:

<h2>Daryl Dixon</h2>

Daryl Dixon

The h3 tag looks like this:

<h3>Maggie Greene</h3>

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:

<h2>Alexandria</h2>
<p>Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles
undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram.
Putridi braindead odores kill and infect, aere implent left four dead.</p>
<blockquote>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.</blockquote>
<p>Lucio fulci tremor est dark vivos magna. Expansis creepy arm yof 
darkness ulnis witchcraft missing carnem armis Kirkman Moore and Adlard caeruleum in locis. Romero morbo Congress amarus in auras.</p>

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:

<h2>Negan</h2>
<p>Nihil horum sagittis tincidunt, zombie slack-jawed gelida survival portenta. The
unleashed virus est, et iam zombie mortui ambulabunt super terram.</p>
<ul>
<li>Souless mortuum glassy-eyed oculos attonitos</li>
<li>An hoc dead snow braaaiiiins sociopathic incipere Clairvius Narcisse, an ante?</li>
</ul>

A numerical list is formatted as:

<h2>Hershel Greene</h2>
<p>In Craven omni memoria patriae zombieland clairvius narcisse religionis sunt diri undead historiarum.</p>
<ol>
<li>Golums, zombies unrelenting et Raimi fascinati beheading.</li>
<li>Maleficia! Vel cemetery man a modern bursting eyeballs perhsaps morbi</li>
</ol>

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:

<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Abraham</td>
<td>Ford</td>
<td>deceased</td>
</tr>
<tr>
<td>Sasha</td>
<td>Williams</td>
<td>31</td>
</tr>
<tr>
<td>Carl</td>
<td>Grimes</td>
<td>15</td>
</tr>
</table>

The output of that table will look like:

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:

<img src="http://cdn.inquisitr.com/wp-content/uploads/2016/01/The-Walking-Dead-4.jpg" align="aligncenter">

The visual representation of that command would be:

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.

<img src="http://cdn.inquisitr.com/wp-content/uploads/2016/01/The-Walking-Dead-4.jpg" alt="The Walking Dead Rick Grimes" align="aligncenter">

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.