HTML Guide for Beginner DNN Users

Have you ever gotten so frustrated with trying to style content in DNN that you just completely started from scratch… more than once?  Perhaps you are trying to create a bulleted list and the paragraph below the bulleted list just will not get itself out of being indented.  Or you are trying to unbold something by clicking the ‘B’ tool and it just will not unbold itself. 

Often times, a simple HTML fix behind the scenes can save you a lot of styling headaches.  But when you look at the source, you may not know exactly what to fix.

Let me offer you some very basic HTML tips.  You can find a little cheat sheet at the end of this blog, that you can print out and keep in your working area.

Common HTML Issues in DNN:

The Paragraph and Div tags:  <p> and <div>

Each section of content should either be surrounded by a <p> paragraph tag </p> or a <div> div tag </div>.  Both of the tags must have an ending tag.  So if you have two paragraphs of text that will not separate, when looking in the source, make sure they are separately surrounded by either a paragraph or a div tag.

The Line Break: <br />

Most HTML tags have a beginning tag and an end tag.  One common exception to that is the line break tag <br /> .  The break tag starts and ends itself.  This tag adds 1 line break to your content.

The Bulleted List:  Unordered <ul> and Ordered (or numbered) <ol>

The bulleted list issue is a common one.  You either want to bullet an item or un-bullet and item and DNN just will not let you.  A regular bulleted list starts with a beginning <ul> tag (or unordered list) and ends with a closed </ul> tag.  The actual items should be surround by a beginning <li> tag (or list item) and an ending </li> tag.  So if you view the source of your content and you see a paragraph of text within the <ul> </ul> tags and you don’t want it indented, you can just simply cut and paste it outside of those tags and surround it with a beginning and ending paragraph tag:  <p> paragraph here </p>

Bolding or the Strong Tag: <strong>

The other common issue is bolding text.  Often times when you paste from word, you will get carried-over HTML formatting that you don’t want (sometimes even if you’ve used the Paste from Word feature in DNN).  One of the most common ones is the <strong> tag.  The <strong> tag takes the place of the deprecated bold <b> tag.  The <strong> tag should be opened and closed </strong>, so if you see a beginning <strong> tag with no properly placed end tag, all you have to do is just type the ending strong tag in your source like so:  </strong>

Good HTML vs. Bad HTML

If you are pasting directly from Word, and you see a TON of HTML when you view the source code, then you are doing it wrong.  Refer to my previous blog which gives you instructions on how to paste content in correctly:  DNN and Pasting from Word

This blog will actually show you visual examples of good code vs. bad code.

Last but not least:  view and print this handy HTML Cheat Sheet on the next page…

Spiffy Web Team’s HTML Cheat Sheet