What is HTML `== <map== >` tag?

  • Join  Lenovo Pro Business Store

    Log In / Sign Up

    Learn More

    Community


  • Accessibility
  • Sales:

    Home:

    1-855-253-6686

    Business:

    1-866-426-0911

    Chat Now >

    Visit Sales Support Page >


    Order Support:

    Order Lookup >

    Visit Order Support Page >

    Technical Support >

Lenovo
All
  • All
  • Laptops
  • Desktops
  • Workstations
  • Monitors
  • PC Accessories & Electronics
  • Tablets
  • Servers & Storage
  • Servers Accessories
  • Sign In / Create Account
    My Lenovo Account
    Keep track of your wishlist, orders, and rewards all in one place
    Sign In / Create Account
    Welcome Back!
    Access your order, subscriptions, saved carts, rewards balance, and profile
    View My Account
    Orders
    View & track your orders
    Rewards
    Earn & redeem Rewards
    Profile
    Edit name, password, and account settings
    Wishlist
    Manage a wishlist of your favorite products
    Products
    Manage your devices, accessories
    Product Registration
    Register your product and/or update your warranty dates
    Lenovo Family Hub
    Manage your family's orders all in one place
    Sign Out
  • My Lenovo Rewards
  • Cart
  • Products
  • Solutions
  • Services
  • Support
  • About Lenovo
  • Deals
  • Business
  • Student
  • Gaming
  • Laptops
  • Desktops
  • Workstations
  • Accessories
  • Software
  • Monitors
  • Tablets
  • Servers & Storage
  • Home & Office
  • AI
  • Deals
TEMPORARILY UNAVAILABLE
DISCONTINUED
Temporary Unavailable
Cooming Soon!
. Additional units will be charged at the non-eCoupon price. Purchase additional now
We're sorry, the maximum quantity you are able to buy at this amazing eCoupon price is
Sign in or Create an Account to Save Your Cart!
Sign in or Create an Account to Join Rewards
Temporarilyunavailable
Discontinued
comingsoon
View Cart
Remove
minicart_error_please_view
Your cart is empty! Don’t miss out on the latest products and savings — find your next favorite laptop, PC, or accessory today.
item(s) in cart
Some items in your cart are no longer available. Please visit cart for more details.
has been deleted
Please review your cart as items have changed.
of
Contains Add-ons
Subtotal
Proceed to Checkout
Yes
No
Popular Searches
What are you looking for today ?
Trending
Recent Searches
Items
All
Cancel
Top Suggestions
View All >
Starting at
  • Black Friday in July! Limited-time Doorbusters + Buy more, Save more!  Shop Now >

  • Buy online, pick up select products at Best Buy. Shop Pick Up >

  • My Lenovo Rewards! Earn 3%-9% in rewards and get free expedited delivery on select products. Join for Free >

  • Shopping for a business? New Lenovo Pro members get $100 off first order of $1,000+, exclusive savings & 1:1 tech support. Learn More >

  • Lease-to-own today with Katapult. Get started with an initial lease payment as low as $1! * Learn More >

Home > Glossary > What is HTML `` tag?
Glossary Hero
Learn More
StarStar

Annual Sale

Lenovo Laptop SaleLenovo Laptop Sale

Laptop Deals

Desktop DealsDesktop Deals

Desktop Deals

Workstation DealsWorkstation Deals

Workstation Deals

StoreStore

Pick Up Today at Best Buy

ControllerController

Gaming PC & Accessory Deals

MouseMouse

PC Accessories & Electronics Deals

MonitorMonitor

Monitor Deals

Tablet and phoneTablet and phone

Tablets & Phones Deals

ServerServer

Server & Storage Deals

Discount tagDiscount tag

Clearance Sale


What is HTML `<map>` tag?

The HTML `<map>` tag is used to define an image map. An image map is a single image with multiple clickable areas, which can be linked to different destinations. This tag helps enhance user interactivity by allowing parts of the image to act as separate hyperlinks.

How do I create an image map using the HTML `<map>` tag?

To create an image map using the HTML ` <map>` tag, you first need an image. Then, you define a ` <map>` element with several ` <area>` elements inside it. Each ` <area>` defines a clickable region and what URL it should link to. You reference the ` <map>` in the ` <img>` tag using the `usemap` attribute.

Does the HTML `<map>` tag support all image formats?

The HTML `<map>` tag supports all standard image formats, such as JPEG, PNG, and GIF. The effectiveness of the image map depends not on the image format, but rather on how well the `<area>` elements are defined within the `<map>` tag.

Can I use the HTML `<map>` tag with responsive images?

Yes, you can use the HTML `<map>` tag with responsive images. By incorporating CSS media queries and the `srcset` attribute within the `<img>` tag, you can ensure the image scales according to the screen size, without affecting the clickable areas defined by the HTML `<map>` tag.

What attributes are commonly used with the HTML `<map>` tag?

The main attribute used with the HTML `<map>` tag is the `name` attribute, which is used to reference the map. Each `<area>` element within the `<map>` tag can have attributes like `shape`, `coords`, `href`, `alt`, and `target`, which define the clickable areas and their behaviors.

