Learn your XHTML tags

Aimed toward users who want to clean up their articles or seeds and make them more appealing, this reference will teach you how to make use of the XHTML at your disposal.

I've been seeing a lot of articles (and some seeds) lately that look very sloppy and can easily be fixed by using some of the XHTML tags allowed. Although I expect most tech-savvy Newsviners to already know what these tags do, I was surprised to see that there was no reference to these tags on the site. So, to help out a bit, here are some XHTML tags for all of you article authors and seeders that will help make your posts more appealing and therefore keeping members on the page:

Links <a>

Mainly used for links and anchors. However, for the purposes of Newsvine articles, they will only be used for links. Using a tags are simple yet effective. They allow you to assign certain text to point a link, rather than having a long URL in your article.

Example

I love <a href="http://www.newsvine.com">this</a> website.

Result

I love this website.

Bold Text <b>

Used to make certain text bold. Although it acts the same as the "strong" tag, proper XHTML conventions say that this tag should be used just to make things bold, not to place a strong emphasis on text. Note: The bold element is deprecated in proper XHTML. However, Newsvine will still accept the tag.

Example

I enjoy reading posts by <b>Newsvine Blog</b>.

Result

I enjoy reading posts by Newsvine Blog.

Block Quotation <blockquote>

Used for quotations. When posting a seed or article, you would put anything not said by you inside blockquote tags.

Example

I read the following from my physics book:
<blockquote>When charges flow through a surface, they can be positive, negative, or both. It is conventional to give the current the same direction as the flow of positive charge.</blockquote>

Result

I read the following from my physics book:

When charges flow through a surface, they can be positive, negative, or both. It is conventional to give the current the same direction as the flow of positive charge.

Line Break <br>

Used to create a line break in text. This tag acts as the "Enter" or "Return" key does in word processing. XHTML makes it mandatory to close your "br" tag. Although Newsvine will do this for you if you forget, it is best to get in the habit of writing your line breaks as <br />

Example

Here is my first paragraph.<br><br>
Here is my second paragraph.

Result

Here is my first paragraph.

Here is my second paragraph.

Code <code>

Used to place code in a post. Anything can be placed between these tags, but it was created for code. All text between these tags will be rendered as font Lucida Console size 9.

Example

The following is an example of Java code:
<code>for(int i=0; i<=10; i++) sum+=i;</code>

Result

The following is an example of Java code:
for(int i=0; i<=10; i++) sum+=i;

Definition List <dl>, Definition Term <dt>, Definition Description <dd>

The three of these tags are all used together to make a list of definitions. The "dl" tag starts the actual list of definitions, similar to "ul", the "dt" tag defines the first term to be listed, and the "dd" tag is the definition of that term.

Example

<dl>
<dt>The Wire</dt>
<dd>A continuously updated stream of articles from The Associated Press and ESPN.</dd>
<dt>The Vine</dt>
<dd>A stream of content submitted by members of the Newsvine community.</dd>
</dl>

Result

The Wire

A continuously updated stream of articles from The Associated Press and ESPN.

The Vine

A stream of content submitted by members of the Newsvine community.

Deleted Text <del>

Used to describe something that is no longer applicable. This tag renders text in a red font color and with a strikethrough.

Example

<del>Newsvine is still a private beta.</del>

Result

Newsvine is still a private beta.

Emphasized Text <em>

Used to place emphasis on certain text. All text between these tags will be rendered in italics. It is true that this tag produces the same effect as <i>, but it is more proper to use <em> when text should be emphasized.

Example

I <em>really</em> love cheese.

Result

I really love cheese.

Headings <h2>,<h3>,<h4>

Used for special headings on pages. Regular XHTML allows for six different headings, but I'm assuming the others are being used up by different aspects of the Newsvine page layout. The only thing to remember for these tags is that the order of sizes (from largest to smallest) is h2, h3, h4.

Example

<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Result

Heading 2

Heading 3

Heading 4

Italicized Text <i>

Used to render text in italics. It produces the same effect as the "em" tag, but shouldn't be used for emphasis.Note: The italics element is deprecated in proper XHTML. However, Newsvine will still accept the tag.

Example

Normal text. <i>Italic text.</i>

Result

Normal text. Italic text.

Inserted text <ins>

Used to describe text that has been recently inserted in an article (usually after an edit). The text is rendered in a green font color.

Example

<ins>UPDATE: Breaking news</ins>

Result

UPDATE: Breaking news

Ordered Lists <ol>, Unordered Lists <ul>, List Items <li>

The three of these tags pretty much go together. Use the "ol" tag to produce an ordered, numbered list. Use the "ul" tag to produce an unordered, bulleted list. The "li" tag is used to define the items inside the list. This is probably one of the most used XHTML tags here on Newsvine that don't involve links or rendering text.

Example

<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>
<ul>
<li>First list item</li>
<li>Second list item</li>
</ul>

Result

1. First list item
2. Second list item

• First list item
• Second list item

Paragraphs <p>

Used to sort text into paragraphs. This tag, in its original form, is not needed while making Newsvine posts, but special styles may be of use. The two most used styles for paragraphs used on Newsvine are "leadin" and "copyright".

Example

<p class="leadin">This is the summary of your article that goes at the top, usually to hook readers.</p>
<p class="copyright">If you are using an image or article that you are not the original creator of, use this copyright style to give credit where it is due.</p>

Result

This is the summary of your article that goes at the top, usually to hook readers.

If you are using an image or article that you are not the original creator of, use this copyright style to give credit where it is due.

Preformatted Text <pre>

XHTML, as many other programming languages do, ignores white spaces. However, any text between "pre" tags will display how they are typed. The text will also be rendered in Lucida Console size 9.

Example

This white           space is gone.

<pre>This white         space remains.</pre>

Result

This white space is gone.

This white         space remains.

Quotations <q>

Similar to the "blockquote" tag, but it renders text differently. Instead of indenting the text and styling it in a little box, the "q" tag will simply put quotation marks around the quoted text.

Example

Our great president once said, <q>I can only speak to myself.</q>

Result

Our great president once said, I can only speak to myself.

Strong Text<strong>

Renders text the same as the bold element. However, unlike the bold element, the strong element is used to put strong emphasis on certain text.

Example

I <strong>REALLY</strong> love cheese.

Result

I REALLY love cheese.

Questions and comments are welcome. If you have any ideas how I can improve this reference, let me know!