Semantics

Anything that has to do with the semantic web.
There are 11 articles published in this category. Please try the search if you can't fint what you're looking for.


One reason why headings are important

Tuesday, August 12, 2008

WTF is the Start-Attribute Deprecated?

Wednesday, December 05, 2007

I make sure my markup is always 100% valid XHTML 1.0 strict. I hate it when my little Tidy-icon isn't green and happy but yellow, or even worse, red from use of invalid or deprecated elements or attributes.

I recently added pagination to most of my sub-content widgets which you may have noticed, but it doesn't make much sense that the first article in the list of top rated articles on page 2 has the number 1 in front of it. Here's where the start-attribute comes in.

The start-attribute allows you to specify at what number an ordered list should start. This is exactly what I need in this situation but for some fooked up reason the start-attribute is no longer valid in strict doctypes.

I decided to ignore the fact that it is not valid XHTML 1 strict and use it anyway. I only use it in the case where the list doesn't start at 1 (so you'll never see a start="1" in the code) which means the first page is still error-free. But should you navigate to page 2 of any sub-content widget with javascript disabled you will experience invalid (X)HTML. I say with javascript disabled, because if you have js enabled that content is fetched with ajax and inserted with js so your validator won't notice the invalidity of the code.

I've read that instead of the start-attribute you're meant to use CSS-counters. I've only played around with them once before and for the #top-rated-articles ol to be different from page to page I would have to add a class specifying which page the list is on. Why is that better than a real attribute that does exactly that? And what about user-agents that don't support CSS? Should they not get the same information? Of course they should.

One div[id] per Module

Sunday, November 25, 2007

A way I structure my markup more and more is one div with a semantic id-name around each module on the site. In almost all cases that's all you need to use divs and ids for, but you still see plenty of sites out there that suffer from class-and-id:itus.

With a (unique, obviously) id in a containing div around every module, styling it from CSS or scripting it or any of its children using Javascript becomes a breeze. Especially if you use a JS-library that supports CSS-selectors, like jQuery.

Something you see often is HTML like this:

<h2 id="recent-news-heading">Recent News</h2>

<ul id="recent-news-list">
    <li><a href="#">Bla di bla</a></li>
    <li><a href="#">Bla di bla</a></li>
</ul>

If you wrap those elements in a div#recent-news, you'll be able to access them from both CSS and JS through simple selectors (#recent-news h2, #recent-news ul). Granted it is a tad slower (2 function-calls rather than 1) to fetch them with JS than if they have ids, but I prefer to keep my HTML clean and completely separated from the other two layers.

<div id="recent-news">

    <h2>Recent News</h2>

    <ul>
        <li><a href="#">Bla di bla</a></li>
        <li><a href="#">Bla di bla</a></li>
    </ul>

</div>

Besides, it makes your code look nicely structured in firebug if all you use ids and divs for are wrapping your modules :) Hopefully soon we'll be able to move all "grid-divs" (like #content, #sub-content, #etc) from out HTML to our CSS using the advanced layout module, that will be sooo sweet.

Using a Logical Document Outline

Tuesday, November 13, 2007

Using the 6 different heading-elements is very important for both SEO and accessibility but many websites out there completely ignore to use them or use them in a, to me, illogical way.
Many times people ignore to use them for, what I believe are, obvious headings and will simply use a strong-element (em and b are common as well) instead.
To me any kind of text that describes what a section of your site is about is a heading. If you check the source of exscale.se you will notice that I use headings in almost every one of my modules. "Recent Comments", "Most Popular Articles" etc are all headings in my opinion.

The Web Developers Toolbar-plugin for Firefox has a feature called "View Document Outline" which will give you an outline of the headings in your document. It complains if the document does not start with a h1 (as it always should) and if a heading following another heading is anything but 1 higher, 1 lower or equal to the heading-level that preceded it.
Therefore I believe the following statements to be true:

  1. There must never be more than 1 h1 per document
  2. The h1 must appear before any other heading
  3. It is illegal to follow an hx element by anything but a hx, hx+1 or hx-1-element. (In other words a h2 -> h4 structure would be invalid)
  4. An hx heading is a sub-heading to any preceding hx-1 heading and a super-heading to any following hx+1 heading

