Confusion Among People Over Headings
People often confused that heading and header both are similar or same things, but in actual they are not. The heading can’t be your header but vice versa is true as one can find a heading in the header. You often see and notice while using HTML that the heading is pretty much simple in nature just like a title. It is structured by using heading tags, like H1, H2, and H3 etc.
Understanding Headings In WordPress
In WordPress, usually the H1 heading is meant for the Blog title found in the header or masthead of a page. The H2 is meant for the post title, the comment title and the sidebar while the H3 heading is usually located in the comments, although because of different themes, it may be replaced by the H2 heading.
The H1 Heading
You can found the H1 heading inside the header, which is known basically as the masthead of your webpage theme and most of the time it features the bloginfo() template tag:
|
1 |
<h1><?php bloginfo('name'); ?></h1> |
Its style information can usually be found in the style.css file in your Theme folder.
|
1 |
h1 {attributes} |
or
|
1 |
#header h1 {attributes} |
You do even often looking onto replace the header with an image, but it can be done by adding the following to your style.css header reference or in the header.php template file style which being listed in the head section.
|
1 |
h1 {display: none; font-size: 150%; color: white....} |
The H2 Heading
You can locate the H2 headings at various places throughout the WordPress themes, mainly at the post title, in the comment title and in the sidebar or menu although styling an H2 heading can get a little bit complicated.
|
1 2 3 |
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 110%; color: green; font-weight: bold; } |
– OR –
|
1 2 3 |
#comments h2 {font-size: 90%; color: yellow; font-weight: bold; padding: 2px; background: green; border: solid 1px navy; } |
– OR –
|
1 2 3 |
#sidebar h2 {font-size: 85%; color: navy; background: transparent; font-weight: bold; border-bottom: dashed 2px yellow; } |
Analyzing the above H2 heading, you will notice that each one is styled completely differently. Using as per the first example, you will get the same thing as the way it look alike. But, just by putting an ID or Class selector in front of the H2 tag, the look can be modified. It’s totally on you to finalize the way by which you want to see it.
The H3 and H4 Headings
Writing longer posts is what you wish to do, and then using headings will work as a perfect option for you in order to separate the section. You can use post section headings as you write your post and for the purpose you generally use your h3 and h4 heading tags, with sometimes you may even use headings from h4 to h6.
Although these headings sometimes not comes as pre-defined, but you will often find them in the comments. To check whether they are being used or not, it’s simple to check in your style.css with a search for h3. If in case, it has not been used there, and then you can create the one yourself or if it is there, use the h4 tags and so on.
To use them, simply manually type in the tags around the various section titles with double spaces before and after, result of doing this will let WordPress to know itself to add the paragraph tags when generating the post.
Photo Credit: Flickr/Christine Rondeau