Lesson 19  Span

Today we’re getting another tag. It’s a useful one as it does something none of the others do. All of your other tags basically create a div on the page, a section all to themselves. You can right click on a section and choose inspect (on Chrome) and you’ll see your code there. Click on part of your code and it will highlight the section on the page. It will go all the way across the page.

We never added line breaks in our code. The next heading or the next paragraph was just automatically on the next line with a convenient little space between them.

Span lets us put something on the same line. Let’s use our lesson9 code and add span to it.

Macedonia

Germany

Turkey

Poland

I could write <h3> Macedonia Germany Turkey Poland</h3> and they would all appear on the same line. But what if I wanted to be able to click to each one to see photos? I would need each one in a separate tag so that I could give each an ID to link to.

<span id=”Macedonia”>Macedonia</span>

<span id=”Germany”>Germany</span>

<span id=”Turkey”>Turkey</span>

<span id=”Poland”>Poland</span>

They will all appear on one line! It won’t look pretty at this point because there will be no spaces, but hopefully you can see that this will come in handy.

I show a different way to use the span tag in the video.