The HTML nav element identifies a major group of links that helps users move through a website or page. Use it for primary site navigation, a section menu, breadcrumbs, or an in-page table of contents when the group represents a meaningful navigation landmark.

The element describes the purpose of a link group, not its visual design. You can style the same semantic structure as a horizontal menu, sidebar, drawer, or mobile navigation without changing the markup.

What the HTML nav tag Represents

The HTML nav tag creates a navigation landmark for a collection of important links. Assistive technology can expose that landmark so people can move directly to major navigation areas instead of reading every link in document order.

Major navigation usually supports a broad movement task, such as moving between the main sections of a site, browsing categories, or jumping between the sections of a long article. Common examples include:

• A site-wide primary menu with links such as Home, Products, and Contact
• A section menu for related pages within a documentation or learning area
• An in-page menu linking to headings in a long article
• A breadcrumb trail showing the current page’s position in a hierarchy

Not every group of links needs a nav landmark. An isolated “Read more” link, a pair of related actions, or a small set of footer links may not represent major navigation. Avoid wrapping every isolated link or footer link group in nav without considering its navigational significance. Too many landmarks make page structure harder to scan, especially for people navigating by landmarks.

How to Mark Up a Primary HTML Navigation Menu

Place the primary menu near the site header when it represents the main route through the site. A list gives the links a clear group structure, while each anchor provides a specific destination. This complete example contains the nav element, an unordered list, and four links:

<nav aria-label=”Primary”>

  <ul>

    <li><a href=”/”>Home</a></li>

    <li><a href=”/services/”>Services</a></li>

    <li><a href=”/about/”>About</a></li>

    <li><a href=”/contact/”>Contact</a></li>

  </ul>

</nav>

The aria-label gives this landmark a concise name. Keep link text specific and meaningful when read on its own. The nav element does not require a list, but lists are often the clearest choice for a menu because they express that the links belong to one set. CSS can control spacing, alignment, dropdown behavior, and responsive presentation separately from this structure.

When to Use More Than One nav Element in HTML

A page can contain several navigation landmarks when each one serves a distinct purpose. For example, a header may contain the primary site menu, while the article contains an in-page contents menu. Both are valid because they help users navigate different scopes.

Give each landmark a distinct accessible name when more than one appears on the page. For example, use Primary navigation, Section navigation, or On this page rather than assigning the same generic label to every region:

• Primary navigation: links to the main areas of the website
• Section navigation: links to related pages within the current area
• On this page: links to headings in the current document

A visible heading or text label can also distinguish navigation regions for sighted readers. When the label needs to name the landmark for assistive technology, provide an accessible name such as an appropriate aria-label. Distinct names make landmark lists useful instead of forcing users to inspect each region.

How Lists, Labels, and Page Structure Clarify Navigation

Use one list item for each navigation destination, and keep the hierarchy aligned with the information architecture. A nested list can represent a submenu under a parent category. The visual design may hide or reveal that submenu, but the underlying relationships should remain understandable.

Keep navigation links in a logical order, starting with the most important or frequently used destinations. Use consistent wording between the menu label and the destination heading. For an in-page menu, link text such as Features or Pricing is clearer than repeated labels such as Read more.

In the phrase HTML navigation, the important distinction is semantic grouping: nav identifies a meaningful route through content, while lists organize the links within that route. Use both when they clarify the page, and leave smaller link groups as ordinary content when adding a landmark would not help users.

HTML arrows use Unicode characters, so each symbol has a decimal character reference and a hexadecimal reference. The examples below pair the rendered arrow with both numeric forms and copyable markup.

Use a literal Unicode character when your editor and document are saved as UTF-8. Use a numeric reference when you want the source to state the character code explicitly. The numeric form is an HTML arrow code that browsers convert into the same visible symbol.

Common HTML arrows: left and right symbols

These are the standard horizontal arrows for navigation, labels, pagination, and directional instructions.

