Skip to main content
U.S. flag

An official website of the United States government

Web Browser Tip: Title Tag

By The National Map Corps

Sometimes TNMCorps volunteers face challenges verifying metadata on structures, e.g., a renamed school. An overlooked potential option is working knowledge of HyperText Markup Language or HTML. 

Your friend HTML

When we browse the web to get from the address (URL) we input to the webpage with which we can interact, we're really using many layers of technology and many different systems. We don't see everything that goes on behind the scenes to show us our webpages, so we often forget or we're not aware of how the whole process works.

The three technologies that power the front end of websites include HTML, CSS, and JavaScript. HTML is the language of web content, CSS is the language of web style, and JavaScript is the language of web applications that bring all of this together. HTML is all about the page structure, identifying commonly used structural elements like titles, headings, lists, paragraphs, and more. Computers understand the structure of a document through this type of markup. This will help you as a The National Map Corps editor when validating structure metadata. 

How to Inspect HTML

Every modern web browser includes a set of integrated developer tools, which allow you to inspect and test your code right in the browser. There are several ways to access the developer tools.

  • You can right click on the webpage with your mouse or two-finger tap on a track pad to open the menu. Then select 'Inspect'.
  • You can also use the browser's menu bar. This varies across browsers, but it's usually listed under something called tools.
  • You can also use a keyboard shortcut, command option I, for Macs, control, shift I for Windows or Linux.

Use case: Charger Academy School

HTML source code for Charger Academy's homepage
Sources/Usage: Public Domain. View Media Details
Charger Academy’s HTML code from their homepage. You'll notice that elements are nested inside of each other like wooden dolls. 

Let’s consider Charger Academy’s HTML code, what do you see? Aside from the actual content, an HTML document is visible. You'll notice that elements are nested inside of each other like wooden dolls. That's the proper way to work with your HTML tags. These tags represent HTML elements described by the W3C's web standards, and these elements are theoretically universally understood and interpreted by web browsers. Elements are the building blocks of the web and the reason the web works. HTML is an excellent source of descriptive information about a structure.

 

Title tag

The title tag shows that Charger Academy was formerly called Covington Integrated Arts Academy
Sources/Usage: Public Domain. View Media Details
Charger Academy was formerly called Covington Integrated Arts Academy. The title tag in a web browser is written in html and a great resource to crawl. 

The text in the title tag displays in several locations. First, it serves as the title of the browser window or the tab where the webpage is being displayed. It's also the link in search results for that page. The HTML title may also show up in a browser bookmark. In general, titles include important keywords as well as the name of the website, company, or brand. Titles with more than 60 characters tend to be cut off in the browser display.

►Notice ‘Covington Integrated Arts Academy’ is now called ‘Charger Academy’. Without the help of the <title> tag validating the name change would have been difficult.

<title>Covington Integrated Arts Academy</title>

This is an important feature that is sometimes overlooked, yet it is the most viewed feature in all of search engine optimization. Make the title tag a regular part of your sleuthing workflow and you'll be less likely to forget about it.