CyberD.org
C:\ Home » Archive for "Code" (?) (Page 7)

Why Use <code> When There's <pre>?

The <pre> tag defines pre-formatted text. Text used within this tag has a fixed width, IOW it uses a mono-spaced font, usually courier.

It looks like this.

The <code> tag works similarly, though it's written specifically for code. It looks like this. Occasionally I post some code on the blog, and every time I wonder... which tag should I use to include it? I usually settle for code... since that's what I'm posting. Reading the basics anew I started wondering, why use code when there's pre? What's the difference? Why did W3C add an extra tag with the same properties and manner of display?

It turns out there is a difference! The <code> tag is meant to be used for inline code that can wrap and the <pre> tag for block code that must not wrap (see example above). Additionally, you could wrap the <pre> tag around a <code> tag to turn the inline code into a block (but never vice-versa). This might be extra useful if you've styled the code element through CSS or JS to display it in numbered rows, or a different color, or something fancy that makes it look like kind of like you're looking at the source code when you're seeing a page, but you don't want to make all code appear as a block. The <pre> tag can be used for many things other than code, too.

when I first included a line of code, I thought the <code> tag would take care of everything. That it would not only keep all tabs and spaces intact but also display all the tags in text form. Turns out this was not the case. When including code on a page, either the left or right bracket in a tag (or even better, both) must be replaced with &lt; or/and &gt; to remain in their regular text form.

Btw, if you want to show the code for the < and > brackets (&lt; and &gt;), you'll need to escape the & at the start of the code by using &amp;, like I did above. Just recently I wrote &amp;amp; so you could see the &amp;, but of course I had to add an &amp; so you could see both of them, which means I actually had three amps in a row. What you see is never really how it looks! Including code is complicated! :D

Firefox 2, Safari 2

Back in 2008, these two major browsers were stuck on their second edition. The latest versions right now are FireFox 17 and Safari 10. Time flies! But apart from the version numbers, has there really happened that much in the past 4 years?

Firefox 2 also introduced better support for feeds, inline spell-checking, support for SVG text (I'm curious about SVG btw, will post a blog about it later), resuming browser sessions, phishing protection and new windows opening in new tabs, by default! All of this is so common now it's hard to imagine what it was like earlier.

Safari 2 introduced integrated RSS, Atom and PDF viewing, as well as private browsing and parental controls. In a time before Chrome, those two latter features were way ahead of its time! Facebook overtook Myspace in 2008 though, so they were indeed needed features. Since then, only speed and functionality have been tweaked with each release, no remarkable new features.

It was a special year! It was also the year that Internet Explorer 6 came out, a popular browser at the time. It is also a browser which has lived much longer than it should, considering all the issues designers have had to face over the years while trying to optimize their sites to work properly on IE6. The other major browsers have never posed such major problems, and it took a while before IE finally caught up to the competition. Or has it? Maybe IE 10 will be just as much of an issue in another four years...

Citing Your Citations

I quote a lot on the blog, but for the most part I use the <blockquote> tag and not <q>. The latter is aimed at inline quotation; if I find a quote I want to post, it's not going to inline, it's going to be a point of focus deserving a block of its own. But moving to another matter, the one I was going to talk about in post, the <cite> tag. Who uses it? How do they use it? Why should you use it?

Apparently, there are quotations and there are citations. Quotations are verbal and citations are written. A quotation is something a person said, a citation is something they wrote. On the net, a citation is the title of something that person wrote, and the <cite> tag can be used to mark such a title within the text. The cite tag was formerly used in conjunction with a persons name, but now it's the publication that should be referenced; as the W3C so humbly put it...

A person’s name is not the title of a work — even if people call that person a piece of work...

It'll probably take a while before anyone starts using this tag on auto, though. Currently it's a more used attribute than it is a tag of its own.

The Future Of HTML & XHTML

I stumbled upon some wisdom today.

HTML is based on SGML. SGML is an old standard, and is used to define markup languages for all sorts of purposes. XML is also based on SGML, but is completely seperate from HTML. HTML allows for a much wider variety of SGML features than XML does. XML's main features are a very simple syntax and draconian error handling, which makes it suitable for marking up error-intolerant documents and also makes it very easy to learn.

During the XML craze of late 20th and early 21st century, someone has the idea of making an XML-version of HTML; XHTML. The idea was that, since XML was already being used a lot in various applications (such as vector graphics (SVG) and mathematical markup (MathML)), this would make it possible to easily extend the HTML page to natively include such additional elements.

The only problem was browser vendors and page authors. Page authors were told that XHTML was the new black, and that everyone had to start using it, or they'd miss the cultural revolution of Web 2.0. Nobody really knew why they were using XHTML rather than HTML, except everyone else was doing it. As a result, everyone did it wrong (and still do). At the same time, the browser vendors couldn't exactly built their web browsers so that they were incapable of displaying XHTML pages, as long as their competitors didn't do it as well.

The XML declaration is not necessary, unless you use XHTML 1.1 (which you shouldn't). With HTML 5 supporting the general concepts that originally gave birth to XHTML, XHTML will die a slow and painful death over the next 20 years. Until then, HTML 4.01 is still the latest standard advisable to public websites.

What Does The XML Declaration Do?

The doctype is obviously needed, but what the XML declaration? Why would that be required?

I looked around, and it's not. Without an XML declaration, the default for a XHTML document is XML 1.0 and UTF-8. UTF-8 is the standard, and XML 1.0 is used for XHTML 1.0, so if you are using XHTML v1.0 (which is the only version you can use for regular websites, since XHTML v1.1 doesn't serve as text/html) and the UTF-8 standard, there's no need for it!

So, save space and get rid of it if you're stuck in the habit. Or if you use a program like Dreamweaver to create and edit pages that automatically adds the declaration at the top of the page. It's actually better to omit than to include, since it can cause issues with IE 6, which is still, unfortunately, a commonly used browser on this planet.

Double Quotes With <q>

I read recently, that back in 2008 you could get double quotation marks in Firefox if you added quotations within a <q> tag, since FireFox generated them by default, whereas IE (the most popular browser back then) didn't output any quotes at all. So people either added quotation marks or didn't, and they would appear either without quotations in IE and with quotations in FF, or with quotations in IE and with double quotations in FF. The end result of this problem was that many designers stopped using the <q> tag to avoid any issues. The question is, is this still a problem today? The article was written at the time of IE 6, and it seems IE 8 has the same problem. Don't know about latter versions though. Maybe it's already fixed.

If not, I suppose the best option would be to create a stylesheet reset so that browsers can't add anything unwanted to your page, then you add the quotations, or not, as you wish. Here's another quick workaround I found which you could add to your CSS file:


q:before, q:after {
  content: "";
}

When adding a quote, you would then need to add quotation marks outside the <q> opening and closing tags for them to appear. If you don't want quotation marks, you wouldn't need to do anything, this CSS would get rid of them, on all browsers. Just so you know, this is how inline quotes appear here at CDB.

Privacy   Copyright   Sitemap   Statistics   RSS Feed   Valid XHTML   Valid CSS   Standards

© CyberD.org 2025
Keeping the world since 2004.