• ← Left arrow — decimal &#8592;; hexadecimal &#x2190;. Example: <span>←</span> or <span>&#8592;</span>.
• → Right arrow — decimal &#8594;; hexadecimal &#x2192;. Example: <span>→</span> or <span>&#8594;</span>.
• ↔ Left-right arrow — decimal &#8596;; hexadecimal &#x2194;. Example: <span>↔</span> or <span>&#8596;</span>.

How do you add an up arrow in HTML?

To insert an arrow in HTML, use its literal Unicode character or numeric reference. An up arrow in HTML commonly indicates sorting, expansion, elevation, or movement toward the beginning of a list. A down arrow in HTML can indicate the opposite direction.

• ↑ Up arrow — decimal &#8593;; hexadecimal &#x2191;. Example: <span>↑</span> or <span>&#8593;</span>.
• ↓ Down arrow — decimal &#8595;; hexadecimal &#x2193;. Example: <span>↓</span> or <span>&#8595;</span>.
• ↗ Up-right arrow — decimal &#8599;; hexadecimal &#x2197;. Example: <span>↗</span> or <span>&#8599;</span>.
• ↘ Down-right arrow — decimal &#8600;; hexadecimal &#x2198;. Example: <span>↘</span> or <span>&#8600;</span>.

Double and long HTML arrow code examples

Double arrows suit logical relationships, transformations, and two-way actions. Long arrows are useful when the symbol needs more visual emphasis in a heading or diagram label.

• ⇐ Left double arrow — decimal &#8656;; hexadecimal &#x21D0;. Example: <span>⇐</span>.
• ⇒ Right double arrow — decimal &#8658;; hexadecimal &#x21D2;. Example: <span>⇒</span>.
• ⇔ Left-right double arrow — decimal &#8660;; hexadecimal &#x21D4;. Example: <span>⇔</span>.
• ⟵ Long left arrow — decimal &#10229;; hexadecimal &#x27F5;. Example: <span>⟵</span>.
• ⟶ Long right arrow — decimal &#10230;; hexadecimal &#x27F6;. Example: <span>⟶</span>.
• ⟷ Long left-right arrow — decimal &#10231;; hexadecimal &#x27F7;. Example: <span>⟷</span>.

How do you use an arrow in HTML with UTF-8?

Save the HTML document as UTF-8 and declare that encoding in the document head with <meta charset=”UTF-8″>. This allows literal arrow characters to be stored and displayed consistently when the selected font supports them.

Literal-character markup looks like <p>Next →</p>. Numeric-reference markup looks like <p>Next &#8594;</p> or <p>Next &#x2192;</p>. All three forms render as “Next →”. Decimal and hexadecimal references are interchangeable; choose the format that best matches your project’s coding conventions.

Use an arrow as text when it carries meaning, and include a word label when direction alone could be unclear. Unicode arrow characters are text glyphs; they are not the same as arrows drawn with CSS borders or other visual styling.

A submit button activates its associated form and asks the browser to send the form’s successful controls. The clearest syntax is an explicit button element with type=”submit”, a label, and, when needed, a name and value.

The examples below show a working form, the equivalent input syntax, and the data each control contributes when activated.

Submit button: create a complete HTML form

Place the button between the opening and closing form tags. Give the form an action URL and a method so the browser knows where and how to send the data.

Complete button example: <form action=”/signup” method=”post”> <label for=”email”>Email address</label> <input id=”email” name=”email” type=”email” required /> <button type=”submit”>Sign up</button> </form>

When the visitor activates “Sign up,” the browser sends the email field to /signup. With method=”post”, the data normally goes in the request body. With method=”get”, it is appended to the action URL as a query string.

Always write type=”submit” when the button is intended to submit the form. A button inside a form defaults to the submit behavior if its type is omitted, but an explicit type makes the intent clear and prevents accidental submissions when the form changes.

Compare an HTML submit button with an input control in complete forms

