I want to put the english and spanish flags on the homepage of my website:

Dani AI

Generated

As asked about putting English and Spanish flags on the homepage and noted the basic image-in-link approach, here are practical, modern best practices to make those icons usable, accessible, and SEO-friendly.

Use a linked image for each language but include readable text and proper attributes so screen readers and search engines know what each link does. Keep icons as lightweight SVGs and provide a short visible label or a screen-reader-only label. Example pattern:

<a href="/en/" lang="en" title="English" hreflang="en">
  <img src="/img/flag-en.svg" alt="English" width="24" height="16" />
  <span class="sr-only">English</span>
</a>

<a href="/es/" lang="es" title="Espanol" hreflang="es">
  <img src="/img/flag-es.svg" alt="Espanol" width="24" height="16" />
  <span class="sr-only">Espanol</span>
</a>

Include a small CSS rule for .sr-only to hide visible text without removing it for assistive tech. Avoid using flags alone as they represent countries, not languages; show the language name (English, Espanol) beside or under the flag. Use language-specific URLs (subfolders or subdomains), remember the user choice with a cookie/localStorage instead of forced geo-redirects, and add rel="alternate" hreflang entries in the head for search engines. See Google on managing multilingual sites and MDN on the lang attribute for implementation details (Google guide, MDN lang attribute).

Recommended Answers

All 2 Replies

Member Avatar for Member #905211

Get the images you want then add the code to put them on the page:

http://www.w3schools.com/htmL/html_images.asp

You may also want to pick up a book on HTML as this is one of the most basic things.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.