dw_docs | What HTML tags can I use on Dreamwidth?

I don't know whether you want general commentary; if no, I remain unoffended by being completely ignored. ;)

If your intent is in fact to explain how to use different tags, which it seems to be, then I think telling folks what the anchor tag is without a context example is rarely useful. Er: credential: I taught periodic html workshops for about 6 years starting before there were particularly usable WYSIWYG editors. The A tag is one that folks just never got without the whole link and the linked text. (e.g., <a> always gets an attribute explaining where the link is to, such as <a href="http://www.dreamwidth.org">Dreamwith</a>, which gets you Dreamwidth)

Also, your blockquote example is not, on my monitor, blockquotey.

Also also, while I agree that the h1-h6 tags are hierarchical headings, the description of them as largest to smallest and the example text are problematic because practically speaking, h5 and h6 look identical (on my monitor), so h6 doesn't look smaller than h5.

Uh, those last two could be style issues within the celerity site scheme, I suppose, in which case perhaps I should report them.

:)

A: it's more a "that" than a "how", but i'll take any help i can get, since what i know about html would fit into a very small thimble.

B: i can't get most of these to show their attributes -- including the ones you mention -- and I'm using tropo. Maybe this is a bug?

FYI, I use the celerity site scheme and neither blockquote nor small tags work. I haven't gotten around to checking if it's been reported yet. :)

I agree with the A tag. It's better to have A HREF and A ADDRESS as separate entries.

Although it's less accurate, I think it might be more *useful* to have an example of how <a href> works, rather than just <a>.

Some of them (eg, address, span), I can't see any use for on DW. On the other hand, if you're listing all the possibly tags then I guess they should all be there. Might it be worth breaking the tags into sections? Say, tables, lists, formatting, links and images, advanced?

For some others (eg, font, img) it might be useful to give an example of how they work.

Big, blockquote, q, small, sub, sup are showing as regular text, and h3 to h6 all look identical, for me (Firefox, with the pink site scheme).

The angle brackets in the xmp example aren't showing corrctly.

I'm not listing all the possible tags: just the ones that show at the bottom of the page when you go to make an entry, so these are the html tags you can use on this site.

I think the reason the angle brackets on the xmp example don't show correctly is because doesn't permit html to display. I'll fix that. I don't know why Big, blockquote, q, small, sub, and sup are showing as regular text. Really. It might be useful to do a second entry containing only the text formatting tags, but I also think there may be a need for an exhaustive alphabetical list. Opinions?

Span is actually supposed to be used in place of font, which is deprecated.

For example, a section of somewhat smaller text.

It's used to style a line-level (as opposed to its block level counterpart, <div>) section of an element, either through inline styles, or an entry in an external stylesheet.

If you mention that br can be used alone then it seems logical to me to do the same for hr and img. Also br or br /, img or img /, etc.? What's standard now?

<img> has two required attributes: <src> and <alt>.

So <img><src><alt>? Nah. Why the <>? And what scr and alt are for anyway? You might as well explain these too. Especially alt.

If I already know some HTML, alphabetical sorting is good but scrolling isn't. What about listing the tags without the explanations but linking them to the explanations?
If I don't know HTML then this I'm not sure what I should do with this list. Let's say I'm just interested in styling my text. How can I do that? Couldn't the tags pertaining to that topic be grouped together? *whines* See what I mean? ;)

Edited 2009-05-21 11:16 (UTC)

Hm. The tags already appear without explanations in a list at the bottom of every entry text-entering window.

And what scr and alt are for anyway? You might as well explain these too. Especially alt.

Oddly, "scr" and "alt" aren't listed among the permitted tags. So I'm not sure what use "img" is going to be...

Hm. The tags already appear without explanations in a list at the bottom of every entry text-entering window.

Can you tell me where? I don't see any list on Post an Entry, the Quick Reply text area or the Mini Bio in profiles or in the Custom Text module area.

But scr and alt aren't tags. They're attributes as you said.