An HTML submit button can contain text and other permitted button content. Its visible label is the content between the opening and closing tags. An input submit control is a void element, so its label comes from the value attribute.

Complete button-element form: <form action=”/search” method=”get”> <label for=”term”>Search</label> <input id=”term” name=”q” type=”search” /> <button type=”submit”>Search the site</button> </form>

Complete input-element form: <form action=”/search” method=”get”> <label for=”term”>Search</label> <input id=”term” name=”q” type=”search” /> <input type=”submit” value=”Search the site” /> </form>

Both forms send the same search field, such as q=html. Use button when you need richer content or several distinct actions. Use input type=”submit” for a simple text-only control.

What a form submit button sends: name, value, and disabled state

A form submit button sends its own name-value pair only when it has a name, a value, and is the button that activated the form. The button’s visible text is not submitted automatically.

<form action=”/orders” method=”post”> <input name=”order_id” value=”4821″ /> <button type=”submit” name=”action” value=”save”>Save order</button> <button type=”submit” name=”action” value=”preview”>Preview order</button> </form>

If “Save order” is activated, the request includes order_id=4821 and action=save. If “Preview order” is activated, the action value is preview instead. This lets the server distinguish multiple actions in one form.

A disabled form submit button cannot be activated and does not contribute its name or value to submitted data. The disabled attribute is useful when an action is temporarily unavailable: <button type=”submit” name=”action” value=”delete” disabled>Delete order</button>. A disabled field elsewhere in the form is also omitted from the request.

Choose a button with type=”submit” or type=”button”, inside or outside a form

Use type=”button” for a control that should not submit the form, such as a button that opens a panel, adds a row, or runs client-side behavior. Without that type, a button inside the form is a submit control by default.

<form action=”/profile” method=”post”> <input name=”display_name” /> <button type=”button”>Show character count</button> <button type=”submit”>Save profile</button> </form>

The first button does not submit; the second does. A button outside the form can still be associated with it through the form attribute, whose value must match the form’s id.

<form id=”profile-form” action=”/profile” method=”post”> <input name=”display_name” /> </form> <button type=”submit” form=”profile-form” name=”action” value=”save”>Save profile</button>

This outside button submits profile-form and contributes action=save. The form attribute is useful when layout requirements place the controls alongside, rather than inside, the form.

An HTML aside marks content that is tangentially related to the surrounding content, not content merely positioned at the side of a screen. Its meaning comes from its relationship to the nearest relevant section, article, or page.

Use the element when the material can be removed without breaking the main narrative, while still offering useful context. Ordinary CSS can then place it beside, below, or within that content.

What does the aside element define?

The aside element defines a complementary section whose connection to the main content is useful but not essential. “Tangentially related” means the content supports, explains, or extends the subject without being part of its central sequence.

Appropriate examples include a glossary note in a technical article, a pull quote, an author biography, related resources, background facts, or a short explanation of a term used in the surrounding section. A page-level related-links panel or secondary information box can also be an aside.

Do not use aside solely because a block appears visually on the side of the page. A sidebar created for layout may contain an aside, but position alone does not establish the element’s meaning. Information essential to the main instructions, argument, or process belongs in the primary content instead.

HTML aside: Article-local versus page-level placement

An article-local aside belongs inside the article it supports. For example, an article about CSS grid might contain an aside defining the gap property, listing related grid concepts, or highlighting a supporting fact. The relationship is specifically to that article.

A page-level aside sits outside the article, usually as a sibling to it within main. It can provide related reading, an author profile, a secondary navigation group, or a complementary signup prompt for the page as a whole. If a page contains several articles, a shared related-links panel may be more appropriately associated with the page than with any single article.

This distinction is semantic rather than visual. An article-local aside may render as an inset box, while a page-level aside may appear below the article on a narrow screen. Both positions are valid when the content relationship is correct.

Aside element HTML: A complete markup example

