Back To Basics: Getting to Know HTML

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

As a blogger, you're probably acquainted with the concept of HTML, even if you don't use it on a daily basis. To put it as simply as possible, HTML is code written into a kind of text document used by browsers like Firefox, Chrome, and Internet Explorer to present text and graphics, arranging them into a format befitting a blog or website.

Understanding HTML can be really helpful if you'd like to have a bit more control over your content or compose your posts and pages in a plain text environment (our Edit HTML option in the Compose Editor), allowing you to manually add paragraphs, create links, and all sorts of other things. It's like learning a language that will help you feel more comfortable and fit right into the blogging world!

Getting Started

Since we're looking at HTML in terms of blogging, and Typepad has neatly arranged all the behind the scenes basics for you, we won't be going over the "bones" of what makes up a web page today. You can learn more about that sort of thing here, though - helpful stuff if you decide to get into using Typepad's Advanced Templates later on. Today we'll focus on things you can do within Typepad's Edit HTML tab in the Compose area, like creating paragraphs and adding links.

To practice your HTML, you can either use Typepad's Compose Editor (we recommend switching to Draft mode so you don't accidentally post any unwanted content to your blog) or use a text editor, like Notepad (typically included in your PC's operating system) or TextEdit (typically included in your Mac's Operating System).

HTML is made up of tags and content. The tags surround the content and give it meaning. When you look at Typepad's Compose Editor in Rich Text mode, you see your text and images the way you can expect to see them on your blog, which is called WYSIWYG, or What You See Is What You Get:

You're not seeing the HTML that makes up your content, because the magic happens behind the scenes with Rich Text. Switch over to the Edit HTML tab, though, and it's a bit like taking a peek behind the wizard's curtain:

There you can see the code for a link (outlined in red), and the code for the image (we'll get to that in another post!), along with the opening and closing paragraph tags (<p> and </p>). While working in Typepad's Rich Text tab is super easy, and appropriate for most situations, there are times when using the Edit HTML tab is the way forward, so knowing how to create paragraphs and add links will put you on your way to being an HTML pro.

Creating Paragraphs

A quick note about tags:

You'll start your code by opening the tag with a < > bracket, and close it with a < / > bracket. Once you open a tag, it must be closed or the formatting will spread to the content below (making everything italicized, for instance). There are two ways tags can be closed. Most of the time you'll use < / > (for instance, you'd use </a> to close a link). Every once in awhile you'll see <" / > though, usually with images. Properly opening and closing your HTML code is super important, so always make sure to pay close attention to your tags!

To create a paragraph, we use a p, surrounded by the < and > brackets. Surrounding your paragraph with an opening <p> and a closing </p> tells your browser where to start a paragraph, and where to end it and move on to the next. It looks like this when you type it out:

<p>"Who will help me bake the bread?"</p>

You can also add other code within a paragraph to make it stand out. Want to center your text? Try:

<p align="center">"Who will help me bake the bread?"</p>

You could always add a little emphasis to make your text stand out. Italics and bold are always a good idea, and they look a little something like this:

<p><strong>"Who</strong> will help me <em>bake</em> the bread?"</p>

Want to move down one line without starting a new paragraph? Just use the <br> tag!

Here's one line...
and here's the next!

Now you're ready to make your own paragraphs in HTML, so try it out by creating a test paragraph in the Edit HTML tab of your Typepad Compose Editor, or in a text editor!

Adding Links

Adding links to your blog posts is adding value to your blog posts. You can link to related content within your own blog, related content outside of your blog, or add a link that your readers can click to send you an email.

All links start with a bracket, an href, and a URL. The a is the "anchor," telling your browser hello, this is a link, href tells the browser you're about to take off, and the URL is the destination, telling the browser where to go once the link has been clicked.

But you can't just start a link without stopping it! You'll need closing tags that define where your link ends. Without them, any text that follows will also be linked, and nobody wants an entire post linking to instructions on how to make a pastrami sandwich. Your basic link looks like this:

<a href="http://www.link.com" target="_self">meowed the cat.</a>

You've got your anchor, your take off command, and your destination, and you're ready to send your reader on to another website. That's all well and good, but do you really want to send your reader away from your blog? Well sometimes, yes - especially if you're sending them to another area of your blog, like another post. Often though, you'll want to keep your reader there with you.

Making your link open in a new tab or window is easy as pie with the target="_blank" tag. Check it out:

<a href="http://www.link.com" target="_blank">meowed the cat.</a>

No, really, try it out!

Sweet, right? Now your readers can check out your link in another tab or window, then close it up when they've finished, allowing them to go back to your post in a snap.

Want to create an email link that will open up a new mail window when clicked? That's simple with the mailto: tag:

<a href="mailto:hello@typepad.com">Email me!</a>

You can also add a link title attribute for usability and accessibility, which can help provide extra information, or make reading your blog easier on people who are using visual browsers. Check it out:

<a href="http://www.typepad.com" title="I love Typepad!">Check out this link!</a>

Want to see it in action? Just hover your cursor over the link below and take a look at what pops up:

Check out this link!

Now you're ready to try adding a link, so go back to your test paragraph and link away!

Creating paragraphs and adding links are two great ways to get started with HTML if you've never tried before (or even if you need a refresher!), so we hope you've had fun and learned a bit! Stay tuned for the next article in our Getting to Know HTML series. We'll be teaching you all about adding images to your posts! Have questions or want to add to the conversation? We'd love to hear from you in the comments!

Comments

[Anastasia]

I hope I deserve an A+ !!! I have just created my first html code thanks to you and your concise and clear instructions. Just paragraphs and adding links at the moment. Looking forward to Lesson 2!!! Thank you Typepad!

[The Typepad Team]

You definitely get an A+ - great work!

[Jimmy Burke]

though i kinda know html and this was not news to me, it's good to see that you guys care and try to teach the community stuff like this, keep it up ;)

[Brandy Vargas]

Thank you for this series! Excited to keep learning!

[Melanie]

Thanks, Jimmy! We're going to be covering more advanced topics soon, as well as CSS in the next few weeks, so let us know if there's anything you'd like for us to cover! :D

[Melanie]

Thanks, Brandy! Let us know if there's anything in particular you'd like to see us cover!