Under the Hood with WordPress, Part 2: HTML

This is Part 2 of a 6-part series on diving “under the hood” with WordPress. Today, we’re covering HTML – the markup language that allows a web browser to interpret and display content. Other posts in this series:

Every time you visit a website like one of those eloboost websites, blog, web application, or even open an email newsletter, you are looking at a vast array of code and content that’s being delivered to your browser from a web server. But it’s not just words and pictures; each and every piece of content is rendered through a markup language that lets the browser know what type of content is being delivered.

HTML: HyperText Markup Language

This content is being rendered using HTML – HyperText Markup Language. You may not realize it, but HTML is nearly 25 years old – Tim Berners-Lee, a physicist, invented the first 18 HTML tags in the late 80s. Today, there are nearly 90 tags defined in the HTML specification.

HTML Structure

HTML Elements

Content defined by HTML is called an element. Each element contains three parts: the opening tag, the content, and the closing tag. A sample HTML tag looks like this:

<p>This is an HTML Paragraph.</p>

The <p> is the opening tag, the </p> is the closing tag, and the content is what’s in the middle!

Empty Elements

An empty element is a tag that contains no content. Empty elements are written without a closing tag – you simply add a slash to the first tag:

<img src="image.src" alt="alternate text" />

Notice how there’s no actual content in the image – yes, there’s a URL to an image file, but we’ll cover that in a second – so we close the tag with a final / at the end.

HTML Attributes

Some HTML tags have “options” you can set – better known as “attributes”. This can be a source URL, a title tooltip, or alternative text for an image. There are only two HTML tags that really use attributes anymore – we’ll cover those below.

Common HTML Tags

HTML, Head, Meta, Link, and Body

Every HTML document starts the same way:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="style" type="text/css">
  </head>
  <body>
    ...content here...
  </body>
</html>

This is a fairly standard layout – there’s a <head> section at the top – it contains scripts, meta information – information that the browser uses, and link tags – tags that pull in external resources such as stylesheets. Since these tags aren’t content, they’re placed separate from the content. The <body> tag is where all of the true content lies, and where you’ll find 99% of the tags we list below. Finally, the </body> and </html> tags close off our document.

Images

<img src="image.src" alt="alternate text" />

Image tags display images on a website. Since <img> tags are an “empty element”, we must define a source URL as an attribute. We also define alternate text for browsers that do not / cannot load the image file. It’s not a requirement, but it is highly recommended that you define alternative text with the ‘alt’ element.

Hyperlinks

<a href="link.html" title="Link Title">Link Text</a>

A hyperlink links two separate locations of the web together. You define the href – the source of the location you wish to link to – and a title to give context. Finally, you put actual content inside of the tags. This can either be text or an image.

H1, H2, H3, H4, H5, H6

<h1>This is a Headline.</h1>
<h2>This is a Sub-Headline.</h2>
<h3>This is a Sub-Sub-Headline</h2>

H-tags are headlines. Imagine you’re writing an outline for history class. You have roman numerals, numbers, letters, lowercase roman numerals… this is what your headlines are for. If you’re breaking up content into sections, use H-tags to divide it by section into manageable, readable chunks.

Section, Div, Span, Aside, Header, Nav, and Footer tags

Let’s take our basic web-page above and add to it:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="style" type="text/css">
  </head>
  <body>

    <header>
      <nav>
        ...navigation...
      </nav>
    </header>

    <section>
      <div>...<span>section</span> content....</div>
    </section>

    <aside>
      ...sidebar content....
    </aside>

    <footer>
      ...footer content....
    </footer>

  </body>
</html>

This is a very typical website. You have a header – with navigation – at the top, a content section, a sidebar, and a footer. Inside of the content is a hard-block of content – a div tag – and a soft block – a span tag. These various tags are structural tags that help to define the content that’s inside of it. A header, for example, could have a logo and navigation. The footer usually has boilerplate text, an address, and more navigation links – sometimes even the menu so people can click without having to scroll. All of these tags are defined blocks of content, except one – the span tag. The span tag does not form a hard box – instead, it wraps itself around the content in question without applying form.

Paragraph and Blockquote

<p>This is a paragraph.</p>
<p>
  <blockquote>This is a quoted piece of content.</blockquote>
</p>

Paragraph and Blockquote tags are used for everyday sentence-based content. Specifically, the <blockquote> tag is used to provide emphasis on “quoted” text from someone else.

Ordered and Unordered Lists

<ul>
  <li>This is a bulleted list point</li>
  <li>This is a bulleted list point</li>
</ul>
<ol>
  <li>This is an ordered list point</li>
  <li>This is an ordered list point</li>
</ol>

List tags provide a way to make a list of elements. Unordered lists – the <ul> tag – are bulleted, while ordered lists – the <ol> tag – are numeral.

Line Breaks and Horizontal Rules

<br />
<hr />

Breaks and rules allow for defined – or invisible, in the case of a break – divisions of content.

Tables, Table Headings, Table Rows, and Table Cells

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Tabular data can be separated into rows, columns, and cells to sort and reference content. Pricing tables, data matrices, and directories are built with tables to allow for ease of reference.

Script, Object, iFrame, and Embed

The <script> tag is used to either run or link to programming-language based elements. jQuery, which we’ll cover later this week, uses the <script> tag to run it’s modifications on the content once it’s been loaded.

mitch canter

director of engineering

nashville, tn.