. Paper-items are simple list elements, ideally used in a paper-listbox or. an element with role="listbox". The color of the report icon indicates the Similarity Index of the paper, based on the amount of matching or document viewer frame - shows the Similarity Index for the report and the title and author of the paper To change the view mode for an Originality Report to the All Sources view, click on the. All Sources icon. Feb 22, 2018 Gallery sections: Set the background; Gallery sections: Set the height; Slideshow galleries; Grid galleries; Edit sections; Adding content from other pages; Header; Parallax scrolling; Overlay text; Overlay color; Scroll indicator; Index navigation; Mirror the border; Navigation link behavior; Mobile; Examples."> red writing shows as red writing; color:#0f0">green writing shows as green writing; colour text and background. Feb 22, 2018 Gallery sections: Set the background; Gallery sections: Set the height; Slideshow galleries; Grid galleries; Edit sections; Adding content from other pages; Header; Parallax scrolling; Overlay text; Overlay color; Scroll indicator; Index navigation; Mirror the border; Navigation link behavior; Mobile; Examples. a line containing HTML version information,; a declarative header section ( delimited by the HEAD element),; a body, which contains the document's actual content. . Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to.">
1 Diramar

Change Color Of Section Index Titles For Essays

 previous   next   contents   elements   attributes   index


7 The global structure of an HTML document

7.1 Introduction to the structure of an HTML document

An HTML 4 document is composed of three parts:

  1. a line containing HTML version information,
  2. a declarative header section (delimited by the element),
  3. a body, which contains the document's actual content. The body may be implemented by the element or the element.

White space (spaces, newlines, tabs, and comments) may appear before or after each section. Sections 2 and 3 should be delimited by the element.

Here's an example of a simple HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML>

7.2HTML version information

A valid HTML document declares what version of HTML is used in the document. The document type declaration names the document type definition (DTD) in use for the document (see [ISO8879]).

HTML 4.01 specifies three DTDs, so authors must include one of the following document type declarations in their documents. The DTDs vary in the elements they support.

  • The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

The URI in each document type declaration allows user agents to download the DTD and any entity sets that are needed. The following (relative) URIs refer to DTDs and entity sets for HTML 4:

The binding between public identifiers and files can be specified using a catalog file following the format recommended by the Oasis Open Consortium (see [OASISOPEN]). A sample catalog file for HTML 4.01 is included at the beginning of the section on SGML reference information for HTML. The last two letters of the declaration indicate the language of the DTD. For HTML, this is always English ("EN").

Note. As of the 24 December version of HTML 4.01, the HTML Working Group commits to the following policy:

  • Any changes to future HTML 4 DTDs will not invalidate documents that conform to the DTDs of the present specification. The HTML Working Group reserves the right to correct known bugs.
  • Software conforming to the DTDs of the present specification may ignore features of future HTML 4 DTDs that it does not recognize.

This means that in a document type declaration, authors may safely use a system identifier that refers to the latest version of an HTML 4 DTD. Authors may also choose to use a system identifier that refers to a specific (dated) version of an HTML 4 DTD when validation to that particular DTD is required. W3C will make every effort to make archival documents indefinitely available at their original address in their original form.

7.3 The element

<!ENTITY % html.content "HEAD, BODY"> <!ELEMENT O O (%html.content;) -- document root element --> <!ATTLIST HTML %i18n; -- lang, dir -- >

Start tag: optional, End tag: optional

Attribute definitions

= cdata[CN]
Deprecated. The value of this attribute specifies which HTML DTD version governs the current document. This attribute has been deprecated because it is redundant with version information provided by the document type declaration.

Attributes defined elsewhere

After document type declaration, the remainder of an HTML document is contained by the element. Thus, a typical HTML document has this structure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> ...The head, body, etc. goes here... </HTML>

7.4 The document head

7.4.1 The element

Start tag: optional, End tag: optional

Attribute definitions

