HTML Basics

HTML is not a programming language, it's a markup language. It's really rather simple. You use tags to mark up text, or in other words, to tell the web browser what the text represents. When an HTML file is loaded into a web browser, the tags disappear and the text is displayed according to the type of tag by which it is enclosed.

If you want to mark some text as a paragraph, you simply put it in a paragraph (p) tag.

<p>This is marked as a paragraph.</p>

Most tags have an opening (<p>) and closing (</p>) tag. Some examples:

<h1>This is a large header</h1>
<p>This is a paragraph.</p>

Some tags do not have an opening and closing tag. These self contained tags are called unary tags.

<br />
<img src="picture.jpg" alt="Funny Foto" />

When you have a tag nested within another tag, close the inner tag before you close the outer one. An invalid example:

<p><b>This paragraph is bold.</p></b>

...and a valid example

<p><b>This paragraph is bold.</b></p>

Some tags have attributes...for example, the href attribute of the anchor (hyperlink) tag:

<a href="http://www.google.com">This is a link to Google.</a>

We can tell <span class="differentText">this part of the text</span> to display differently.

You can reference CSS styles as well with ids or classes:

<h1 class="pageTitle">Intro to Genomics</h1>
<p id="navigationText">Navigation</p>

Some basic tags

Anchor Tag

Structure: <a href="targetURL" title="Hover Text">Link Text</a>

Note: The title attribute is optional

I attend <a href="www.byu.edu" title="Take a look at BYU's home page">BYU</a>.

Bold Tag

<b>This text is bold</b>

Break Tag

The break tag simply adds a line break, the equivalent of hitting enter on the keyboard.

This text is on one line<br />This text will show up on the next line.

Header/title Tag

<h1>This is a large title.</h1>

Image Tag

Structure: <img src="imageLocation" alt="Text that appears if image is not found" title="Hover Text" />

Note: title attribute is optional

Example:

<img src="images/italy.jpg" alt="Tuscany" title="A nice view of Tuscany" />

Italics Tag

<i>This text is italicized</i>

Paragraph Tag

<p>This is a paragraph</p>

Note: When you want to start a new paragraph, use a new <p> tag rather than 2 or more <br /> tags. Bad practice:

<p>This is the first paragraph.<br /><br />This is the second paragraph.</p>

Good practice:

<p>This is the first paragraph.</p><p>This is the second paragraph.</p>

Span Tag

<span class="someStyle">This text is styled with "someStyle".</span>