HTML basics

Tables in HTML

In past tutorials we’ve looked at ways to present text, images and create links in HTML. In this tutorial we’ll look at how to create a simple table to use in your web projects.

What tables look like

This is a table. It has two rows.
It has two cells in each row. We’ll look at how to create this.

Table tag

The first thing we need to do to create a table is create a table tag. Tables in HTML are elements that need to have closing tags for each opened tag, so be careful. With the table tag, we’re just telling the browser that we’re going to be starting a table when we open it and ending a table when we close it.

<table>
   <!--We need to add more tags here to make our table work--!>
</table>

This code won’t display anything yet, we’ll need to specify the number of rows and cells (data) and add content to our cells to have a proper table. The text in the middle of our table tags is a comment. We’ll be looking at HTML comments in greater detail in our next HTML Basics tutorial.

Rows

Once we have our table tags, we’ll need to nest tags to specify the number of rows we want in our table. Luckily the tags are tr, for table row, and easy to remember.

<table>
   <tr>
      <!--We'll add cells here--!>
   </tr>
   <tr>
      <!--We'll add cells here--!>
   </tr>
</table>

Cells/Data

Now we just need to add the cells into the rows of our tables and we’ll be ready to go. We’ll be nesting the table data tags inside the row tags in our table to create a working table.

<table>
   <tr>
      <td>Here's their first cell in the first row</td>
      <td>The second cell in the first row</td>
   </tr>
   <tr>
      <td>Here's their first cell in the second row</td>
      <td>The second cell in the second row</td>
   </tr> 
</table>

Once we add the cells in, our table looks like this:

Here’s their first cell in the first row The second cell in the first row
Here’s their first cell in the second row The second cell in the second row

Common problems

Don’t forget that you’ll need to close each of the tags you use to create your table. The tags also have to be nested within each other in the right order. Data tags sit inside row tags which rest inside the table tags.

Have questions about tables in HTML? Ask in the comments below or find me on Twitter.

HTML Basics: Adding Text in HTML

We’ve already learned how to add links, images and linking images using HTML. Today we’ll look at how to add different types of text in HTML. All the HTML tags we’re using today will need two tags to create an element, an opening and closing tag.

Paragraphs

Creating segments of text in paragraph format is as easy as enclosing your text in paragraph tags. A paragraph element needs to be enclosed in paragraph tags, so be sure you start your text with an opening tag and finish with a closing tag.

 <p>This is an example of a paragraph element in HTML</p>

This is an example of a paragraph in HTML

Headers

Headers allow you to create larger, more prominent text for emphasis. Headers can make your page more readable for your users and can help direct search engines to the most important keywords or content on your page. There are 6 headings tags, with <h1> being the most prominent. Use this for your most important heading. Use the <h2> for your second most important heading and so on, through <h6> Below are examples of the different headers in HTML with how they appear on the page beneath them.

 <h1>This is the most important heading on my page</h1>

This is the most important heading on my page

 <h2>I'll use the h2 tag for my second most important heading.</h2>

I’ll use the h2 tag for my second most important heading.

<h3>This is the third most important heading on my page.

This is the third most important heading on my page.

<h4>If I'm using the h4 tag, I have at least 4 headings of different levels of importance!</h4>

If I’m using the h4 tag, I have at least 4 headings of different levels of importance!

 <h5>I don't think the h5 tag is used commonly.</h5>
I don’t think the h5 tag is used commonly.
 <h6>This is the least important heading on my page</h6>
This is the least important heading on my page

Don’t use the headings tags to create bold text on your page, the <strong> tag is better suited for bold text. Don’t forget to close your heading tags. If you don’t close them, they’ll make the rest of the text that follows them appear as part of the same heading.

Bold

To create bold text text within a paragraph, you can use the <b> or <strong> tags. Don’t forget to add a closing tag when you want to switch back to non-bolded text.

 <p>This is <b>bold</b> an so it <strong>this</strong>.</p>

This is bold and so is this.

Italics

There are also two ways to create italic text. You can use the <i> or <em> tags.

 <p><i>This</i> is in italics. <em>This is too!</em>

This is in italics. This is too!

If you have any questions about how to create paragraphs, headings, bold or italic text in HTML, ask in the comments below or find me on Twitter.

HTML Basics: Image links

We’ve already learned about how to make regular and nofollow text links in HTML and how to use the <img> tag to add images to your webpage. Today we’ll combine these to create images that link to other content. We’ll be linking to Cafe Loki, a great restaurant in Reykjavik, using a photo of their coffee.

