diff --git a/editor/components/document-outline/index.js b/editor/components/document-outline/index.js
index 184f8873fbb62..9b49d6a646af2 100644
--- a/editor/components/document-outline/index.js
+++ b/editor/components/document-outline/index.js
@@ -95,9 +95,16 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 	// Select the corresponding block in the main editor
 	// when clicking on a heading item from the list.
 	const onSelectHeading = ( uid ) => onSelect( uid );
+	const titleNode = document.querySelector( '.editor-post-title__input' );
+	const titleId = () => {
+		if ( typeof titleNode.getAttribute( 'id' ) ) {
+			titleNode.setAttribute( 'id', 'id-' + titleNode.innerHTML );
+		}
+
+		return titleNode.getAttribute( 'id' );
+	};
 	const focusTitle = () => {
 		// Not great but it's the simplest way to focus the title right now.
-		const titleNode = document.querySelector( '.editor-post-title__input' );
 		if ( titleNode ) {
 			titleNode.focus();
 		}
@@ -115,6 +122,7 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 						level="Title"
 						isValid
 						onClick={ focusTitle }
+						titleId={ titleId }
 					>
 						{ title }
 					</DocumentOutlineItem>
diff --git a/editor/components/document-outline/item.js b/editor/components/document-outline/item.js
index 0b041f1740a7c..264ee3019b8f0 100644
--- a/editor/components/document-outline/item.js
+++ b/editor/components/document-outline/item.js
@@ -19,6 +19,7 @@ const TableOfContentsItem = ( {
 	level,
 	onClick,
 	path = [],
+	titleId,
 } ) => (
 	<li
 		className={ classnames(
@@ -29,9 +30,10 @@ const TableOfContentsItem = ( {
 			}
 		) }
 	>
-		<button
-			className="document-outline__button"
+		<a
 			onClick={ onClick }
+			className="document-outline__trigger"
+			href={ '#' + titleId }
 		>
 			<span className="document-outline__emdash" aria-hidden="true"></span>
 			{
@@ -50,7 +52,7 @@ const TableOfContentsItem = ( {
 				{ children }
 			</span>
 			<span className="screen-reader-text">{ __( '(Click to focus this heading)' ) }</span>
-		</button>
+		</a>
 	</li>
 );
 
diff --git a/editor/components/document-outline/style.scss b/editor/components/document-outline/style.scss
index f4470fcdaa47e..a21fa2eb059df 100644
--- a/editor/components/document-outline/style.scss
+++ b/editor/components/document-outline/style.scss
@@ -37,7 +37,7 @@
 	}
 }
 
-.document-outline__button {
+.document-outline__trigger {
 	cursor: pointer;
 	background: none;
 	border: none;
@@ -45,10 +45,15 @@
 	align-items: flex-start;
 	color: $dark-gray-800;
 	text-align: left;
+	text-decoration: none;
 
 	&:focus {
 		@include button-style__focus-active;
 	}
+
+	.document-outline__item-content {
+	  text-decoration: underline;
+	}
 }
 
 .document-outline__level {