Random HTML tags


There are a lot of HTML tags that aren't used very much, but are still fun to know about.

pre

To include code in your web page, use the <pre> tag:

<pre>
This is how to make things <b>bold</b>!
</pre>
This is how to make things bold!

abbr

The abbr tag is used for showing an abbreviation:

I love <abbr title="Hypertext Markup Language">HTML</abbr>

I love HTML

Hover your mouse over the abbreviation to see what it stands for.

sub and sup

sub and sup are used for subtext and supertext:

In school I learn about x<sup>2</sup> and H<sub>2</sub>O.

In school I learn about x2 and H2O.

iframe

iframes let you include a webpage in another webpage. It doesn't always work because some webpages don't want other people to include their page in an iframe.

<iframe src="http://christian.gen.co/" width="100%" height="300px"></iframe>

blink and marquee

Never ever use these tags - they are terrible and super annoying. I refuse to show you how they work.

Audio

The audio tag is used to put audio into a webpage:

  1. Find an .mp3 file, if its a video then extract the audio.
  2. Host the audio file online, you can use dropbox or soundcloud.
  3. Add the code below to your existing code.
  4. Add the file name in and your code should work.
<audio controls>
  <source src="" type="audio/mpeg">
</audio>

Every HTML tag

Here's a list of every HTML tag - there are a lot of them, but you really only need the ones we've covered here.

I'm holding back a few tags you will need later because they won't make sense until you learn CSS and Javascript. These tags are:

  • CSS: span, and div
  • Javascript: form, button, label, textarea, and input

Challenge

Make a page with at least two of these random tags.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

  • origamigirl3 • over 1 year ago

    Is there a tag that's used to make it where you can click on an image to open a link?

    Like Reply 1

Try this challenge on your own first, then come back here to see other people's solutions.