HTML Reference

While it's recommended that you learn more about HTML and CSS via other sources online, here is a brief introductory guide to some basic funtions in HTML.

HTML Syntax

Like grammar is to writing, the HTML syntax lays out the ground rules that makes the whole thing work. It's a lot simpler than grammar rules though!

  • Rule #1: There are two kinds of HTML tags. Single tags such as the <img> or <br /> tags only have one component. Most format-related tags on the other hand, for instance the bold text tag, require both an opening and a closing tag.

  • Rule #2: Close tags in order from the innermost to the outermost. For instance, if you write a line with <b><i> "some text in here", the order of the closing tags should be </i></b>

  • Rule #3: Don't forget your quotation marks! Tags such as the <img> tag or the <a> tag (among many others) have various options you add inside the tag. The option you select must be enclosed in " "s inside the < > brackets. For example, a link to the You-fic front page would look like this: <a href="http://you-fic.net">Click here</a>. The "href=" is the option type, and the website address is the option.

  • Basic HTML tags

    For creative writing, these are the most basic of formatting tags you'll ever need.

  • Bold text - Just wrap the text you want to make bold in <b> </b> tags.

  • Underline text - Just wrap the text you want to underline in <u> </u> tags.

  • Italic text - Just wrap the text you want in italics in the <i> </i> tags.

  • The "break line" - To move the text to a new line, use the single tag <br />. If you want to add an empty line between two lines of text, just add a second <br /> tag.

  • Indenting text ( &nbps; )- Because of the way HTML works, you can't just hit the space bar five times to indent the first line of a paragraph. What you can do however, is use the "non-breaking page space", which is an HTML special character. Essentially, the &nbps; tells the browser to put a single empty space. In an HTML editor, " &nbps; &nbps;&nbps; &nbps; &nbps; " gives you "           "

  • Lazy formatting with the <pre> tag: To make text display exactly the way you typed it, you can wrap it in the pre-format tags (<pre> </pre>.) Any text contained in pre-format tags will maintain all the spacing in the text; much like when you type in a word processor. You'll still need to use the bold, italic, and underline HTML tags to achieve those effects however.

  • Inserting images

    "That's all well and good," you might be thinking, "-but what about putting pictures in my work?" Welcome to how the <img> tag works!

  • The <img> tag requires a source- that is, a web address to the image you want to use, for example "http://www.yoursite.com/images/pic01.jpg". You can't use an image that is on your computer with this tag, the image must be on the internet somewhere. There are a number of excellent image hosting sites you can use, such as Photobucket, Imageshack, or Tinypic.

  • Once you know the address of the image, the tag should be written to look like this: <img src="http://www.yoursite.com/images/pic01.jpg" /> Be sure to include that src= part, because without it, the tag will not work!

  • If you want to be extra-proper, you can add the image's size (by adding width="#ofpixels" and height="#ofpixels"). It would make the img tag look like this: <img src="http://www.yoursite.com/images/pic01.jpg" width="600" height="500" />

  • Lastly, not everyone uses a browser that can display images. (For instance, text-readers for blind users.) To help give people an idea of what the image is if they can't see it, you can add the alt attribute to the img tag. This will make your tag look like this: <img src="http://www.yoursite.com/images/pic01.jpg" alt="This is a picture." />

  • The <div> and <span> tags

    At a glance, the <div> tag doesn't look like it does much. You can slap <div> </div> tags around anything; a paragraph, a block of text, an image, or anything else, and you might not even know it's there since all it does is add a line break after the closing tag. The <span> is even sneakier, as there is no line breaks or anything else visible on something enclosed in <span> </span> tags. However, these are both immensely useful as a way to group a block of website content, and coupled with CSS, they are a powerful design tool. You can find more info on the subject over in our CSS Guide.

    Adding links

    "So now I can make my stuff look good with HTML, but how in the blazes do I post a link on my journal or homepage to my latest story?" That's the last bit of info to be found in our crash-course intro to HTML, the <a> tag!

  • Most browsers nowadays will automatically detect a website address and turn it into a link. For instance, there is no tag applied to this, yet it's quite likely your browser will read it as a clickable link: http://you-fic.net

  • If you want to make some text into a clickable link, this is where you use the <a> </a> tags. Like the img tag, the link tag requires a website address that it points to. For links, this will be the href attribute. As an example this line of text is done by entering <a href="http://you-fic.net">this line of text</a> .

  • And with this, you should have enough information to tackle the basics of HTML text formating. There are several resources available for free online with lists of HTML tags and tutorials on using them. Nothing beats actually taking a class in web design, but you can teach yourself quite a bit of HTML on your own.