HTML Coding #2: Content Tags

IMPORTANT: Make sure to do the previous coding tutorials before this one. Search HTML on the search bar at the left, or click here.

(Sorry about the picture clarity! Snipping Tool is only so great…)

Now that you know the basic structure of HTML, you can move on to some more specific tags.

Not much really goes in the <head> section, since none of it really shows up on your page. One thing you want in the <head> section, however, is the <title> tag.

Anything you put in the <title> tag will show up in the tab area, at the top of the window.

02_title

Otherwise, as you may have seen, it would show up as your file location. D:\\HTML\My_First_Webpage\ isn’t a very attractive name, is it?

That’s the only head section tag you’ll need for a while. Every time you start a webpage, make sure to add the title. Now, for some content tags (body tags).

The major one is <p>. If you blog, you might see a “p” in the bottom of your blogging window, right above the preview button. That’s because whenever you click enter, you close the previous <p>, or paragraph, tag and open a new one. Wordpress automatically does this for you when you’re in the Visual section (in coding language, we call that “What You See Is What You Get”, or WYSIWYG. This just means that whatever shows up in the WYSIWYG screen will show up in the finished post, word for word.) When you go to the HTML section (accessible at the top of the blogging window), this changes. The things you type don’t always show up, and whenever you make a tag (if you remember, it’s a packet of directions for the computer that’s identified by surrounding it by < >), it will work like in Notepad++.

Back to the topic. Whenever you type content, it’s a good practice to put it in <p> tags. That way, if you want to make a space (since clicking “Enter” or “Tab” doesn’t make an effect on the actual content, as you may have noticed), all you have to do is close the first <p> and open a new one.

02_withoutParagraph02_withParagraph

Another major content tag is the header tag. This is defined by <h1>, <h2>, <h3>, and so on until <h6>. As the numbers get higher the smaller the text gets. Whatever is between your header tags (the opening header and the closing header must be the same level: <h1></h1>) will show up boldened and a certain size (depending on the level). <h3> is about normal text level, but is boldened.

02_header

I guess <h3> is slightly bigger than general text, but <h4> is smaller.

You can barely even read <h6>! Since these are so small, headers past <h3> aren’t very useful.

Now you know about some basic content tags. Go ahead, try to make your own webpage.

(PS: For those extra-credit kind of people, use <br> to make a line break. This only makes one line break, unlike the <p> tag which has 2 line breaks. Don’t close this tag. Certain tags, like <br>, don’t need to be closed.)

Lesson #3: Images and Links is out now! Click here to check it out.

Advertisements

3 thoughts on “HTML Coding #2: Content Tags

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