Method 1: Does it make sense?
<span class="heading">Article title</span>
Although <span> can be a convenient tag in some situations, it does not convey the full meaning of the title. One advantage of using this method is that we can attach a CSS rule to it and assign it a heading class to make its text appear like a title.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
OK, now all headings are marked with heading class in large bold font and in blue. marvelous! But is this the right thing to do? What happens if someone views it with a browser that doesn't support CSS?
For example, what happens if the rules of the external style sheet we set are not supported by older versions of browsers? Or what if someone with visual impairments uses a screen reader to read this page? What a visitor sees (or hears) through these means should be no different than normal text on the page.
Although class="heading" adds a little meaning to the tag, <span> is still just an ordinary tag that can be modified by the default styling of most browsers.
Search engines will ignore the <span> tag when crawling this page, as if it does not exist, and will not give any extra attention to the keywords it may contain. We will talk more about the relationship between search engines and titles later.
Finally, since the <span> tag is an inline element, we may need to nest it within an additional block-level element, such as a <p> tag or a <div> tag, in order to make it form a separate line , which will further clutter your tags with unnecessary code. These additional tags are necessary so that browsers that do not support CSS can display the same text.
Method 2: Combination of <p> and <b>
<p><b>Article title</b></p>
Using a paragraph tag will give us block-level display, and <b> will make the text bold. But when using this method to mark an important title, we are faced with the same meaningless results.
Unlike method A, the <b> tag can make text bold in visual browsers—even browsers that don't support CSS. But like the <span> tag, search engines won't give higher priority just because something is bolded in a paragraph.
Difficult to style
Using the ordinary combination of <p> and <b> also brings another shortcoming - it is impossible to design this title to be different from other paragraphs. We may want to use a special style to highlight the title to make the page content clearer and more structured, but this method can only make it appear bold.
Method 3: Style plus substance
<h1>Article title</h1>
Well, what a great title definition. Most web designers are familiar with it. In fact, when used appropriately, <Hn> can provide a flexible, indexable, and styleable structure for page content.
This is also a smart way to define it, and you'll find it's pretty simple. No extra tags are needed anymore, and you could argue that this only saves a tiny bit more bytes than the other two methods, which is negligible, but a saving counts.
<h1> through <h6> represent six levels of headings, from the most important (<h1>) to the least important (<h6>). They are block-level themselves and do not require the addition of other elements to line them up individually. Simple, effective – just a great tool.
Easily customize styles
Because we use the <h1> tag uniquely, and the <b> or <p> tag is more suitable for use throughout the page, we can use a variety of CSS methods to style it.
What's more, a title tag can clearly indicate a title, even without the need for styling at all! Visual browsers display <h1> in a larger bold font. An unstyled page will display the document structure as expected, with appropriate heading tags to convey meaning.
Screen readers, PDAs, cell phones, and visual and non-visual browsers will all know what to do when they encounter a title tag, handle it correctly, and treat it more seriously than regular text on the page. With the <span> tag, browsers that don't support CSS won't treat it specially.
Annoying default styles
In the past, designers might have avoided using title tags entirely because browser defaults were so ugly. Or, avoid using <h1> or <h2> due to their huge default sizes, and instead use higher-numbered heading tags to achieve smaller sizes.
However, it's important to emphasize that we can easily change these title tags using CSS - for example, an < ;h1> doesn't have to be a giant tag that takes up half the screen. Later on, I’ll demonstrate how simple it is to style title tags with CSS, hopefully alleviating some of your overwhelming fears.
search engine friendly
This is a huge benefit. Search engines love title tags. On the other hand, a <span> tag or a regular bold paragraph tag means something less. Marking your titles appropriately with <h1> to <h6> requires only a little effort on your part, but makes your pages easier for search engines to crawl, so people can ultimately find them.
Search engine bots will give special attention to title tags – this is where you might put some keywords. Just like <title> and <meta> are retrieved, they will search down the page along the title tag. If you don't use these tags, the keywords contained within them won't be considered valuable and will be ignored.
So with just a little bit of effort, you can increase the likelihood that people will find your site based on the content on your page. Sounds good, doesn't it?
About the order of titles
In the example, this particular title is the most important on the page because it is the title of the document. Therefore, we use the most important title tag, <h1>. Following the W3C specification, some people think that skipping several heading levels is a bad practice. For example, imagine we are on the following page:
<h1>Article title</h1>
Our next heading (if not repeated with another <h1>) would be <h2>, then <h3>, etc. You probably shouldn't skip one level after <h1> and go straight to <h3>. I tend to agree with the above point of view, and maintain the continuity of levels along the text to construct a layout structure. This way, it's easier to add titles and styles to an already existing page, and you'll reduce errors caused by using extra numbers.
As mentioned earlier, designers may use <h4> to tag the most important heading on a page simply because its default font size is not as obnoxiously large as <h1>. But remember, structure first, design later. We can always use CSS to style headings to any text size we like.