books

books

The concept of full-stack was pronounced dead at the close of 2019.
2020 Stack is the new name for the new generation.

windrose

Markup layer

Front-end stack

SEO. Accessibility. Semantics. The markup layer is where your carefully worded prose is enhanced with tips for computer-to-computer communication.

As you write your web pages, you naturally develop a rhythm to your sentences and paragraphs. Working with the punctuation essentials of the English language—commas, semicolons, colons, periods, parentheses, and dashes—you develop that rhythm.

Markup

Layers

Five-layered approach to front-end, client side, development:

To go beyond that rhythm, publishers have developed typographic conventions that impart additional meaning to readers: section headings, tables, pull quotes, and typeface variants for word emphasis.

Web pages have taken these centuries-old traditions and added the layout conventions developed during the 20th century by magazine publishers: sidebars, photographs, and wrapping layouts. But web pages are not simply articles or chapters, and web sites are not simply magazines or books.

The extra challenge of the markup layer is to serve the needs for search engine optimization, web accessibility, and meta-semantics.

HTML: Hypertext Markup Language

At its most basic level this "language" is really no more than a small collection of tags that provide instructions to the browser about how to distinguish one group of words or paragraphs from another. The everyday tags come in two types: inline tags that are used to mark-up words and phrases, and block-level tags that are used to mark-up paragraphs, tables, lists, and headings.

SEO

The basic goal of Search Engine Optimization is to make sure your web page can be found by the audience that you're trying to reach. And the basic rule for findability is easy: write something relevant and "mark it up" (apply HTML tags) with the correct semantics:

tags usage
h1, h2, h3,
h4, h5, h6
for headers
p for paragraphs
table, caption, col, th, tr, td for true tables
ul, ol, li for numbered and bulleted lists, as well as grouped navigational aids (menus)

Beyond this, all that's needed is a good title and a good description meta tag. Finally, don't waste time over doing it with the keywords meta tag—search engines just can't be goosed with keywords anymore.

All the effort expended on link-exchange programs and other techniques to boost page rank are wasted if you haven't got your markup done properly.

Web accessibility

Let's face it, none of us are like the Six Million Dollar Man with bionic eyes. The number of people with some type of color-blindness is about one in twenty, and the number of tech-savvy "baby boomers" who now need to wear bifocals is in the millions. But web accessibility encompasses much more than just visual acuity, your next web-site may also need to be designed for these needs:

If your web site isn't designed for people with disabilities, you'll soon discover that your visitors are simply going someplace else.

Meta-semantics

A collaborative effort, loosely emerging around the buzzword "the semantic web" has begun to evolve the purely syntactic markup capabilities of HTML into new descriptive markup capabilities. Some of this uses the concept of microformats, an HTML extension set that allows document elements to be declared as objects with globally agreed upon meanings (address book entries, groups of people, equipment parts lists, etc).

But for this new type of markup to work on more than just toy problems, industry groups will need to agree on standards that are meaningful and productive towards meeting their own business needs. When that happens, they will likely leverage other technologies such as Resource Description Framework (RDF), Web Ontology Language (OWL), or Extensible Markup Language (XML).

The semantic web will be built by progressive business, non-profit, and government organizations working on one definition at a time. Ready to get started?