Does the HTML `<map>` tag improve user navigation?

The HTML `<map>` tag can improve user navigation by providing a graphical interface with multiple interactive regions. This can make navigation more intuitive, especially for visually rich websites like e-commerce platforms or educational sites that rely on detailed images.

Can I use the HTML `<map>` tag for accessibility purposes?

Yes, you can enhance the accessibility of image maps using the HTML `<map>` tag by including descriptive `alt` attributes for each `<area>` element. This ensures screen readers can narrate the purpose of each clickable region, making the image map usable for visually impaired users.        

How does an `<area>` element function within an HTML `<map>` tag?

An `<area>` element within an HTML `<map>` tag defines a specific clickable area. It includes attributes like `shape` (to specify the shape of the clickable area), `coords` (to define the coordinates of the clickable region), `href` (URL to link to), and `alt` (alternative text for accessibility).

Does the `<map>` tag affect the performance of a webpage?

The HTML ` <map>` tag itself has minimal impact on webpage performance. However, the complexity and size of the image being used can influence page load times. It’s a good practice to optimize images and ensure efficient definition of clickable areas within the ` <map>` tag.

Can I style clickable areas defined by the HTML `<map>` tag?

Clickable areas within the HTML `<map>` tag cannot be styled directly using CSS. However, you can overlay CSS elements on top of the image map or use JavaScript for more advanced styling and interactivity. The `<area>` elements themselves are not visual, so direct CSS styling is not applicable.

How do I test if my HTML `<map>` tag works correctly?

To test if your HTML `<map>` tag works, you can interact with the image in a web browser. Click on each defined area to see if it navigates to the intended URL. Additionally, inspecting the HTML using browser developer tools can help verify that the coordinates and shapes are set correctly.

Can I use multiple `<map>` tags on a single web page?

