Step 4: Text

What’s a website without content, right?! Our next step, is to be adding some text to the sample file, which sounds easy enough, but you have many options available to you now.

Adding text to your website

Because you have various ways of adding content to your site now, I’ll start by showing you two in the sample file. These are the most commonly used so far:

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Whatever title of your file</title>
</head>

<body>

<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>

<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online.
</div>

</body>

</html>

The bold bits are newly added. The italic bits is content you can replace with your own.

<p>-element and <div>-element

You can see I’ve used two different ways to add text in this example. I’ve used <p> and <div>.

The <p>-element should look familiar as it’s already used in my old HTML course, but the difference, this time, is that you are required to open and close the element to embed the content. The <p> stands for paragraph, which means any content you nest within the element, will be surrounded by white space above and below. This happens by default.

The <div>-element stands for Division. It doens’t automatically add any white space (which is great!). It’s also the most commonly used as it usually is attached to a stylesheet (CSS) that determines how the content is supposed to be marked up, but even where the div should be positioned on the website. The cool thing about using CSS in combination with the <div>-element is that you can also stack various divs on top of each other.

No more (center) alignment allowed

The old <center>-tag has been removed from HTML5. You won’t be able to use it anymore. This also counts for the align-attribute you may know from newer versions of HTML. So the following codes are longer supported in HTML5:

<p align=”center”></p>

or

<div align=”center”></div>

If you want to align text, you’ll have to use CSS now.

Learn more about dealing with text in the next step

 

 

Bookmark the permalink.

Comments are closed