= uri[CT]
This attribute specifies the location of one or more meta data profiles, separated by white space. For future extensions, user agents should consider the value to be a list even though this specification only considers the first URI to be significant. Profiles are discussed below in the section on meta data.

Attributes defined elsewhere

The element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the as content. They may, however, make information in the available to users through other mechanisms.

7.4.2 The element

<!-- The TITLE element is not considered part of the flow of text. It should be displayed, for example as the page header or window title. Exactly one title is required per document. --> <!ELEMENT - - (#PCDATA) -(%head.misc;) -- document title --> <!ATTLIST TITLE %i18n>

Start tag: required, End tag: required

Attributes defined elsewhere

Every HTML document must have a element in the section.

Authors should use the element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead.

For reasons of accessibility, user agents must always make the content of the element available to users (including elements that occur in frames). The mechanism for doing so depends on the user agent (e.g., as a caption, spoken).

Titles may contain character entities (for accented characters, special characters, etc.), but may not contain other markup (including comments). Here is a sample document title:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> ... other head elements... </HEAD> <BODY> ... document body... </BODY> </HTML>

7.4.3 The attribute

Attribute definitions

= text[CS]
This attribute offers advisory information about the element for which it is set.

Unlike the element, which provides information about an entire document and may only appear once, the attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute.

Values of the attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

...some text... Here's a photo of <A href="http://someplace.com/neatstuff.gif" title="Me scuba diving"> me scuba diving last summer </A> ...some more text...

The attribute has an additional role when used with the element to designate an external style sheet. Please consult the section on links and style sheets for details.

Note. To improve the quality of speech synthesis for cases handled poorly by standard techniques, future versions of HTML may include an attribute for encoding phonemic and prosodic information.

7.4.4Meta data

Note. The W3C Resource Description Framework (see [RDF10]) became a W3C Recommendation in February 1999. RDF allows authors to specify machine-readable metadata about HTML documents and other network-accessible resources.

HTML lets authors specify meta data -- information about a document rather than document content -- in a variety of ways.

For example, to specify the author of a document, one may use the element as follows:

<META name="Author" content="Dave Raggett">

The element specifies a property (here "Author") and assigns a value to it (here "Dave Raggett").

This specification does not define a set of legal meta data properties. The meaning of a property and the set of legal values for that property should be defined in a reference lexicon called a profile. For example, a profile designed to help search engines index documents might define properties such as "author", "copyright", "keywords", etc.

Specifying meta data 

In general, specifying meta data involves two steps:

  1. Declaring a property and a value for that property. This may be done in two ways:
    1. From within a document, via the element.
    2. From outside a document, by linking to meta data via the element (see the section on link types).
  2. Referring to a profile where the property and its legal values are defined. To designate a profile, use the attribute of the element.

Note that since a profile is defined for the element, the same profile applies to all and elements in the document head.

User agents are not required to support meta data mechanisms. For those that choose to support meta data, this specification does not define how meta data should be interpreted.

The element 

<!ELEMENT - O EMPTY -- generic metainformation --> <!ATTLIST META %i18n; -- lang, dir, for use with content -- NAME #IMPLIED -- HTTP response header name -- NAME #IMPLIED -- metainformation name -- CDATA #REQUIRED -- associated information -- CDATA #IMPLIED -- select form of content -- >

Start tag: required, End tag: forbidden

Attribute definitions

For the following attributes, the permitted values and their interpretation are dependent:

= name[CS]
This attribute identifies a property name. This specification does not list legal values for this attribute.
= cdata[CS]
This attribute specifies a property's value. This specification does not list legal values for this attribute.
= cdata[CS]
This attribute names a scheme to be used to interpret the property's value (see the section on profiles for details).
= name[CI]
This attribute may be used in place of the attribute. HTTP servers use this attribute to gather information for HTTP response message headers.

Attributes defined elsewhere

The element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.

Each element specifies a property/value pair. The attribute identifies the property and the attribute specifies the property's value.

For example, the following declaration sets a value for the property:

<META name="Author" content="Dave Raggett">

The attribute can be used with to specify the language for the value of the attribute. This enables speech synthesizers to apply language dependent pronunciation rules.

In this example, the author's name is declared to be French:

<META name="Author" lang="fr" content="Arnaud Le Hors">

Note. The element is a generic mechanism for specifying meta data. However, some HTML elements and attributes already handle certain pieces of meta data and may be used by authors instead of to specify those pieces: the element, the element, the and elements, the attribute, and the attribute.

Note. When a property specified by a element takes a value that is a URI, some authors prefer to specify the meta data via the element. Thus, the following meta data declaration:

<META name="DC.identifier" content="http://www.ietf.org/rfc/rfc1866.txt">

might also be written:

<LINK rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt">
and HTTP headers

The attribute can be used in place of the attribute and has a special significance when documents are retrieved via the Hypertext Transfer Protocol (HTTP). HTTP servers may use the property name specified by the attribute to create an [RFC822]-style header in the HTTP response. Please see the HTTP specification ([RFC2616]) for details on valid HTTP headers.

The following sample declaration:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

will result in the HTTP header:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

This can be used by caches to determine when to fetch a fresh copy of the associated document.

Note. Some user agents support the use of to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects.

and search engines

A common use for is to specify keywords that a search engine may use to improve the quality of search results. When several elements provide language-dependent information about a document, search engines may filter on the attribute to display search results using the language preferences of the user. For example,

<-- For speakers of US English --> <META name="keywords" lang="en-us" content="vacation, Greece, sunshine"> <-- For speakers of British English --> <META name="keywords" lang="en" content="holiday, Greece, sunshine"> <-- For speakers of French --> <META name="keywords" lang="fr" content="vacances, Gr&egrave;ce, soleil">

The effectiveness of search engines can also be increased by using the element to specify links to translations of the document in other languages, links to versions of the document in other media (e.g., PDF), and, when the document is part of a collection, links to an appropriate starting point for browsing the collection.

Further help is provided in the section on helping search engines index your Web site.

and PICS
The Platform for Internet Content Selection (PICS, specified in [PICS]) is an infrastructure for associating labels (meta data) with Internet content. Originally designed to help parents and teachers control what children can access on the Internet, it also facilitates other uses for labels, including code signing, privacy, and intellectual property rights management.

This example illustrates how one can use a declaration to include a PICS 1.1 label:

<HEAD> <META http-equiv="PICS-Label" content=' (PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1)) '> <TITLE>... document title ...</TITLE> </HEAD>
and default information

The element may be used to specify the default information for a document in the following instances:

The following example specifies the character encoding for a document as being ISO-8859-5

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

Meta data profiles 

The attribute of the specifies the location of a meta data profile. The value of the attribute is a URI. User agents may use this URI in two ways:
  • As a globally unique name. User agents may be able to recognize the name (without actually retrieving the profile) and perform some activity based on known conventions for that profile. For instance, search engines could provide an interface for searching through catalogs of HTML documents, where these documents all use the same profile for representing catalog entries.
  • As a link. User agents may dereference the URI and perform some activity based on the actual definitions within the profile (e.g., authorize the usage of the profile within the current HTML document). This specification does not define formats for profiles.

This example refers to a hypothetical profile that defines useful properties for document indexing. The properties defined by this profile -- including "author", "copyright", "keywords", and "date" -- have their values set by subsequent declarations.

<HEAD profile="http://www.acme.com/profiles/core"> <TITLE>How to complete Memorandum cover sheets</TITLE> <META name="author" content="John Doe"> <META name="copyright" content="&copy; 1997 Acme Corp."> <META name="keywords" content="corporate,guidelines,cataloging"> <META name="date" content="1994-11-06T08:49:37+00:00"> </HEAD>

As this specification is being written, it is common practice to use the date formats described in [RFC2616], section 3.3. As these formats are relatively hard to process, we recommend that authors use the [ISO8601] date format. For more information, see the sections on the and elements.

The attribute allows authors to provide user agents more context for the correct interpretation of meta data. At times, such additional information may be critical, as when meta data may be specified in different formats. For example, an author might specify a date in the (ambiguous) format "10-9-97"; does this mean 9 October 1997 or 10 September 1997? The attribute value "Month-Day-Year" would disambiguate this date value.

At other times, the attribute may provide helpful but non-critical information to user agents.

For example, the following declaration may help a user agent determine that the value of the "identifier" property is an ISBN code number:

<META scheme="ISBN" name="identifier" content="0-8230-2355-9">

Values for the attribute depend on the property and the associated .

Note. One sample profile is the Dublin Core (see [DCORE]). This profile defines a set of recommended properties for electronic bibliographic descriptions, and is intended to promote interoperability among disparate description models.

7.5 The document body

7.5.1 The element

Start tag: optional, End tag: optional

Attribute definitions

= uri[CT]
Deprecated. The value of this attribute is a URI that designates an image resource. The image generally tiles the background (for visual browsers).
= color[CI]
Deprecated. This attribute sets the foreground color for text (for visual browsers).
= color[CI]
Deprecated. This attribute sets the color of text marking unvisited hypertext links (for visual browsers).
= color[CI]
Deprecated. This attribute sets the color of text marking visited hypertext links (for visual browsers).
= color[CI]
Deprecated. This attribute sets the color of text marking hypertext links when selected by the user (for visual browsers).

Attributes defined elsewhere

  • , (document-wide identifiers)
  • (language information), (text direction)
  • (element title)
  • (inline style information)
  • (background color)
  • , (intrinsic events)
  • , , , , , , , , , (intrinsic events)

The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. For audio user agents, the same content may be spoken. Since style sheets are now the preferred way to specify a document's presentation, the presentational attributes of have been deprecated.

DEPRECATED EXAMPLE:
The following HTML fragment illustrates the use of the deprecated attributes. It sets the background color of the canvas to white, the text foreground color to black, and the color of hyperlinks to red initially, fuchsia when activated, and maroon once visited.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... document body... </BODY> </HTML>

Using style sheets, the same effect could be accomplished as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <STYLE type="text/css"> BODY { background: white; color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } </STYLE> </HEAD> <BODY> ... document body... </BODY> </HTML>

Using external (linked) style sheets gives you the flexibility to change the presentation without revising the source HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <LINK rel="stylesheet" type="text/css" href="smartstyle.css"> </HEAD> <BODY> ... document body... </BODY> </HTML>

7.5.2Element identifiers: the and attributes

Attribute definitions

= name[CS]
This attribute assigns a name to an element. This name must be unique in a document.
= cdata-list[CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
The attribute assigns a unique identifier to an element (which may be verified by an SGML parser). For example, the following paragraphs are distinguished by their values:
<P id="myparagraph"> This is a uniquely named paragraph.</P> <P id="yourparagraph"> This is also a uniquely named paragraph.</P>

The attribute has several roles in HTML:

  • As a style sheet selector.
  • As a target anchor for hypertext links.
  • As a means to reference a particular element from a script.
  • As the name of a declared element.
  • For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

The attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The attribute has several roles in HTML:

  • As a style sheet selector (when an author wishes to assign style information to a set of elements).
  • For general purpose processing by user agents.

In the following example, the element is used in conjunction with the and attributes to markup document messages. Messages appear in both English and French versions.

<!-- English messages --> <P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN> <P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN> <P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN> <!-- French messages --> <P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN> <P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute;finie</SPAN> <P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

The following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

SPAN.info { color: green } SPAN.warning { color: yellow } SPAN.error { color: red }

Note that the French "msg1" and the English "msg1" may not appear in the same document since they share the same value. Authors may make further use of the attribute to refine the presentation of individual messages, make them target anchors, etc.

Almost every HTML element may be assigned identifier and class information.

Suppose, for example, that we are writing a document about a programming language. The document is to include a number of preformatted examples. We use the element to format the examples. We also assign a background color (green) to all instances of the element belonging to the class "example".

<HEAD> <TITLE>... document title ...</TITLE> <STYLE type="text/css"> PRE.example { background : green } </STYLE> </HEAD> <BODY> <PRE class="example" id="example-1"> ...example code here... </PRE> </BODY>

By setting the attribute for this example, we can (1) create a hyperlink to it and (2) override class style information with instance style information.

Note. The attribute shares the same name space as the attribute when used for anchor names. Please consult the section on anchors with for more information.

7.5.3Block-level and inline elements

Certain HTML elements that may appear in are said to be "block-level" while others are "inline" (also known as "text level"). The distinction is founded on several notions:

Content model
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Formatting
By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text.
Directionality
For technical reasons involving the [UNICODE] bidirectional text algorithm, block-level and inline elements differ in how they inherit directionality information. For details, see the section on inheritance of text direction.

Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.

The alteration of the traditional presentation idioms for block level and inline elements also has an impact on the bidirectional text algorithm. See the section on the effect of style sheets on bidirectionality for more information.

7.5.4 Grouping elements: the and elements

Start tag: required, End tag: required

Attributes defined elsewhere

  • , (document-wide identifiers)
  • (language information), (text direction)
  • (element title)
  • (inline style information)
  • (alignment)
  • , , , , , , , , , (intrinsic events)

The and elements, in conjunction with the and attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline () or block-level () but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the attribute, etc., to tailor HTML to their own needs and tastes.

Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use and to achieve the desired structural and presentational effects. We might use the element as follows to structure the information:

<!-- Example of data from the client database: --> <!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org --> <DIV id="client-boyera" class="client"> <P><SPAN class="client-title">Client information:</SPAN> <TABLE class="client-data"> <TR><TH>Last name:<TD>Boyera</TR> <TR><TH>First name:<TD>Stephane</TR> <TR><TH>Tel:<TD>(212) 555-1212</TR> <TR><TH>Email:<TD>sb@foo.org</TR> </TABLE> </DIV> <DIV id="client-lafon" class="client"> <P><SPAN class="client-title">Client information:</SPAN> <TABLE class="client-data"> <TR><TH>Last name:<TD>Lafon</TR> <TR><TH>First name:<TD>Yves</TR> <TR><TH>Tel:<TD>(617) 555-1212</TR> <TR><TH>Email:<TD>yves@coucou.com</TR> </TABLE> </DIV>

Later, we may easily add style sheet declarations to fine tune the presentation of these database entries.

For another example of usage, please consult the example in the section on the and attributes.

Visual user agents generally place a line break before and after elements, for instance:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

which is typically rendered as:

aaaaaaaaa bbbbbbbbb ccccc ccccc

7.5.5 Headings: The , , , , , elements

Start tag: required, End tag: required

Attributes defined elsewhere

  • , (document-wide identifiers)
  • (language information), (text direction)
  • (element title)
  • (inline style information)
  • (alignment)
  • , , , , , , , , , (intrinsic events)

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with as the most important and as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

The following example shows how to use the element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets.

<DIV class="section" id="forest-elephants" > <H1>Forest elephants</H1> <P>In this section, we discuss the lesser known forest elephants. ...this section continues... <DIV class="subsection" id="forest-habitat" > <H2>Habitat</H2> <P>Forest elephants do not live in trees but among them. ...this subsection continues... </DIV> </DIV>

This structure may be decorated with style information such as:

<HEAD> <TITLE>... document title ...</TITLE> <STYLE type="text/css"> DIV.section { text-align: justify; font-size: 12pt} DIV.subsection { text-indent: 2em } H1 { font-style: italic; color: green } H2 { color: green } </STYLE> </HEAD>

Numbered sections and references
HTML does not itself cause section numbers to be generated from headings. This facility may be offered by user agents, however. Soon, style sheet languages such as CSS will allow authors to control the generation of section numbers (handy for forward references in printed documents, as in "See section 7.2").

Some people consider skipping heading levels to be bad practice. They accept while they do not accept since the heading level is skipped.

7.5.6 The element

Start tag: required, End tag: required

Attributes defined elsewhere

  • , (document-wide identifiers)
  • (language information), (text direction)
  • (element title)
  • (inline style information)
  • , , , , , , , , , (intrinsic events)

The element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

For example, a page at the W3C Web site related to HTML might include the following contact information:

<ADDRESS> <A href="../People/Raggett/">Dave Raggett</A>, <A href="../People/Arnaud/">Arnaud Le Hors</A>, contact persons for the <A href="Activity">W3C HTML Activity</A><BR> $Date: 1999/12/24 23:37:50 $ </ADDRESS>


previous   next   contents   elements   attributes   index

Sections

The Brine family has multiple templates, which share the same underlying structure and functionality. This guide applies to all these templates.

The single-page style Index Page stacks the content from multiple pages vertically, allowing you to highlight images and information in one location. Parallax scrolling gives the page a sophisticated, interactive feel.

  • Content sections are a good option for displaying text, buttons, and other blocks. If the section has a thumbnail, it creates a background image for the section, which can feature parallax scrolling.
  • Gallery sections showcase multiple images in a grid or slideshow format. These sections don't feature parallax scrolling, so they appear to slide over sections that do. The thumbnail doesn't create a background image.
Tip: The Index Page makes a great homepage. 

Set up the Index Page

The Index Page supports Gallery and Regular Pages. 

  • Each page creates its own section.
  • Gallery Pages create galley sections; Regular Pages create content sections.
  • These sections stack vertically, in the order they’re arranged within the Index.

To set up an Index Page:

  1. From the Home Menu, click Pages.
  2. Click the + icon, then click Index.
  3. In the Index that appears, click + Add Section, then click Content to add a Regular Page, or click Gallery to add a Gallery Page. You can also drag an existing page into the Index.
  4. For content sections, add a thumbnail to create a background image, and add blocks to create text and other content.
  5. For gallery sections, add images. You can also add image titles and descriptions.
  6. Style content and gallery sections in the Style Editor.

For more information, visit Using the Index Page.

Tip: See our tips on adding other types of content.

Content sections: Add content

Content sections are made from Regular Pages. The page's content displays in each section. The page title and description doesn’t show.

To add content, create a content section and then either:

Tips:

  • You can add a thumbnail to create a background image or video.
  • An optional content inset indents text and certain other blocks on either side.
  • Content sections can feature parallax scrolling.
  • You can set the minimum height for sections that have a background image or video.

Content sections: Set the background

Content sections can display an image, video, or color behind their content.

  • Set a thumbnail image or video URL to create a background image or video.
  • If the section has no background image or video, the page content displays over the main content background color. Adjust this with the Color tweak in the Main section of the Style Editor. This affects your whole site.

Content sections: Set the height

For any section, you can add line breaks (press or ) to the page content to make the section longer.

In the Style Editor, you can also use the Apply Minimum Height tweak in the Index: Page section to set some or all Regular Page sections to display at a fixed height. You can choose from the following options:

  • None
  • First Page Only
  • Pages with Backgrounds Only
  • All Pages

After choosing which sections will have a set height, use the Minimum Height tweak to set the height.

  • Sections will never be shorter than the page content, including padding. If the page content is longer than the minimum height, the section will stretch to fit the content. 
  • This tweak uses a percentage of the viewport height, which is the part of a browser where your site displays. For example, if you choose 100vh, the height of the section will take up 100% of the viewport height. The actual height in pixels will vary, depending on the height of a visitor's browser or device.

Use these tweaks to further adjust the height of these sections:

  • Padding (Overlay Pages) adjusts the padding on sections with thumbnail images.
  • Padding adjusts the sections without thumbnail images.

Gallery sections: Add images

Gallery sections are made from Gallery Pages. After you add a gallery section, you can add images and videos. 

Gallery sections can display as a slideshow or grid. Use the Layout tweak in the Index: Gallery section of the Style Editor to choose the layout. This tweak affects all Index Page gallery sections.

For all layouts:

Tips:

  • Lightbox functionality is disabled within the Index.
  • Gallery images don’t feature parallax scrolling. If you’ve enabled parallax scrolling on your site, gallery sections move with the page and appear to scroll over content sections.
  • The layout and style settings you choose apply to all Index gallery sections on your site. To create a different effect, add a content section with a Gallery Block.

Gallery sections: Set the background

  • The images in a gallery section display over the main content background color. Set this with the Color tweak in the Main section of the Style Editor. This affects your whole site.
  • To control how much of the background color shows around the images, uncheck Apply Spacing and use the Spacing tweaks to adjust the spacing or create full-bleed effects.

Gallery sections don't support a background image. To create the effect of a background image, set your gallery sections to the slideshow layout, then use the Spacing tweak to make the image full-bleed.

Gallery sections: Set the height

For gallery sections:

  • Layout: Slideshow - Check Use Fixed Height to manually set the height.
  • Layout: Packed, Split, or Grid - The height is set automatically by the number and size of the gallery's images.
Tip: Padding and Spacing tweaks also affect the height.

Slideshow galleries

When Layout: Slideshow is selected, use the tweaks in the Index: Slideshow Gallery section of the Style Editor to style the slideshow.

  • Use the Autoplay tweak to choose whether the slideshow moves through the images automatically.
  • Controls tweaks affect the navigation arrows that display over the gallery. Choose Next/Previous Controls: None to hide them.
  • Indicators tweaks affect the dots or lines that show how many images are in the gallery. Choose Indicators: None to hide them. Clicking an indicator dot or lines takes you to that image in the gallery. If the slideshow is set to Autoplay, indicator lines will fill in to show how long until the next slide. 
  • Transition tweaks set how the gallery moves from one image to the next. 
Tip: You can also use arrow keys to navigate through the slideshow.

Grid galleries

There are three grid options:

  • Layout: Packed 
  • Layout: Split
  • Layout: Grid

The Layout: Packed andLayout: Split tweaks set their layouts automatically based on the number and size of the images in the gallery, and their padding. Experiment with these two options to see how they look on your site.

The Layout: Grid tweak gives you more fine-tuned control over the grid layout.

  • Use the Max Items Per Row to set the number of images.
  • Use the Min Item Width to set their size. 

For all grid layouts:

  • Aspect Ratio adjusts the image shape. 

Edit sections

To edit an existing section, ensure you're not in the Style Editor, then hover over the page and click the annotations.

Note: If one of your sections is blank, its Edit page annotation may not appear. To edit the page, move it out of the Index, add content, then move it back to the Index.

Adding content from other pages

Album, Blog, Products, and Events Pages can't be added to the Index Page as sections. Instead, you can:

  • Link to them in your navigation.
  • Pull their content into a content section with a Summary Block. For example, you could create a grid of images that automatically updates to show your latest blog posts.

Header

How the header displays depends on the first section:

  • If the top section is a Regular Page, the bottom header overlays it.
  • If the top section is a Gallery Page, use the Overlay Header on First Index Gallery tweak to choose whether the bottom header overlays the section or the main content background color.

Index Pages don't have an intro blocks area at the top. The intro areas of individual pages within an Index won’t display on the Index Page.

Tip: Hide the top header by moving all header elements into the bottom header, as seen in Nueva.

Parallax scrolling

Content sections with thumbnail images can feature parallax scrolling. When this is enabled, the background images move more slowly than the content in the foreground, creating an illusion of depth and immersion.

Enable or disable parallax scrolling with the Enable Parallax tweak.

Gallery sections don't feature parallax scrolling.

Overlay text

In both gallery and content sections, you can add text that appears as an overlay on top of the image. 

You may want to add an overlay color to the images to help make the text visible.

Content sections

If you add a thumbnail to a content section, it creates a background image or video. The page content displays as an overlay.

To add that page content, add a content section and then either:

Gallery sections

After you've added a gallery section, image titles and descriptions appear over its images. 

In the Index: Gallery Content section of the Style Editor:

  • The Title and Body tweaks adjust the text’s font and color.
  • Content Text Alignment adjusts the alignment (left, center, or right).
  • Content Background adds a background color behind the text.

Overlay color

Add a filter effect to your Index Page sections with a color overlay.  

  • Use the Overlay Color tweak in the Main: Overlay section of the Style Editor for Regular Page sections. This also affects page banners.
  • Use the ImageOverlay tweak in the Index: Gallery section for images in Gallery Page sections.
Tip: You may need to adjust the transparency for the overlay color.

Scroll indicator

Add a directional arrow, line, or text at the bottom of the first section to encourage visitors to view all the Index Page content. Use the tweaks in the Index: Scroll Indicator section to add and style this indicator.

Tip: Currently the scroll indicator only displays on Regular Page sections.

Index navigation

Index Page navigation provides a quick reference point for which section in the Index you're viewing. Clicking a  circle or line in the navigation takes you to that section.

Use the Style tweak in the Index: Navigation section to choose the style (Radio, Filled Dots, Faded Dots, Horizontal Lines, Vertical Lines, Expanding Horizontal Lines). Choose Style: None to hide the navigation.

Use the other tweaks to style the navigation, including choosing its size, color, whether titles appear on hover, and whether the navigation displays on the left or right.

The navigation disappears on mobile. To set the browser width at which it disappears, use the Breakpoint tweak.

Mirror the border

You can add a line of spacing beneath the first section that matches the width of your site's border. This sets the first section apart from the rest of the Index Page. The border only appears if the second section is a content section with no background image.

To set this up:

  1. Add a content or gallery section at the top of your Index.
  2. Ensure the second section is a content section, and that it doesn't have a thumbnail. 
  3. In the Site: Border section, check Show Border.
  4. Use the Width and Color tweaks to style the border.
  5. If the first section is a content section, check Mirror Border Below First Page in the Index: Page section. If the first section is a gallery section, check Mirror Border Below First Gallery in the Index: Gallery section.
  6. Use the Color tweak in the Main section to set the color of the mirrored border. For best results, match this color to the border color.

Navigation link behavior

When an Index Page is in the Main or Secondary Navigation, it displays the Index Page title as a single link. Clicking it takes you to the Index Page.

When an Index is in the footer, it breaks out as multiple links. How the links appear depends on your footer's layout. Clicking any link takes you to the direct URL for that section's page, rather than the main Index.

To create a link in the footer that leads to the main Index, place your Index Page in the Not Linked section, and use a content link in the footer to link to it.

Mobile

For Index Pages viewed from mobile devices and narrow browsers:

Examples

There are many uses for the Index Page, and you can have more than one on your site. The best way to figure out what works for you is to experiment with the different options, but here are a few suggestions to get you started:

Vary the types of content

Mix up banner images, videos, text, and galleries to heighten the parallax scrolling effect.

Stacked banners

Stack content sections with thumbnails to create a page of parallax scrolling banners.

Slideshow banner

You can use an Index Page to create the effect of a slideshow page banner:

  1. Create an Index Page.
  2. Add a gallery section with multiple images as the first section.
  3. In the Index: Gallery section of the Style Editor, choose Layout: Slideshow. (This tweak affects all gallery sections on your site.)
  4. In the Index: Slideshow Gallery section, ensure Gallery Autoplay is checked.
  5. Add a content section below the gallery section, and add your page content to it.

Gallery section with clickthrough navigation

By adding image clickthrough URLs, you can use the images in a gallery section to take visitors to other parts of your website.

Button banner

Use a Button Block to add a call to action to any content section.

Index Anchor links

Add anchor links to help visitors navigate to different parts of your Index Page. To learn how to do this without code, visit Adding Index Page anchor links.

In this example we've used buttons as the anchor links, but you can use any links including text, headers, and clickthrough images.

FAQs

You may find these troubleshooting tips helpful:

Was this article helpful?16 out of 22 found this helpful

Leave a Comment

(0 Comments)

Your email address will not be published. Required fields are marked *