HTML HeadingsIn this tutorial you will learn how to create headings in HTML. Show SelectorsRecall that these are the HTML elements to which style information is applied. However, you can be more specific...Selecting by ClassBy 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 IDIt 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> ContextualYou 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 elementsThis 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 SelectionAn 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 ElementsTo 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 attributesYou can add style to elements which have values specified to certain attributes. The general form iselementname[attribute relationship value] { styleinfo } ,where relationship is one of
<h2>–<h6>: The HTML Section Heading elementsThe <h2> to <h6> HTML elements represent six levels of section headings. <h2> is the highest section level and <h6> is the lowest.
UsabilityA 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:
Search Engine OptimisationThe 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. |