More HTML Elements

Other elements and tags

As you learn more web development, you’ll see tons of other tags.

Here’s a preview of some of the tags you’ll encounter. Again - you don’t need to know these ones. Remember that you can look them up later!

Stylized text elements

There are lots of elements for particular kinds of styled text.

Here’s some of the tags, but without examples. Don’t try to memorize them. Instead, skim them, and then remember that you can always go back and look up the right element to use for a particular situation.

  • <code>: used to style blocks of code.
  • <pre>: used for text that has been pre-formatted, like a poem, where the spaces are already there. Otherwise, spaces, tabs, and newlines all get collapsed by the browser.
  • <small>: Small text
  • <u>: Underlined text
  • <i>: Italicized text
  • <s>: Text with a strikethrough, like this
  • <q>: “quoted text that fits within a line”
  • <blockquote>: A block quote, usually multiple lines
  • <mark>: Highlighted text
  • <del>, <ins>: Text that’s been deleted or inserted
  • <sub>, <sup>: Subscript (subscript) and Superscript (superscript)

<div>, <span>: Generic Elements

In a previous lesson this week, we talked about semantic elements. Sometimes, you don’t know which semantic element to use. <div> stands for “division” and it’s a generic block of HTML. <span> is a generic “span” of text characters, inline with some other text. If you don’t know another element that’s more appropriate, you can use one of these instead.

See the Pen div and span by Rob Cobb (@rrcobb) on CodePen.

Structure and Page Information

When you create an HTML project, your editor might suggest a bunch of default starter HTML in index.html. You will usually not need to write these tags yourself, but here’s what they mean in case you were curious.

List: Structure and Page Information tags
  • <!DOCTYPE html> isn’t actually an element. It goes at the top of a file to say that it’s HTML.
  • <html> is the ‘root element’ of an HTML document. All of the other elements should be inside it.
  • <body> is where all the page content should go - everything you see on the page.
  • <head> is hidden metadata. It’s data about the webpage that doesn’t show up on the screen.
  • <title> is the title of the page. It’s what shows in search results and in the browser tab.
  • <meta> is for various other metadata about the page. There’s lots of types, which you can read about on MDN.

Read more on MDN about page metadata

Multimedia and Embedding

We talked about multimedia elements previously. As a recap, it is good to to know that there are lots of tags for including media on a webpage.

List: Media tags

<iframe> is for embedding external site content onto a page

<audio> for an audio recording

<video> for a video recording

<canvas> is an element where you can draw shapes programmatically. Used for animations and games!

<object> is an element for embedded content, like a pdf or a video.

Read more on MDN about multimedia and embedding

Forms

There is a whole set of HTML tags that are all about forms, here’s the list as a preview:

List: Form tags

<form> is for creating a form and grouping all the elements inside as part of the form

<input> represents an input. There are lots of different types of inputs!

<button> is a button, like a Next or Submit button.

<select> shows a dropdown

<option> is for the items in a select dropdown, like <li> is for items in a list

MDN has several pages on Forms.

MDN Element Reference

Those are the core elements you’ll encounter.

For the full listing of HTML Elements, check out the MDN Elements Reference.

Happy Elementing!