What is an html header tag

) tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> style> ul < padding: 0; > ul li < display: inline-block; margin-right: 10px; color: #778899; > style> head> body> header> nav> ul> li>Home li> li>About us li> ul> nav> h1>Welcome to our page h1> hr> header> article> header> h2>The section title h2> p>The text paragraph. p> header> article> body> html>

Result

Example of the HTML tag with the CSS proeprties:

html> html> head> title>Title of the document title> style> body < font-family: Arial, sans-serif; line-height: 2; > h2 < text-align: center; > ul < padding: 0; > ul li < list-style-type: none; display: inline-block; margin-right: 10px; > a < display: block; color: #778899; > style> head> body> header> nav> ul> li> a href="https://www.w3docs.com/learn-html.html">Lern HTML a> li> li> a href="https://www.w3docs.com/learn-git.html">Lern Git a> li> ul> nav> h1>Welcome to our page h1> hr> header> main> h2>Get answers to your coding questions h2> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> main> body> html>

Attributes

The tag supports Global Attributes and the Event Attributes.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Browser support

Источник

What are HTML Header Tags? How do They Work for SEO?

HTML header tags are used to differentiate the headings (h1) and sub-headings (h2-h6) of a page from the rest of the content. These tags are also known to webmasters as heading tags or simply header tags.

The most important heading tag is the h1 tag and least important is the h6 tag. In HTML coding, the heading tags from h1 to h6 form a top-down hierarchy. This means that if you skip any of the tag numbers the heading structure will be broken, which is not ideal for on-page SEO.

For example, if your site is introduced with an h1 tag followed by an h3 tag, the hierarchy will be broken, meaning the heading structure is not as SEO-friendly. This doesn’t apply, however, to the bottom-up structure, which could jump from an h4 to an h2 without issue.

Ideally, every page should have an h1 tag, but no more than one (unless you ‘re using HTML5, more on that below).

What are HTML Header Tags in SEO?

For SEO, there are 2 main purposes for HTML header tags:

1. Structuring the page for readability
2. Relevance to keywords

1. Make the page more readable

Adding sections and subsections, with appropriate headers, divides content into scannable blocks that are much easier to consume. For both humans and bots.

Look at your page ‘s HTML header tags as a way of creating an outline or sketch of your article, using body content to fill in details and examples.

In fact, you can look at the HTML headers in this article as an example. Here are the headers for this article:

What are Header Tags?

What are HTML Header Tags in SEO?

1. Make the page more readable

2. Make the page more relevant

How to Write HTML Headers for SEO

Things You Should Not Be Doing with HTML Headers

This translates directly to a traditional outline for this article:

• What are Header Tags?
• What are HTML Header Tags in SEO?
• Make the page more readable
• Make the page more relevant
• How to Write HTML Headers for SEO

Things You Should Not Be Doing with HTML Headers

2. Make the page more relevant

Google sees the text used within the HTML header tags as more valuable, or a higher priority, than the rest of the text on a page. Therefore, words used in the header tags are weighted more highly when Google is trying to figure out if a page is relevant to a user ‘s query. In fact, a page ‘s h1 tag is one of the most important places to use a keyword.

For example, if the keyword you want to target is «on page SEO», you would use that in your h1 tags, and topically related words in your outline:

• On page SEO: The Ultimate Guide
• What is On Page SEO?
• What are On Page Ranking Factors?
• Best On Page SEO Techniques
• Robots.txt
• XML Sitemap
• Speed
• HTML Headers
• On page keywords
• Best On Page SEO Tools
• Bonus: Off Page SEO

Use a keyword research tool that includes LSI keywords to help you craft your pages ‘ HTML headers.

This isn ‘t a case for keyword stuffing. Thanks to the semantic web and LSI keywords, it ‘s better to use related words that reinforce the relevance, quality and depth of a piece of content to a user ‘s query.

How to Write HTML Headers for SEO

The way you write your headers and subheads depends on which HTML header tag you ‘re talking about.

• Put the h1 tags at the top of your page (of course).
• Use the words people would use when searching for what your content is about.
• If you ‘re targeting a question, put the question in the h1 tag.
• If you ‘re writing a how-to guide, put each step in an h2 tag.
• For non-how-to articles, use LSI keywords and other, semantically-related words in your h2-h6 tags. This helps reinforce topical relevance and removes ambiguity.

Those third and fourth points are very important when trying to claim one of Google ‘s featured snippets for your site. Featured snippets rely on Google ‘s ability to determine what page best answers a question. Structuring your content to make it more readable is a big part of that.

Using HTML headers to target search intent

Your header content plays a role in matching your content to a searcher’s goal, beyond simple keyword rankings.

Since search engines want to deliver pages that meet their user ‘s need, and so they will rely on HTML header tags to help determine if a page answers the searcher ‘s question.

Use your HTML headers to help target these types of queries:

• «What is»: Since you are targeting the question, you ‘ll want to use it in the tag. Keep the answer to the question next to the tag to help Google find it more easily.
• How to: When targeting people trying to follow directions, put each step in the process as a separate HTML header. That can be an if the how-to is part of a much larger article, or as tags if the instructions is the main point of the content.
• Commercial intent: We covered product and category pages earlier. You can also use tags to target commercial intent searches with special offers such as discounts or add-ons. Just include the offer in the header content.

What is search intent?

Users searching on Google have an ultimate goal they want to accomplish. Read our complete guide to search intent to learn more.

Using HTML headers in HTML5

While pages using HTML4 or older should stick to the 1 tag per page rule, those using HTML5 can, in fact, use multiple header tags. This works because HTML5 supports the tag. This tag allows you, essentially, to break a page up into multiple «articles», each with its own header.

So, for example, an article on a old school HTML page would look like this:

How to Do SEO

Step 1: Technical SEO

Detailed explanation of.

Step 2: On-Page SEO

Detailed Explanation of step 2.

However, with HTML5, that page could look like this:

Now the section headers can be given their proper importance on the page, but within the context of the overall article.

However, please note that this can be a bit tricky and complicated to actually implement on a page. So if you are unsure of your codings skills, or not sure if your page uses HTML5, stick to the one header per page rule

Things you should not be doing with heading tags

• Do not stuff your heading tags with keywords.
• Do not use more than one h1 tag on a page. Usually, pages will have a single h1 heading and including two might make search engines think this as an attempt to include more keywords for SEO in multiple h1 tags. It is better to divide the content into two separate topics on individual pages with their own h1 tags. This makes more sense to both readers and the search engine spiders, however, using multiple h1 tags is allowed.
• Do not use heading tags as hidden text. Any hidden text can result in penalties for your site, especially if the hidden part is a component that affects SEO.
• Do not repeat heading tags on different pages of your site. It is a good practice to have unique heading tags throughout your site.Avoid using identical content for both your page ‘s h1 tag and meta title tag.
• Do not use heading tags for styling text but use them for presenting organized and structured content on pages. Use CSS stylesheets for the purpose of styling.

Источник