Articles tagged with “xhtml”

Here is a list of all articles tagged as “xhtml”. If you enjoy the high-quality content that I provide here at Perishable Press, you may want to subscribe to our main content feed to stay current.

WordPress Tip: Valid, SEO-Friendly Email Permalink Buttons

In addition to your choice collection of “Share This” links, you may also want to provide visitors with a link that enables them to quickly and easily send the URL permalink of any post to their friends via email. This is a great way to increase your readership and further your influence. Just copy & paste the following code into the desired location in your page template:...

Better WordPress Archives via Dynamic Triple Column Layout

Here at Perishable Press, the number of posts listed in my archives is rapidly approaching the 700 mark. While this is good news in general, displaying such a large number of posts in an effective, user-friendly fashion continues to prove challenging. Unfortunately, my current strategy of simply dumping all posts into an unordered list just isn’t working. I think it’s fair to say that archive lists containing more than like 50 or 100 post titles are effectively useless and nothing more than a usability nightmare. With growing numbers of blogs building ...

Targeting External Links Intelligently

In the beginning... In the time of the dinosaurs, HTML authors controlled the way anchors opened by adding target="_blank" as an attribute on an anchor tag. Then the molten mass of Internet began to cool into the thin crust of Web 2.0, the continents began to separate and there came a great migration of pages from HTML to the shinier, new XHTML. Most authors didn’t know what that meant, but it had an “X” in it, so it must be cool, they thought. Alas, there came a great despair as the beloved target="_blank" attribute ...

Valid, SEO-Friendly Post Translation Links

Ever wanted to provide automatic language translations of your web pages without installing another plugin? Here is a valid, SEO-friendly technique that takes advantage of Google’s free translation service. All you need is a PHP-enabled server and you’re good to go. Just copy and paste the following code into the desired location in your page template and enjoy the results. Once in place, this code will produce translation links for eight common languages for every page on your site. Grab, gulp and go: &langpair=en%7Ces" rel="nofollow">Translate this page to Espanol...

How to Write Valid URL Query String Parameters

When building web pages, it is often necessary to add links that require parameterized query strings. For example, when adding links to the various validation services, you may find yourself linking to an accessibility checker, such as the freely available Cynthia service: WCAG Accessibility Check Another example is seen when linking your feed to a feed validation service: RSS Feed Validation And one final example showing a more complex query string: Bookmark at Delicious As is, however, these links won’t validate due to a number of issues. Let’s fix ‘em up with a few quick-and-easy changes. Replace ampersands with & One of the reasons these links aren’t ...

Fully Valid, SEO-Friendly Social Media Links for WordPress

With the explosion of social media, networking, and bookmarking services, there are a zillion ways to add “Share This Post” functionality to your WordPress-powered sites. In addition to the myriad services and plugins, we can also add these links directly, using nothing more than a little markup and a few choice PHP snippets. Such individual links provide full control over the selection, layout, and styling of each link without requiring the installation of yet another WordPress plugin. This article shares SEO-friendly code snippets for ten ...

Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS

Recently, I have been getting a lot of requests for multiple-loop configurations in WordPress. It seems that multiple-column, multiple-loop configurations are in high demand these days, especially ones that display posts like this: First column, first loop: display posts #1-5 Second column, second loop: display posts #6-10 Third column, third loop: display posts #11-15 Using WordPress and a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to the chase.. Step 1: Multiple-Loop, Multiple Column PHP Configuration The first thing we want to do is replace the standard WordPress loop with the following code: // FIRST LOOP: display posts 1 thru 5...

Choosing the Best Title Separators

While writing my previous article on creating the perfect WordPress title tags, I deliberately avoided discussing the use of separators in titles. I feel that the topic is worthy of its own article, enabling a more thorough exploration of the details. Title separators are the symbols, punctuation, and other characters used to distinguish between various parts of the page title. For example, a title may include the blog name, post title and blog description, with each element separated by a hyphen. Any Google search will reveal that some of the most commonly ...

Does Google Hate Web Standards?

Consider the Google home page — arguably the most popular, highly visited web page in the entire world. Such a simple page, right? You would think that such a simple design would fully embrace Web Standards. I mean, think about it for a moment.. How would you or I throw down a few lists, a search field, and a logo image? Something like this, maybe: Google Web Images Maps News Shopping Gmail more Video Groups Books Scholar Finance Blogs YouTube Calendar Photos Documents Reader even ...

Quick Reminder About Downlevel-Revealed Conditional Comments..

NOTE: This entire article amounts to nothing more than an in-depth learning experience. After writing the article, I realized (painfully) that either format for the second iteration of the downlevel-revealed comment for XHTML is perfectly fine and displays no ill effects or unwanted characters in any browser. Thus, this article is essentially useless, but I am posting it anyway because I just hate deleting several hours of hard work.. As more and more people discover the flexibility, specificity, and all-around usefulness of Microsoft’s proprietary downlevel conditional comments, it behooves us to reiterate the importance of utilizing proper syntax. Specifically, for ...

Content Negotiation for XHTML Documents via PHP and htaccess

In this article, I discuss the different MIME types available for XHTML and explain a method for serving your documents with the optimal MIME type, depending on the capacity of the user agent. Using either htaccess or PHP for content negotiation, we can serve complete, standards-compliant markup for our document’s header information. This is especially helpful when dealing with Internet Explorer while serving a DOCTYPE of XHTML 1.1 along with the recommended XML declaration. According to the ...

How to Display Your Twitter Posts on Your WordPress Blog