I'm bemused at the moment, because I recall seeing them at the bottom of the "Post An Entry" page (in very light grey type) but now I'm not seeing them anywhere, no matter which of my accounts I log into (so obviously I'll need to do some more digging). It's from that location (wherever it is) that I just scooped the tags, which explains why it may seem to be a non-intuitive and incomplete list.

Ah-HAH! Here it is! When you hit "Preview" they show up: Allowed HTML: [a] [abbr] [acronym] [address] [area] [b] [bdo] [big] [blink] [blockquote] [br] [caption] [center] [cite] [code] [col] [colgroup] [dd] [del] [dfn] [div] [dl] [dt] [em] [font] [form] [h1] [h2] [h3] [h4] [h5] [h6] [hr] [i] [img] [ins] [kbd] [li] [map] [marquee] [ol] [p] [pre] [q] [s] [samp] [small] [span] [strike] [strong] [sub] [sup] [table] [tbody] [td] [textarea] [tfoot] [th] [thead] [tr] [tt] [u] [ul] [var] [xmp]

(Angle brackets replaced with [ ] so they'll display...

Edited 2009-05-22 03:12 (UTC)

Oh, I never use Preview. I don't even often post via the site.

Same thing for <cols> and <rows> tags.

They're not tags, they're attributes to be inserted into the textarea tag.

The xmp example prints as:

This is an example of text formatted with &#60xmp&#62 attributes

To complete others' reports:
Examples for small, big, blockquote and h3 to h6 look like normal text to me.

And I'm with matgb on removing deprecated tags from the list.

Edited 2009-05-21 13:30 (UTC)

Src and alt are attributes for the img tag. Src is absolutely required, or you won't get an image to show. Alt is required as a standards/accessibility thing (IOW, it's good form to include it, for those with images disabled for whatever reason), but the img tag will work without it. The "alt=" attribute also provides the tooltip text when mousing over an image.

The <img> HTML example should probably be displayed as something like <img src="image.png" alt="This is an image!"/> so that the user knows how to put the tag together.

As for the standards questions by

ninetydegrees, XHTML 1.0+ requires that all tags be closed, even self-contained tags. So <hr/> would be the proper form. HTML 4.0 doesn't require this of self-contained tags, but will accept XHTML format, and I find it better to be consistent, since it causes less confusion that way (especially for the casual user).

I also agree with the grouping idea. The alphabetical list is only good for the "what's this do?" line of thinking, which is generally the opposite of how one thinks when learning (X)HTML. Generally speaking, the person looking this stuff up will be thinking more along the lines of "how can I do this?" Also, even as an experienced web developer who knows what all the tags do, I found the list to be getting to the point of too long and distracting that it started becoming painful to read through. There's not much to differentiate between entries.

As far as the <h> tags go, it might be useful to provide more detailed explanation on another page about them. The heading tags don't always show up different sizes (and can be styled to not change size at all), but their significance goes beyond just visual size. They actually help non-graphical utilities (browsers, web spiders, etc) differentiate between sections and subsections in a web document. It's like the "Table of Contents" tool in MS Word, which uses the headings to create an outline to use as the ToC.

Credentials: Web developer for a respected consulting company, Bachelor degree in Computer Information Systems specializing in web development, and freelance web developer since 2000.

The "alt=" attribute also provides the tooltip text when mousing over an image.

No, it doesn't. That's the title="" attribute.

I stand corrected on that. Thank you.

Aha! I knew I wasn't crazy! Internet Explorer will use the alt="" attribute to provide a tooltip text if title="" is not present.

Whether or not it's supposed to is a different story, but in IE, it does.

In violation of W3C's specs, which is precisely the sort of usage we're trying to discourage here by providing things like "true" ALT attributes on user icons.

Indeed, but I knew I had seen it work that way before, even if it's against the W3C specs (and we all know how well IE follows W3C's specs).

If nothing else, it's good to know what browsers have what quirks.

These tag use examples were not displaying correctly on my screen:

big — A font-style tag, used to format text within a document. The big tag will format text as larger than the base font.

The sample big text appears no larger than the rest of the text.

blockquote — A font-style tag, used to format text within a document. The blockquote tag defines a long quotation. The browser will insert white space before and after a blockquote element. It also inserts margins for the blockquote element.

The sample blockquoted text doesn't have any more of a margin than the rest of the text. No space appears before the blockquote, and two spaces are after it.

H3 through H6 - These heading sizes look exactly the same - just bolded text.

q — A tag used to format text within a document. The q tag defines a short quotation. The browser will automatically insert quotation marks around text marked with q.

The sample text does not have quotation marks on my screen.

small — A font-style tag, used to format text within a document. The small tag will format text as smaller than the default text.

The sample text does not appear small.