So, if you can only use one h1 per document, and any following h2 will be a sub-heading to the h1 then the question "what is a heading to the entire site?" arises. My answer: the name of your site. The name of your site is the only thing that can be considered a super-heading to all other headings in the document. And every other heading in your document should be a h2 (unless of course it's a sub-heading to one of your h2s).

Here's what exscale.se's document outline looks like (pretty much):

  • h1 exscale.se
    • h2 Navigation
    • h2 Recent Articles
      • h3 A recent article
      • h3 Another recent article
        • h4 Sub-heading to recent article
    • h2 Search
    • h2 Recent Comments
    • h2 Poll

To me that makes perfect sense. If "Search", "Recent Comments" or "Poll" were anything but h2s they'd be sub-headings to "Recent Articles", which, obviously, isn't correct.

The way I see it is, use h1 for you site's title. Place it before any other heading in your document. Use h2 for other headings (unless, of course, they are actually sub-headings to an h2 in which case they should obviously be h3s (and so on..)).

I do it like this because to me it makes sense. Loads more sense than placing random h3s or h5s in your document based on how valuable you believe they are. At least if you do it like this you have a reason. On many sites that use headings the author simply seems to have picked randomly what he felt was a good heading for that section. This way there are logical rules for which heading to use.

How do you do it? What do you think about this approach? Do tell.

100% Valid XHTML Database Output with Markdown and HTMLEntities()

Wednesday, November 07, 2007

Editors not knowing HTML and messing up your markup can be a big problem for you if you care about validation.

There are numerous WYSIWYG editors out there, but most of them produce absolute crap code, and if you want valid and semantic XHTML they simply will not work.

Markdown is an absolutely brilliant text-to-HTML converter that everybody can learn in minutes.
In fact, you don't have to do anything special at all to produce semantically correct, valid XHTML 1.0 Strict (or HTML if you prefer).

The syntax for adding basic HTML-elements such as headings, lists and images takes about 2 minutes to learn, and is very similar to the way you add meaning to your emails and IM messages, using underscore for emphasis etc.

The problem with Markdown if you use it for user-input (as well as your own) is that it allows any type of HTML-code to be inserted. Of course this is not optimal for comments and other data anybody can submit.

Together with the PHP-function htmlentities(), however, you can always be sure to get 100% valid output.

Download NiceString and demo-files

Using display: table to Create Full Width Navigations

Saturday, November 03, 2007

Sometimes you need a navigation to span the entire width of its parent:

Full width navigation

Because all types of navigations are nothing but lists of links they should always be marked up with the unordered list element (ul) with each navigation-item in its own li-element.

A very common way to display the list of links horizontally is to float each li-element to the left which will make them all appear on one row, but the total width of a row of floated elements is determined by the elements' margin, padding, border and contents so you have no real control over the width of your navigation-bar (unless, of course, you set a fixed width to each li).

Using the CSS display-property together with its table, table-row and table-cell values you can make an unordered list behave like a table and easily make the navigation-items take up the full width of your site.

Markdown Heading Level PHP Function

Tuesday, August 07, 2007

If you use Markdown-syntax for articles/comments or whatever like I do you know that the #-symbol defines a heading.
But depending on where an article is displayed on a page you may want to adjust the heading-levels.
On exscale.se for example the maximum allowed heading-level for an article on the index-page is 4 (<h4>). This is because the title of the article on the index-page is a <h3>.

I've created a little php-function that adjusts markdown heading-levels to whatever the user wants, so that the same article can be displayed on different pages where heading-levels aren't the same.

Creating Pipe-Separated Menus with Unordered Lists

Sunday, May 27, 2007

Pipe-separated menus are quite common over the internet, especially for footer-navigations.
As we all know, menus are simply lists of links and should therefore be marked up as such. Even so you see plenty of footer-navigations that are marked up with nothing more than the paragraph-element and the separating character is actually in the source code.
Thanks to the :after pseudo-element we can add the separator using CSS, and it's very simple.

Bra CSS-Menyer

Sunday, March 11, 2007

Med den här guiden ska jag försöka förklara hur man med CSS kan bygga menyer som kan se ut i princip hur som helst, utan att använda något mer än de obligatoriska HTML-elementen ul, li och a.

Jag har sett många exempel på dåliga CSS-menyer, och ska nu försöka bevisa att man sällan behöver förstöra sin HTML med en massa divs och spans för att göra snygga menyer.

Vill du kolla in koden direkt kan du göra det här.

Den färdiga menyn i exemplet ska bli såhär: Horisontell List-Meny Med CSS
Men kan enkelt ändras till vilket utseende som helst genom att ändra bilderna och tweaka CSSn därefter.

100% Class-free code!

Wednesday, November 22, 2006

I'm proud to announce that from now on exscale.se is 100% class free. Thanks to > + :first-child :last-child etc I recently removed every class i used to have and i still have control over every element on the entire site.

There is one exception tho, if u use [ code ] (without the spaces) to insert a code block, that paragraph of code gets the class "codeblock".
Because there is no way for me to know where a p.codeblock might appear in your comments and because i can't be arsed to add #comment-XXX p + p + p {/* codeblock styling... */} every time a comment (or post for that matter) contains a code block this is still necessary.

Google Start Page Valid and Strict

Sunday, October 08, 2006

Yea, like so many others i also made google's start page XHTML 1.0 valid and strict. I initially planned to recreate the entire start page with all the "stuff-boxes" (Google Videos etc) but couldn't be arsed.

Check it out



Post It

From June 02 to April 23

  1. Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
  2. Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
  3. Fuck canvas is cool, I've started playing around with old 3D-shit again :)

July 2014

S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31


Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

The style switcher allows you to change the look and feel of exscale.se.
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Categories


Random Quote

Kommer alla vara där eller kommer tex Scott vara hemma? - Boode


Random Images




Answer This!

What level CSS-coder are you?


Blog Roll