The following example shows both placements. The first aside is part of the article; the second is related to the page-level content around that article.

Example: <main> <article> <h2>Understanding grid gaps</h2> <p>The gap property sets space between grid tracks.</p> <aside> <h3>Related term</h3> <p>A grid track is a row or column in the grid.</p> </aside> </article> <aside> <h2>Related guides</h2> <ul> <li>Flexible grid columns</li> <li>Responsive layout basics</li> </ul> </aside> </main>

Keep the primary information in the article or main content. Give an aside a useful heading when its purpose is not immediately clear, and use a list or other appropriate element for the content inside it.

CSS aside styling: How to build sidebars and callouts

The aside element has no mandatory visual position, width, color, or layout behavior. Style it with the same CSS layout tools used for other elements. Contextual selectors help distinguish an article-local callout from a page-level sidebar.

A general treatment might be:

aside { padding: 1rem; border: 1px solid #cbd5e1; background: #f8fafc; } article > aside { margin-block: 1.5rem; border-inline-start: 0.25rem solid #64748b; }

To create a wide-screen sidebar for the page-level example, use a grid on the containing main element:

main { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; } main > aside { align-self: start; } @media (max-width: 48rem) { main { grid-template-columns: 1fr; } }

This layout places a direct child aside beside the article on larger screens and lets it stack naturally below the article on smaller screens. The HTML relationship remains unchanged, so the same markup supports sidebars, inline callouts, or full-width complementary sections.

Use this iframe code to embed another HTML page inside the current page:

<iframe src=”https://example.com/embed” title=”Example embedded page” width=”800″ height=”450″></iframe>

The src attribute supplies the URL to load. The title describes the embedded content for people using assistive technology. The width and height set the iframe viewport, usually in CSS pixels when declared as HTML attributes.

How do you write basic iframe code with src, title, width, and height?

Start with the smallest complete element, then add styling only when the embed requires it. The opening and closing tags create the embedded browsing context, while the attributes define its source, accessible name, and initial dimensions.

• src: The page or resource displayed inside the iframe. Use the complete embed URL provided by the service or application.
• title: A short, meaningful description such as “Product demonstration” or “Store locator.” Avoid repeating a generic label across several iframes.
• width: The initial horizontal size of the embedded viewport.
• height: The initial vertical size of the embedded viewport.

Keep the title even when the iframe is visually obvious. It provides context to visitors who navigate by landmarks or embedded content.

How should you set an iframe’s width and height?

Use CSS for responsive sizing and reserve HTML width and height attributes for a simple fallback or an intrinsic starting size. A common stylesheet is:

iframe { display: block; width: 100%; max-width: 800px; height: 450px; }

This makes the iframe fill its available container up to 800 pixels while keeping a predictable 450-pixel viewport. Set a definite height when the embedded page must remain usable on smaller screens. Width alone does not make the height adapt to the embedded page.

For a consistently proportioned video or presentation, CSS can use an aspect ratio instead:

iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }

Test the result at narrow and wide viewport sizes. An embed that is too short may create unnecessary internal scrolling, while an oversized fixed height can leave excessive empty space.

How do you style an iframe border with CSS instead of legacy frameborder?

Style the iframe element with the CSS border property:

