Back to Basics: More Advanced HTML

March 26, 2014

Back to Basics HTML

Welcome to our special series on getting to know HTML! Every other week, we've debuted 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: part 1, part 2, part 3, and part 4.

We have covered some of the basics of HTML over the last few weeks, but there are many, many more HTML tags. Here's a quick introduction to some more advanced HTML elements and how you would use them:

Anchor tags are added within the content of a webpage to allow readers to jump to various sections of the post. We use this element often in the Knowledge Base as you can see by visiting this article and clicking a link in the list. Additionally, we have a great tutorial on Anchor Tags in the Knowledge Base.

Script tags are seen in widgets and ads and other dynamic elements added with HTML. For example, if you were to configure the Twitter Timeline widget, you would be provided with a block of HTML including script tags that you can copy and paste into the custom sidebar module. You likely won't need to write your code which includes script tags, but you may see it frequently when adding third-party content to your blog.

Embed tags are commonly used to embed audio and video players. Example: <embed src="http://example.typepad.com/weblog/files/video.mov" height="315px" width="460px" autostart="0"></embed>

Iframe tags are also used to embed content, and if you embed YouTube videos, for example, the share code uses iframe tags. Example: <iframe width="560" height="315" src="http://www.youtube.com/watch?v=N1FNL_iIp5c" frameborder="0" allowfullscreen></iframe>

In our next special series of posts, we will be discussing the basics of CSS to make changes to design elements. CSS uses HTML tags to group together a section of content which can then be formatted using CSS, so it's helpful to understand div and span tags and their associated attributes.

Div (short for division) tags are used to group a large block of content. The content surrounded by div tags is block-line which applies paragraph like formatting with a line break above and below the content.

Span tags are used for small blocks of content typically within a larger paragraph. The content surrounded by span tags is in-line, or inside a paragraph.

The attributes for span and div tags are id and class.

The id attribute is used to identify one element.

The class attribute can be used to classify multiple elements.

Like all HTML tags, it is important to make sure to open and close all div and span tags. An open div tag can cause major display issues on your blog, so make sure every <div> has a corresponding </div>.

Here's an example of how you would use div and span tags:

<div class="author-quote">
<p>To read well, that is, to read true books in a true spirit, is a noble exercise, and one that will task the reader more than any exercise which the customs of the day esteem. <span id="author">Henry David Thoreau in <em>Walden</em></span></p>
</div>

In the next series on the basics of CSS, we'll explain how to then use CSS to make formatting changes to the elements in the div and span containers.

We have certainly not provided a complete list of HTML tags in this series, and we've only touched on some of the tags. A wealth of information is available online, and you'll also find HTML generators that will guide through the process of getting the proper HTML without the need to hand code it. Let us know if there is some HTML you want to learn about in the comments, and we'll write up additional tutorials.

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.