A textarea creates a multiline text field for messages, comments, notes, and other longer entries. Its opening and closing tags surround the initial content, while the name attribute identifies the submitted field and the id connects it to a label and JavaScript.

The text area HTML pattern also separates three related concepts: text placed between the tags, a placeholder hint, and the control’s current value. Each behaves differently in a form and in JavaScript.

Create and label a textarea

Give the control a unique id, then set the label’s for attribute to the same value. Add a name so the field can be included in form submission.

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

The label makes the purpose clear and gives users a larger target for focusing the field. The matching for and id attributes establish that connection. The name becomes the field’s submission key, such as message.

Unlike a void element such as input, a textarea requires both an opening tag and a closing tag. The content belongs between those tags, even when the field starts empty. A field without a name can still be read with JavaScript, but its value is not included in a normal form submission.

Initial content versus placeholder text

To supply initial text, write it between the opening and closing textarea tags:

<textarea id="message" name="message" rows="5" cols="40">Please include your order number.</textarea>

This text is the field’s initial value. It appears as real content, can be edited immediately, and is submitted if the user leaves it unchanged. Do not use a value attribute as the source of a textarea’s initial text. The content between the tags is the correct HTML mechanism.

A placeholder is only a temporary instruction or example:

<textarea id="message" name="message" placeholder="Describe the issue" rows="5" cols="40"></textarea>

The placeholder disappears when the user types and is not submitted as the field’s value. It should not replace a visible label or carry essential information. Keep the element empty between its tags when you want a placeholder rather than initial content.

Whitespace between the tags also becomes part of the initial content. Avoid unintended spaces or line breaks if the starting value must match an exact string.

Read and set the HTML textarea value

When a form is submitted, the browser sends the textarea’s current value under its name. For the earlier example, a field named message contributes a name-value pair similar to message=The user’s text. The exact encoding depends on the form’s method and encoding settings, but the submitted text comes from the current field value.

JavaScript reads that current value through the element’s value property:

const message = document.getElementById("message");
const currentText = message.value;

Use the same property to replace or append text:

message.value = "A new starting message";
message.value += "\nAdditional details";

The value property changes as the user types. It therefore represents the current, editable content, not necessarily the text originally written in the HTML. If you need the original markup-defined value, defaultValue represents that starting value. Calling a form reset restores the textarea to its default value.

Size and resize the control with rows and cols

The rows and cols attributes set the textarea’s approximate starting dimensions:

<textarea name="message" rows="8" cols="60"></textarea>

• rows indicates the approximate number of visible text lines.
• cols indicates the approximate character width.
• Neither attribute limits how much text the user can enter.

Font choice, browser rendering, and CSS can affect the displayed size. For consistent layouts, set the control’s width and height in an external stylesheet rather than relying only on cols and rows. Those HTML attributes still provide useful fallback dimensions and communicate the intended editing area.

Textareas are commonly resizable by dragging their corner. Set the CSS resize property to vertical when users may change the height but not the width, or to none when resizing should be disabled. Add a maxlength attribute when the field also needs a character limit; sizing alone does not enforce one.

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.