iframe { border: 1px solid #c7c7c7; }

Use border: 0; when the embedded design should blend into the surrounding page. You can also set individual sides, color, width, and radius in CSS. The phrase iframe frame border usually refers to this visible edge around the embedded viewport.

The frameborder HTML attribute is legacy markup. Do not use frameborder=”0″ as the current implementation. Replace it with a CSS rule such as border: 0;, or define the border explicitly so its appearance remains consistent across browsers and themes.

How does iframe scrolling work, and what replaces the legacy scrolling attribute?

An iframe has its own document and viewport. When the embedded document is taller or wider than that viewport, the embedded page normally scrolls inside the frame. Changing the iframe’s dimensions does not automatically resize it to fit all of the embedded content.

The scrolling attribute is legacy markup. Do not use values such as scrolling=”no” or scrolling=”auto” for new implementations. Control overflow in the embedded document with CSS:

html, body { overflow: auto; }

Use overflow: hidden; only when the embedded content is designed to fit without scrolling:

html, body { overflow: hidden; }

This CSS must apply inside the embedded page. If the iframe loads content from another origin, the parent page cannot directly change that page’s overflow rules. In that case, use the provider’s responsive embed method, an appropriate fixed height, or a documented messaging and resize system. The host page’s CSS can size and border the iframe, but the embedded document controls its own internal layout and scrolling.

To make a link clickable in HTML, place the destination in an anchor element and put the visible link text between its opening and closing tags. The anchor works for page URLs, email addresses, and phone numbers; only the href value changes.

This basic pattern shows how to make a link clickable:

<a href=”https://example.com”>Visit Example</a>

How to Make a Link Clickable in HTML

The opening tag identifies the element as an anchor. Its href attribute holds the destination. In this example, the href value is https://example.com, while Visit Example is the clickable link text. The closing tag ends the anchor. When a visitor activates it, the browser requests the address in href.

Use quotation marks around every href value, and keep the opening and closing tags paired. An anchor can wrap text or another inline element, so the destination remains attached to the content users activate.

HTML does not make a URL clickable merely because it appears as visible text. The URL must be assigned to href, and the words or element users select must appear between the anchor tags. An anchor without href is not a working navigation link.

How to Create a Clickable Link With Absolute and Relative URLs

An absolute URL contains the full protocol and domain, such as https://www.example.com/pricing. It identifies the same destination from any page on the web. Use an absolute URL for an external website or when you need an explicit address that can be copied and shared.

A relative path leaves out the protocol and domain because the browser resolves it from the current site. A root-relative path begins with a slash, as in:

<a href=”/pricing”>Pricing</a>

This points to the pricing page at the site’s root. A document-relative path names a location based on the current folder, as in:

<a href=”contact.html”>Contact us</a>

Relative paths are useful for links between pages in the same website, but they depend on the site’s folder structure. If the current page is inside a subfolder, a path such as ../contact.html moves up one folder before looking for the file. Check the deployed URL structure rather than assuming it matches your local files.

How to Hyperlink a Website, Email Address, or Phone Number

Website navigation uses the same anchor syntax. An absolute URL is usually safest when linking to another domain, while a relative path suits another page within your own site:

<a href=”https://www.example.com”>Example website</a>

For an email address, use a mailto: destination instead of a page URL:

<a href=”mailto:[email protected]”>Email us</a>

Clicking a mailto link typically opens the visitor’s default email application with the address ready in the To field. This is an email action, not ordinary page navigation. A subject can be added with a query value, such as mailto:[email protected]?subject=Project%20enquiry.

For a phone number, use tel: followed by the number:

<a href=”tel:+15551234567″>Call +1 555 123 4567</a>

On a compatible device, clicking it opens the phone app or prompts the visitor to call. A tel link does not load a website page.

How to Check Link Text and Destination Values

Check both sides of the link before publishing. The text should describe the destination, and the destination should match what the text promises. “Read the pricing guide” is more useful than “click here” when the link leads to pricing information.

• Confirm that href contains the complete intended URL or the correct relative path.
• Check the protocol, domain spelling, slashes, and quotation marks.
• Test the link from the page where it appears, especially when using a relative path.
• For mailto and tel links, verify the email address or phone number separately.
• Use descriptive link text so visitors understand the destination before activating it.

If the browser displays the words but clicking does nothing, look for a missing href, malformed quotes, a misspelled protocol, or an incorrect relative path. If the link opens the wrong page, compare the path with the site’s folder structure and check slash placement. A correctly paired anchor, valid href value, and accurate link text produce a working clickable link.