What tag should you use to mark the h1 heading with the location topheading?

HTML Headings

In this tutorial you will learn how to create headings in HTML.

Selectors

Recall that these are the HTML elements to which style information is applied. However, you can be more specific...

Selecting by Class

By assigning elements "classes", you can use these class names to specify style: <STYLE TYPE="text/css"> H1.classname { ..... } .class2 {style information for all elements with class=class2} </STYLE> ..... <H1 CLASS=classname>This text will be affected by the above SYTLE info.</H1> <H2 CLASS=class2>So is this text</H1>

Selecting by ID

It is possible to use the id attribute in HTML tags to specify style information. The element is identified by placing ID=NameOfYourChoice in the opening tag. The style information is then specified by using the form elementname#ID_Name { .... }
Example:<STYLE> #id1 { color:green} (make the color green for all text in any element with ID=id1) H1#id2 { color:blue} (all H1 elements with ID=id2 are displayed in blue) </STYLE> ..... <P ID=id1>green text</P> <H2 ID=id2>blue text</h2>

Contextual

You can specify that style is only applied to elements which have certain "parents" (elements which they are contained within).
e.g. H1 EM { styleinfo }; /*all EM text within a H1 tag */ UL UL LI { styleinfo }; /*all LI items within two UL sets */ .classname H1 { styleinfo };/* all H1 within elements with CLASS=classname*/ #IDname H1 { styleinfo }; /* all H1 text within elements with ID=IDname*/ DIV.IDname H1 { styleinfo };/* all H1 text within DIV tags with ID=IDname*/

Selecting All elements

This can either be done by assigning properties to the BODY object, or by use of the universal selector:
* { color : red } /* make all text red */
*.classname {color : red } /* all elements of class classname*/
H1 * PRE { color:red } /* all PRE blocks contained in H1 and any other element */

Child Selection

An element is a child of another if it is contained within that other element. For example, in <h2> <h3> </h3> </h2>, H3 is a child of H1, but anything within the H3 tags is a child of H3 and not H1. If we wanted to make all H3s, which are children of H1, to be red, we would useH1 > H3 { color : red }

Adjacent Elements

To specify style for a H3 elements that immediately follows a H1 element, use H1 + H3 { color : red }.

This would affect <H1>...</H1> <H3>this text</H3>

Selecting by attributes

You can add style to elements which have values specified to certain attributes. The general form is
elementname[attribute relationship value] { styleinfo }
,where relationship is one of

• = : Add style when the attribute exactly matches value.
• ~= : Add style when the attribute contains the word value in a space seperated list.
• |= : Add style when the attribute contains the word value in a hypen seperated list.
• none : when the form elementname[attribute] { styleinfo } is used, add style whenever the attribute has been specified.

Examples : H1[id="the top heading"] {color : red} H1[id~=top] {color : red} The above would both have the same effect on <H1 id="the top heading">

<h2>–<h6>: The HTML Section Heading elements

Usability

A good page headingshould describe the content of the page in just a few words, so one of the most important reasons to use H1’s properly is for usability purposes:

• When you select the H1 tag the text will automatically bestyled so that it is bigger and bolder than the rest of the page’s text (including other headers) and this adds visual appeal and a hierarchy to the page.
• When people are reading online they tend to quickly scan pages for the information they are looking for so your page headingwill be the first thing that your audience will read and as such should let them know that they are in the right place and that the content of thepage is relevant to them.
• It will help people who are using a screen reader to access your content.

Search Engine Optimisation

The secondary purpose of an H1 tag is that search engines place importance on H1’s in their search algorithms (and – to a diminishing extent – to H2’s, H3’s etc.)Search engines such as Google use Search Spiders to index websites and these pay most attention to the content wrapped in H1 tags.

You can try placing keywords (words that you envisage people will use to search for your page) into your page heading to try and help your search engine position, but only try this if it makes sense to – the main emphasis should be choosing a heading that describes the page’s content.