Linking with images

To review, a text link looks like this:

 <a href="http://www.loki.is/">Cafe Loki</a>

And we can add images using the <img> tag:

<img src="/wp-content/uploads/2014/03/coffee.jpg"/>

To create our image link, we just need to combine these HTML elements. Delete the anchor text in the link and copy and paste the image element in its place.

 <a href="http://www.loki.is/"><img src="/wp-content/uploads/2014/03/coffee.jpg"/></a>

When we copy and paste our image element into the space our anchor text had been in, we get this:

Alt text in image links:

Tags and values in HTML are often nested, or set within each other. To create an image link you next an image element within a link element. To create an image link with anchor text, nest an image element with an alt value within the link.
example of nexted HTML elements in image link

If we wanted to add the alt text “coffee and ice cream from Cafe Loki” into our example, it would look like this:

<a href="http://www.loki.is/"><img src="/wp-content/uploads/2014/03/coffee.jpg" alt="coffee and ice cream from Cafe Loki"/></a>

Have more questions about image links in HTML or other basic HTML topics? Ask in the comments below or find me on Twitter.

HTML Basics: Images in HTML

Yesterday, we looked at how to create text links using HTML. Today, we’ll learn how to use the img tag to add images to web pages.

Adding images in HTML

The <img> tag is used to introduce image elements in HTML. This tag is simpler to use than the tag we’ve learned for links, as the <img> tag doesn’t need a separate closing tag to complete the element.

html elements of images in html

Image location

To add an image to your website, you’ll need to give the location of the image in your img tag. Using someone else’s images by adding the URL of their image to an img element on your site is called hotlinking and isn’t considered polite. Host images you intend to use on your site yourself, if you haven’t been given permission to hotlink to someone else’s images. If the image is on another website, you can add the image by linking to the full URL of the image. If you’ve uploaded the image to your own website, you can use either the full URL of the image or you can exclude parts of the URL that the image shares with the page it sits on.

For example, I can add the following image:

By using either of the URLs below.

<img src="http://closetoclever.com/wp-content/uploads/2014/03/coffee.jpg"/>
<img src="/wp-content/uploads/2014/03/coffee.jpg"/>

ALT text

Alternative text or alt text is text associated with a web image the describes the image. Originally developed for use with screen readers for the visually impaired, alt text is also used by search engines to determine the content of images on a page. Including relevant alt text for images can be part of an effective SEO strategy. Including alt text is as easy as including the alt value to your img tag, with your alt text in quotation marks.

this is an example of alt text

Have more questions about images in HTML or other basic HTML topics? Ask in the comments below or find me on Twitter.

HTML Basics: What is a link?

We’ve talked about why links matter in search engine optimization. Today we’ll look at what a link is and how to create a regular text link or nofollow link on your website.

What is HTML?

Web sites are written in HTML (HypertText Mark up Language), a language which is interpreted by web browsers to display the sites you see on the web. HTML is made up of a number of elements, representing different values. These elements are enclosed in tags. Tags are often paired, with one tag beginning an element and a closing tag ending an element. You can see the HTML that make up this page by viewing the source code for this page (Control + U in Firefox or Chrome or Command + Option + U in Safari).

What is a link?

A hyperlink, or link is like a door from one website to another. Links may be text, images or redirects. We’ll be looking at text links. Links can connect users to other pages or content on the same site or to another site on the web. A text link looks like this when viewed in your browser but in HTML the same link looks like this:

<a href="http://www.example.com/">this</a>

Parts of a link

Simple text links are made up of anchor elements, a reference, the target URL and anchor text. The opening anchor tag starts the link element. The reference points the link at the target URL. The target is the webpage or content that the link will bring the user to when clicked on. The target URL should be enclosed in quotation marks. The anchor text is the text that users can see and click on.

what is a link

Nofollow links

Search engines use links as a part of their decision making process when they decide rankings in search results. Links are like a vote of confidence from the webmaster that creates the link. But what if you want to link to a business competitor, or someone else that you don’t want to lend a vote of confidence to? You can use add the nofollow value to links to tell search engine bots to skip those links in their calculations. To mark a link no follow, just add rel=”nofollow” inside the opening tag of the anchor element.

<a href="http://www.example.com/" rel="nofollow">your nofollow link</a>

Questions about text links? Ask in the comments below or find me on Twitter.