(X)HTML

Anything that has to do with (X)HTML
There are 13 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.

Skillnaden Mellan Attribut, Tagg Och Element

Friday, June 29, 2007

Verkar som att det fortfarande är lite oklart för vissa vad taggar, attribut och element egentligen är.
Man hör ofta saker som "alt-taggen" och de allra flesta säger tagg när det ska vara element.

Jag har gjort en fin liten bild här som illustrerar skillnaderna och hoppas att de som läser det här och lär sig något börjar säga rätt.

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.

CSS Boxar Med Rundade Hörn, Toning Och Skugga

Thursday, May 24, 2007

I denna korta artikel tänkte jag beskriva ett sätt att bygga boxar med rundade hörn, skuggor och toning med enbart en div och ett rubrik-element.

Boxen kommer såklart vara flexibel i höjd, men däremot ha en fast bredd. Krävs flexibel bredd så krävs fler än 2 bakgrundsbilder, vilket då (i nuläget) kräver fler än 2 element.
Om några år (förhoppningsvis) så kommer browsers ha stöd för flera bakgrundsbilder i ett element, och då kan vi bygga hur avancerade boxar vi vill med en enda div, men i dagsläget får vi antingen nästa div:ar, eller nöja oss med fast bredd.

Boxen i exemplet kommer att se ut såhär:
CSS box med rundade hörn
Men kan som vanligt enkelt ändras genom att pilla lite i CSS:n och ändra bilderna.

Boxen kommer bestå av två bilder, den ena placerar vi i div:en, och den andra i rubrik-elementet.

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.

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

The Ultimate Website Pt. 2

Sunday, April 02, 2006

Please note: "Ultimate" is only ultimate for so long. And I don't exactly do it like this anymore, but I still believe it's an OK beginners-guide to building a dynamic, easy-to-update web site.

If you haven't read part 1 of this article, i suggest you do so before you continue reading.

So, we have the main-structure for the "Ultimate Website". But it doesn't look very fancy does it? Here's where the CSS comes in.

The Ultimate Website Pt. 1

Wednesday, March 29, 2006

Please note: "Ultimate" is only ultimate for so long. And I don't exactly do it like this anymore, but I still believe it's an OK beginners-guide to building a dynamic, easy-to-update web site.

After having programmed PHP, (X)HTML and CSS for a few years now, I've finally come up with a website-structure that I'm satisfied with. A website that uses valid markup, dynamic PHP and a completely CSS-driven design. So it can be used over, and over again with very little changes.



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

conwincdence, i think not. - christus11


Random Images




Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)


Blog Roll