The top-most heading of a DevSite page must be an <h1>. The page body must not contain another <h1> to avoid confusing non-visual browsers. The nbgenerate tool converts DevSite HTML and Markdown content and templates into Colab-compatible Jupyter notebooks.

Sizes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Table of contents

In DevSite, <h2> and <h3> are automatically added to the "on this page" table of contents (ToC).

Hide headings from the ToC

To prevent a heading from being added (like "Heading 2" and "Heading 3" in the above section, which do not appear in the ToC), apply class="hide-from-toc".

Heading 2

Heading 3

<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>

## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}

Customize heading text in the ToC

If you want the text in the ToC to differ from the actual heading (like this section!), set a data-text attribute on the heading:

Heading 2

<h2 data-text="Custom text for the ToC">Heading 2</h2>

## Heading 2 {: data-text='Custom text for the ToC'}

Include headings within tables in the ToC

You can also put an <h2> or <h3> inside a table header (<th>) to force the table into the ToC. Inside a table header, <h2> and <h3> are styled like regular text, so readers won't be able to tell.

Click-to-copy links

On documentation pages (not "full-width" pages like most landing pages), headings other than <h1> also get a button to copy the link, which appears only when you hover over the heading.

To disable this button for a specific heading, apply class="no-link" to the heading.

Heading 4

Heading 5

<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>

## Heading 4 {:.no-link}
### Heading 5 {:.no-link}

To force the link button to appear on a heading that would otherwise not have it (say, an <h1> or any heading on a full-width page), add class="add-link" to the heading.

Heading 1

<h1 class="add-link">Heading 1</h1>

# Heading 1 {:.add-link}

Numbered headings

To prefix <h2> headings with sequential numbers for designating sections with complex content as distinct steps in a multiple-step process, add a numbered class to each heading.

First numbered heading

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Second numbered heading

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Third numbered heading

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">First numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Second numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Third numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## First numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Second numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Third numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Numbered subheadings

To prefix <h3> headings that follow <h2> headings with sequential numbers, add a numbered class to each <h3> heading.

<h2 class="numbered">Numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Numbered heading

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Numbered subheading

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Numbered subheading

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Numbered subheading

Complex content composed of paragraphs, lists, tables, images, videos, widgets.