Alright, time for another “How’d-you-do-that-thing-on-your-site?” post. This question comes from the one and only Mr. Graham of ImJustCreative.com. In a recent email, Graham literally begged me to share my “secret recipe” for displaying my latest Twitter Tweets (wow, did I actually just say that?) right here on Perishable Press: ...Would be really really decent of you if you could let me know how to do it? Pretty please? How do you call the last twitter feed, what commands do you need etc? In case you have no idea what we’re talking about here, scroll down to the bottom of any page on the ...

CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu

Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the ...

XHMTL/CSS Remix: Creative Commons License

Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the XHTML code, I began snooping around in the pages’ CSS files. Eventually, I found myself rewriting the entire CSS and XHTML files ...

What is the Difference Between XHTML 1.0 Strict and XHTML 1.1?

As some of you (e.g., Louis) may have noticed during the recent site redesign, I decided to switch the default doctype from XHTML 1.0 Strict to XHTML 1.1. Just in case you were wondering, XHTML 1.1 is different than XHTML 1.0 in three important ways 1: On every element, the lang attribute has been removed in favor of the xml:lang attribute On the a and map elements, the name attribute has been removed in favor of the id attribute The “ruby” collection of elements has been ...

Open External Links as Blank Targets via Unobtrusive JavaScript

Beginning with this article, I am serving up a short series of unobtrusive JavaScript functions that I use to enhance the functionality of Perishable Press. In this post, I present a comprehensive JavaScript method of opening external links in new windows (or tabs, depending on the browser). One way of opening links in new windows is to insert the HTML target="_blank" attribute into all necessary anchor elements (). This method works well, but generates validation errors when used with XHTML-Strict doctypes. A better solution is to employ some unobtrusive JavaScript to progressively enhance your documents with ...

Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom

By now, everyone is familiar with the Yahoo Developer Network’s 14 “best-practices” for speeding up your website. Certainly, many (if not all) of these performance optimization tips are ideal for high-traffic sites such as Yahoo or Google, but not all of them are recommended for smaller sites such as Perishable Press. Nonetheless, throughout the current site renovation project, I have attempted to implement as many of these practices as possible. At the time of this writing, I somehow have managed to score an average 77% (whoopee!) ...

New Mobile CSS Styles for Perishable Press

The amount of time I spend surfing the Web from a mobile device has steadily increased since the acquisition of my new favorite mobile device. Unfortunately, many sites have yet to implement (or even consider) support for mobile devices. Without proper formatting, such sites are virtually useless, requiring unnecessary download times, displaying unreadable pages, and serving unusable content. Given the inevitable ubiquity of mobile access to the World Wide Web, providing reasonable support for handheld browsers is becoming increasingly important. Without it, your site is left looking incomplete and unprofessional when viewed from mobile devices. So, with that said, today I ...

Absolute Horizontal and Vertical Centering via CSS

Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue: [...] the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area ... Apparently, because the horizontal/vertical centering method outlined in our ...

Bare-Bones HTML/XHTML Document Templates

In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes: Document Templates XHTML 1.0 XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML Basic 1.0 XHTML 1.1 XHTML 1.1 XHTML Basic 1.1 HTML 4.01 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset Doctype Declarations In addition to the complete document templates listed above, this post also ...

Rethinking Structural Design with New Elements in HTML 5

[ Keywords: html, design, markup, structure, elements, header, footer, article, section, header, nav ] HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (CSS). Indeed, in many documents, the new elements will structure the document while providing enough hooks to render obsolete previously required divisions, classes, and identifiers. Let’s take a look.. New Structural and Semantic Elements ...

Unicode Character Reference for Bloggers

[ Keywords: unicode, utf-8, encoding, character, reference, quote, copyright, bullet ] Virtually every article written here at Perishable Press requires at least one or two “special” characters. Some of these characters — such as quotation marks, hyphens, and dashes — are very common, while others — such as the copyright symbol, bullet, and arrow — happen less frequently. As a blogger, I find myself repeatedly using a select handful of very common special characters. Very rarely do I ever find myself blogging a latin “Ä” (i.e., capital letter “A” with a diaeresis). To save time and effort, I need a quick reference ...

Wrapping Your Head around Downlevel Conditional Comments

[ Keywords: downlevel, conditional, comments, hidden, revealed, positive, negative, ie ] If you think you understand the logic behind Microsoft’s downlevel conditional comments, you are sadly mistaken. Sure, they seem simple enough on the surface, but as you really try to wrap your head around how and why they work, the subtle complexities of downlevel conditional comments may leave you dazed and confused... In our previous article on Internet Explorer’s exclusive browser-detection method, downlevel conditional comments (DCC), we present an introductory exposition, defining expressions and providing several generalized code examples. Overall, it ...

The Friendliest Link Targets in the Neighborhood

The target attribute for anchor elements () specifies the location in which the referenced document should load. For example, to open a link in a new window, we would use a target value of _blank. Although this is a commonly employed technique, the target attribute has been deprecated by the W3C and is not valid (X)HTML. Regardless, the target element remains a useful tool for practicing designers and developers. Here, we present the attribute values for the target element: Attribute values for the ...

Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page Redesign

[ Keywords: Microsoft, MS, IE, DNS, 404, CSS, Error, Monzilla, Explorer, redesign ] Default DNS Error page for Internet Explorer First of all, congratulations if you are geeky enough to understand the title of this article. Many would be like, "CSS, MS.. IE, error ..what..?" Whatever. If you get the title, you will get the point of this utterly pointless exercise. If that is the case, prepare for a delightful romp through geekland. Otherwise, save your precious time and stop reading here (exit strategy). Well, okay, for the seriously unenlightened, let us explain the object of ...

← Previous posts • Scroll up