Yes, you can use multiple HTML <map>` tags on a single web page. Each ` <map>` should have a unique `name` attribute, and every `<img>` tag referencing a map should use the corresponding `usemap` attribute to link to it.

Does the order of `<area>` elements within the HTML `<map>` tag matter?

The order of `<area>` elements within the HTML `<map>` tag does not technically matter. However, arranging `<area>` elements logically can improve readability and maintenance of your code. A well-organized `<map>` can make it easier to understand and update the clickable regions.

What browsers support the HTML `<map>` tag?

Most modern browsers, including Chrome, Firefox and Edge, support the HTML `<map>` tag. Ensuring your image map works across different browsers can usually be achieved by adhering to standard HTML specifications and testing in multiple environments.

Can I use JavaScript with the HTML `<map>` tag?

Yes, you can use JavaScript to enhance the functionality of an HTML `<map>` tag. By adding event listeners to the clickable areas, you can create dynamic behaviors, such as pop-ups, tooltips, or even animations, when users interact with the image map.

How do I reference the HTML `<map>` tag in my `<img>` tag?

To reference the HTML `<map>` tag in your `<img>` tag, use the `usemap` attribute, followed by the `name` attribute value of the `<map>`. For example, if your `<map>` tag has `name="interactiveMap"`, you should include `usemap="#interactiveMap"` in your `<img>` tag.

Does the HTML `<map>` tag support polygonal clickable areas?

Yes, the HTML `<map>` tag supports polygonal clickable areas through the `shape="poly"` attribute within `<          area>` elements. You define the clickable shape using the `coords` attribute by listing a series of x, y coordinates that outline the polygon.

How does the `shape` attribute work within the HTML `<map>` tag?

The `shape` attribute within an HTML `<map>` tag specifies the geometric shape of a clickable area. Common values include `rect` for rectangles, `circle` for circles, and `poly` for polygons. You further define these shapes using the `coords` attribute to set their dimensions or boundaries.

What is the significance of the `coords` attribute in the HTML `<map>` tag?

The `coords` attribute in the HTML `<map>` tag defines the exact coordinates for clickable areas. For rectangles, you specify the top-left and bottom-right corners; for circles, the center point and radius; for polygons, a series of x, y coordinates. This precise definition ensures each area functions as intended.

Can I use <map> tags with SVG images?

The <map> tag is specifically designed for use with bitmap images, like JPEGs or PNGs, rather than SVGs (Scalable Vector Graphics). SVGs have their own methods for creating interactive areas through inline JavaScript or CSS. If you need to make an SVG interactive, you can use SVG-specific elements and attributes to create clickable regions directly within the SVG code. This approach allows for more flexibility and precision when working with vector graphics, maintaining high-quality visuals at any size.

Can image maps be used for mobile navigation?

Image Maps can be used for mobile navigation, but they require careful design and testing. Since mobile screens are smaller, you must ensure that clickable areas are large enough to be easily tapped. Responsive design techniques, combined with dynamic coordinate adjustments, help maintain functionality across devices. While image maps can enhance mobile navigation, consider simpler alternatives like regular links or buttons for critical navigation tasks to ensure the best user experience on all devices.

Looking for a Great Deal?
Shop Lenovo.com for great deals on A+ Education PCs, Accessories, Bundles and more.
Shop Deals Now

  • Legion 7i Gen 9 (16″ Intel) Gaming Laptop
    Starting at
    $1,699.99
    Learn More
  • ThinkPad X9 15 Aura Edition (15ʺ Intel) Laptop
    Starting at
    $1,195.92
    Learn More
  • Yoga Book 9i (13” Intel)
    Starting at
    $1,999.99
    Learn More
  • Yoga 9i 2-in-1 Aura Edition (14″ Intel) Laptop
    Starting at
    $1,439.99
    Learn More
  • ThinkPad P1 Gen 7 (16″ Intel) Mobile Workstation
    Starting at
    $2,399.00
    Learn More
  • Shop
    • Student Deals
    • K-12 Student Laptops
    • Student Accessories
    • Laptops by Major
    Education resource
    Explore
    • What is STEM?
    • Best Laptops for College
    • Student & Teacher Discounts
    • Lenovo Sustainability Programs
    Education carry case

    Stem Articles
    See All STEM Articles
    • Online STEM Education

    • STEM Career Tips & Resources

    • Women in STEM

    • STEM Educator Training

    • STEM Grants & Funding

    • STEM Education: Coding for Kids

    • STEM Education: Robotics

    • STEM Education: Biotechnology

    • STEM Education: Sustainability

    • STEM Education: AI & ML

    While every effort has been made to ensure accuracy, this glossary is provided for reference purposes only and may contain errors or inaccuracies. It serves as a general resource for understanding commonly used terms and concepts. For precise information or assistance regarding our products, we recommend visiting our dedicated support site, where our team is readily available to address any questions or concerns you may have.

    Why Lenovo?

    Go Greener with Leno...

    Lenovo is committed to Smarter Climate Action with lower energy laptops, use of sustainable materials and packaging, and available CO2 Offset Services.
    Learn More
    pastel background

    Get It Now, Pay For ...

    Lenovo has multiple financing option: the Lenovo Credit Card, installment plans, and lease-to-own financing op...
    Learn More
    pastel background

    Productivity & Peace of Mind

    Stay productive with Premium Care Plus - 24/7 priority support and coverage against accidental damage. Power through your day with our Smart Performance and extended battery solutions.
    Learn More
    pastel background

    Fast & Secure

    Get the most from your laptop with Lenovo’s state-of-the-art Smart Performance, delivering powerful, all-in-on...
    Learn More
    pastel background

    Assistance and Suppo...

    Chat with a trained professional who can help you find the right products, place or check on an order, or setup your Education laptop.
    Contact Us
    pastel background
    Enter email to receive Lenovo marketing and promotional emails. Review our Privacy Statement for more details.
    Please enter the correct email address!
    Email address is required
    • Facebook
    • Twitter
    • Youtube
    • Pinterest
    • TikTok
    • Instagram
    Select Country / Region:
    Country
    AndroidIOS

    About Lenovo

    • Our Company
    • News
    • Investors Relations
    • Compliance
    • ESG
    • Product Recycling
    • Product Security
    • Product Recalls
    • Executive Briefing Center
    • Lenovo Cares
    • Careers
    • Formula 1 Partnership

    Products & Services

    • Laptops & Ultrabooks
    • Smarter AI for You
    • Desktop Computers
    • Workstations
    • Gaming
    • Tablets
    • Servers, Storage, & Networking
    • Accessories & Software
    • Services & Warranty
    • Product FAQs
    • Outlet
    • Deals
    • Lenovo Coupons
    • Cloud Security Software
    • Windows 11 Upgrade

    Shop By Industry

    • Small Business Solutions
    • Large Enterprise Solutions
    • Government Solutions
    • Healthcare Solutions
    • Higher Education Solutions
    • Education Discounts
    • Discount Programs

    Resources

    • Legion Gaming Community
    • Lenovo EDU Community
    • Lenovo Pro Community
    • Lenovo Pro for Business
    • My Lenovo Rewards
    • Lenovo Financing
    • Lenovo Trade-in
    • Customer Discounts
    • Affiliate Program
    • Affinity Program
    • Employee Purchase Program
    • Lenovo Partner Hub
    • Laptop Buying Guide
    • Where to Buy
    • Glossary

    Customer Support

    • Contact Us
    • Policy FAQs
    • Return Policy
    • Shipping Information
    • Order Lookup
    • Register a Product
    • Replacement Parts
    • Technical Support
    • Forums
    • Provide Feedback
    © 2025 Lenovo. All rights reserved.
    PrivacyCookie Consent ToolDo Not Sell or Share My Personal InformationU.S. Privacy NoticeSite MapTerms of UseExternal Submission PolicySales terms and conditionsAnti-Slavery and Human Trafficking Statement
    Compare  ()
    x
    Call

    Need Help? Call: 

    1-855-253-6686
    Select Your Store
    Add items to your cart?
    We've noticed that you've entered a different store. Do you want to add these items to your cart in the new store?
    No Yes. Add in Lenovo Pro