How to Write HTML, Part 3: Formatting Structural Content
By: Brad Yale
Tags: Coding, HTML, Web Design, CSS, Web Development

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