"sub — A font-style tag, used to format text within a document. The sub tag defines subscript text. Subscript text appears half a character below the baseline.
sup — A font-style tag, used to format text within a document. The sup tag defines superscript text. Superscript text appears half a character above the baseline."

The sample text appeared no different from the other text.

Edited 2009-05-21 12:28 (UTC)

Given that DW is declaring pages as using XHTML transitional, and this is a new workover, perhaps encouraging people to use XHTML tags would be good?

For example, it shouldn't be {BR}, it should be {BR /}, same for IMG (and encouraging defined height and width would be good given image placeholders &c) and HR.

You've also mentioned that SPAN can be used for Javascript—given that this is stripped out from DW posts, that's misleading. I'd suggest an example using a style, so people can see what/how it's used as a lot of people don't know the basics of putting CSS into posts.

But overall, fair, several codes in there I'd never heard of, not sure if that's my lack of knowledge or because they're deprecated.

You guys might want to check the W3Schools (an educational website that tracks the W3C) and clear out the deprecated tags, since a lot of them (big, small, font, etc) won't work on a lot of modern browsers.

Hmm, W3schools says, "The <tt>, , , <big>, and tags are all font-style tags. They are not deprecated, but it is possible to achieve richer effect with CSS." And I haven't actually encountered a browser yet wherein, e.g., font and small don't work, but I stick mostly to FF and Safari.

Wow, I'm making a fool of myself today. I've actually yet to have big and small work (though looking back, that may have more to do with the context in which I've tried using them, on LJ and DW, where they don't seem to work, at least for me, since I don't normally use them in my standard development, in favor of CSS). It seems , , etc will be deprecated in XHTML 2.0, though (though that's a ways off still).

Even though it still works for the time being, font is deprecated, by the way.

I just checked with the w3 and preformat tags are still valid. Text tagged as preformatted does not display correctly as a monospaced font in Zesty, nor are the linebreaks appearing correctly.

/\__/\
(='.'=)
(")_(")

The tags pertaining to lists and the tags pertaining to tables should be grouped together.

I think that, for the formatting tags, instead of writing out what they do, perhaps just a list demonstrating their correct usage and then the affected text would be useful.

The thing where many of your examples of the formatting tags in use don't actually display correctly is a known bug, an effect of the extremely aggressive reset.css, see http://bugs.dwscoalition.org/show_bug.cgi?id=816 and http://bugs.dwscoalition.org/show_bug.cgi?id=1151.

It would be great to have an alphabetical list of the permitted tags, each one expandable so users don't have to scroll through the list. The alphabetical list would help semi-experienced HTML users who see the list of permitted tags and just want to look up that one tag they don't know.

But for most users, a grouped list will be much more useful. I suggest the following groups as useful for beginners: "Formatting", "Forms", "Images", "Links", "Lists", "Tables", "Other".

I agree with what I'm seeing here, which is that *other* differently-arranged lists of permitted tags would be useful as well. But the specific point of this list is to produce a one-stop shop for all the permitted-on-DW html tags (according to the bottom of the "Comment Preview" page, at least), with at least some hint of what they do (which, yes, could possibly be *more useful*, but I don't actually code, so I was working in the dark here...)

If it's that (a simple list, and it's very annoying that the bug won't let the font-formatting tags display properly) then is it most useful to have them in a "simple alphabetical" list for easy searching? Or should even the comprehensive list be separated by type, perhaps with an additional explanatory-and-introductory paragraph preceding each?

From sup onwards appears to have all the text in superscript in IE7.

Also, it would be good to add a note that using em and strong is better than i and b for screenreaders users.

And seconding the stuff about a href being much more important than a.

1. When I view this FAQ, all of the entries after SUP are in superscript. (Very hard to read of course....)

2. I'm pretty sure I qualify as a "naive user" of HTML. For me, just having an alphabetic list of codes with brief descriptions of what they do (when it's not self-evident) is the most useful. If something interests me I tend to hack&slash my way to using it, so this is a great reference guide & learning tool for me. ;-)

3. As a variety of people above noted, some of the code examples don't look any different than plain text on my monitor. I'm sure it mostly has to do with individual PC & software settings, tho', so I'm not going to bother specifying what unless someone asks for details. Feel free to ask if you want the info!

Thanks for your hard work! *I* appreciate it!

What HTML tags can I use on Dreamwidth?

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

P.S.

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

preformat tags

no subject

no subject

no subject

HTML FAQ

no subject