Let's learn HTML for Weasyl! part 2 by ManaPuddingFox

What are Headers?

Now it is time for the fun stuff! I figured the best thing to start with are headers. What's a header? Headers are elements that are usually large in size and/bolded. They are used for important headers. On normal websites, they are also used for SEO purposes. Search engines will look for the text that are in headers before paragraphs or on the page with no element around them. h1 is the most important. Usually, it is good practice to only have 1 h1 on a page, a few h2's, and the rest you have have a bunch of. I DON'T think that matters on a art site when it comes to SEO?

Headers should be used like titles. Think of a book, the chapter text is the biggest, the sub title is next biggest, then the text on the page is normal size. In html, that would be an h1 for the title, an h2 for the sub title, and a paragraph tag for the main body text.

Headers naturally have default styles attached to them. With CSS those styles can be changed, but since we cannot use inline styes with tags we won't get into that. headers naturally have:

  • Margin top and bottom (about maybe 20px for both?
  • Font weight being bold
  • Font size, depending on which header
  • Breaklines at the end (display block)




h1 - h6. What are the differences?

Besides the SEO reasons, it comes down to default size. h1 is the largest and h6 is the smallest (examples below). Using headers are really simple to use. It's a beginning tag, the contents, and the end tag.

The code for headers

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>


Displays as

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6




My personal preference

I like using just one h1 for my overall title, and some h2's through out. I like using h3's for sub sections within a section. h4-h6? I wouldn't bother using here. It's about the same size as normal text that I can just bold. On websites I use h4's and style the hell out of them. I LOVE headers and I encourage people to try them out!




TRY IT OUT!

Use the comments section to play with the headers code! Us all the headers! ALL OF THEM.

Part 1

Part 3

Let's learn HTML for Weasyl! part 2

ManaPuddingFox

24 January 2014 at 20:15:32 MST

Journal Information

Views:
594
Comments:
0
Favorites:
12
Rating:
General

Tags Modify

Edit Tags