Health IS Technology Blog

Anatomy of a Web Page: Four Essential HTML Tags


“The Web allows individuals not only to represent themselves in words and images, but also to publish these representations to an audience of millions” ~ Professor Jay David Bolter, Writing Space: Computers, Hypertext, and the Remediation of Print

HTML Lessons

HTML Lessons

<HTML>

One of the most significant languages used by people all around the world isn’t Chinese, Spanish or English (e.g. the three most spoken languages). It’s the vocabulary of web pages and it’s name is HyperText Markup Language, better known as HTML. It’s the language of creatives, technology specialists and businesses, everywhere a.k.a. the language of leaders. And if you don’t speak it yet, you’ll definitely want to have some basic understanding of it as we dive deeper and deeper into our increasingly digital economy, wherein the ability to leverage online tools like websites to your advantage is essential.

As it’s name indicates, HTML is a ‘markup’ language, which means that you can use it to mark or tag different text elements on your personal or business web page. “The idea and terminology evolved from the ‘marking up’ of paper manuscripts, i.e., the revision instructions by editors, traditionally written with a blue (or red) pencil on authors’ manuscripts. Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page,” (Wikipedia, 2016). You can just think of it as a skeleton, providing structure for the page as a whole. However just as with spoken languages, each tag (e.g. bone) has a different purpose and will produce different results for users. In order to understand how your web page works and to make progressive alterations to your pages over time for visitors or customers, you must know these tags, well. We’re going to review 4 of the most important tags in this article, so you have the basics down pat, today.

The first tag to note is simply <HTML> itself, which is at the very top of every web page that you build, visit or use. Underneath this tag, which lets browsers (e.g. Firefox, Chrome, Safari) know that they’re reading an HTML document or web page, specifically, you can place all of the remaining code. Everything else will simply fit between the HTML tags, like this:

  • <HTML>
  • Everything fits between these opening and closing tags. Add a slash for end tags, like so
  • </HTML>

 

<Head>

Head Tags

Head Tags

Alright, so you’ve told browsers that you have an actual web page for them to read. Now you’ll need the second most important tag, the <Head>. It’s important to note that, “The HTML <head> element actually has nothing to do with HTML headings. The HTML <head> element simply contains metadata (i.e. data about data). Metadata is not visually displayed,” (W3Schools, 2016).

So what does fit between the opening and closing head tags? Information, about your HTML file. This is where you’ll provide details, such as the title that we see in the browser’s title bar or page tab, which is very important for any SEO (Search Engine Optimization) efforts and goals. The opening and closing head tags will fit snugly between the first HTML tags. So, your head tags should fit in, like so:

  • <HTML>
  • <Head>
  • The relevant metadata fits in here. Don’t forget to add the slash for the end tag, again
  • </Head>
  • </HTML>

 

<Title>

So, now browsers can read the first few critical pieces of information about your web page but what’s next? The third most critical tag, that is the <Title> tag, which defines the browser page title and bar tab. This is important for end-users because it makes your page more easily identifiable. Web specialists will also pay close attention to what goes between the opening and closing title tags because it can directly affect the success of your overall online strategy of attracting and retaining visitors to business web pages or eCommerce websites. Keywords, often need to be included in the title tags in order to most effectively connect with customers who are searching for your products, services and relevant resources, online. So if for example, you want a high click-thru rate, then you’ll need to include the right keywords in your title tag.

As our fellow web experts over at Moz.com have explained, “Title elements have long been considered one of the most important on-page SEO elements (the most important being overall content), and appear in three key places: browsers, search engine results pages and external websites. The title element of a page is meant to be an accurate, concise description of a page’s content. It is critical to both user experience and search engine optimization” (Moz, 2016).

Pro Tip: When creating your web page’s title tag, note that many of the most heavily used search engines (i.e. Google, Bing, Yahoo) will only display up to 55 characters from the title tag in their search results.

In the end you’ll have a setup, like this one:

  • <HTML>
  • <Head>
  • <Title>
  • Text here will display in browser page tabs. Remember the slash
  • </Title>
  • </Head>
  • </HTML>

 

<Body>

Build Your Web Pages w/ HTML

Build Your Web Pages w/ HTML

Once you’ve told browsers that you have a readable web page, where to get the metadata and your SEO optimized title, you need one more critical tag: <Body>. This is arguably one of the most significant of the lot because all of the text content you add between the opening and closing body tags will be visible on your actual web page for end-users to read, digest and potentially share with the rest of the digital, global community. Everything that goes here will need to be well thought out and delivered with absolute clarity to avoid issues like high bounce rates, etc. “The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.,” (W3Schools, 2016). So this is where you can introduce yourself to your customers, inform them about your offerings, landing pages, call-to-action and provide information that will both hold their attention, while delivering the information they seek, quickly and clearly.

With these four tags under your belt, you can begin to construct a basic web page. However, if you’d like to truly master the HTML language in its entirety by beginning with some free introductory courses, you should absolutely check out TheNewBoston.com, W3Schools.com or Codecademy.com, anytime.

 

Once you’ve added these 4 tags, your document should look like the example, below:

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

 

USF Health Information Systems is a comprehensive technology group serving the needs of the Academic Research and Clinical missions. We partner with our customers to deliver agile responsive technology solutions that drive business value and make life better for our students and patients. For more information about USF Health IS, visit us online at health.usf.edu/is and contact us via phone or email at (813) 974-6288 or support@health.usf.edu for after-hours service.


Visit USF Health Information Systems online for more information and assistance.

#USFHealthIS