Div and span basics

Source: All text from my notes taken during the www.codecademy.com/ HTML & CSS path.

  • Divide up your webpage for easy styling with
  • Select pieces of text and change their properties using tags

One of the most versatile structure tags available to you is the

tag. Short for “division,” <div> allows you to divide your page into containers (that is, different pieces). This allows you to use CSS to style different parts of your website individually!

The smart use of <div>s will eventually allow you to create visual HTML objects like sidebars, menus, and more.

Just like with images, you can make<div>s clickable by wrapping them in<a></a> tags.


While <div> allows you to divide your webpage up into pieces you can style individually, <span> allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in <span></span> tags and make them red using CSS!

Color is just one attribute you can selectively change with <span> tags; you can also change font size, font family, and any other style attribute you can think of!



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s