SINGLE PAGE SIMPLICITY

It’s true. You CAN have your cake and eat it too. Single page websites can be both — effective and easy to maintain.

“Single page websites aim to provide just the right amount of information for a user to make a decision and act on it. …This minimal web design removes any unnecessary noise from the interface, focusing the user’s attention on the most important content.”

(Adiseshiah, n.d.)

Take Art by Nature as an example.

Art by Nature is a collaboration of two artists. Together they create decorative wall art that uses thin slices of tree branches and other natural products attached to a cork background. The variations in the grain of the wood slices combined with the other ingredients create myriad interesting patterns. It is also known as “tree cookie art.”

To expand their marketing efforts, the artists wanted to take their product online at artbynature.biz.

That’s where I come in. They are a relatively new business, so it seemed appropriate to start with a simple site. I changed my initial strategy for Art By Nature, and moved from designing a multipage version to creating a single page site.

The Process

I started with a responsive template, which is shown below.

I replaced the leading image of a man holding a hat. Instead, I used an image that includes:

  • the Art by Nature logo.
  • a sample of tree cookie art.
  • a woman leaning against a tree looking happy and content.

Just above the image I put the tag line “Eco-friendly Art for your Home, Office, or Business.” I also added a call to action with a phone number below the image.

The navigation bar uses bookmarks to take the reader to a particular part of the page, which gives the look and feel of a multipage site. The links are:

  • Gallery
  • Contact
  • Newsletter

Here’s what it looks like when you click on the Newsletter link:

A brief description of tree cookie art precedes the gallery — consisting of eight pieces of art labeled with the title, dimension, and price. I also added a reminder that tree cookie art makes a great gift, which is displayed in red to catch the reader’s attention.

At the bottom I included an email capture area, a Contact section, and links to social media.

Here’s the single page site in its entirety.

Here’s what the gallery looks like on a mobile phone. More and more people use their phone for just about everything, so be sure you take that into consideration when designing your website. It’s critical today, and will be even more so going forward.

There’s more work to be done, but it’s a great start. Let me know what you think; I’d love to hear from you. In the meantime, I’ll keep you posted 🙂

until nxt time …

References

Adiseshiah, E. G. (n.d.). Single page vs multi-page websites: Design battle! Retrieved from https://www.justinmind.com/blog/single-page-vs-multi-page-websites-design-battle/

DIGGING AROUND IN THE HTML SANDBOX

My foray into the HTML world began with a course I took at my local community college in the ’90s. At that time HTML was all hand coded, so being a coder meant you did it all from scratch — which was fine as long as you weren’t producing any large scale sites.

Then Macromedia Dreamweaver came along and made our lives easier. Just as its name promised, it made designing and managing a website a dream. Not much need for hand coding anymore, right? I won’t go so far as to tell you it’s absolutely necessary to know HTML, but my ability to code has always been an asset.

As a creative, the ability to design AND code makes you unique. It also gives you the ability to get things done quickly when you need to make adjustments.

So yes, I am a geek. I love to dig around in the source code. The marriage of tags and visual layout has always been and will always be fascinating to me.

For the last seven weeks I’ve been fortunate enough to blow the dust off my old web skills and see what’s new in the web world. While there have been new versions of HTML, there’s a lot that’s still the same — and I still love it. If you’d like to read all my WEB DESIGN blogs, use the top navigation bar to filter my web posts.

Or you can read on for the highlights.


I started by giving untilnxttime.com a facelift. Thanks to a new theme and better navigation, it’s a lot friendlier now. Details contained in my EASY TO USE, EASY TO READ blog.

I also had a lot of fun working on the design of artbynature.biz. You can read my post THE DESIGN PROCESS to get behind the scenes access before it goes live.

Having honed my graphic design software skills recently, I was interested in learning more about image optimization. When you optimize an image, you strive to find the right balance between file size and quality. Photoshop makes it very easy with their Save for Web function. Read more about it in the post OPTIMIZE.

I’m also fascinated by the beauty of semantic HTML, which takes HTML to a whole new level by fostering meaning rather than just focusing on presentation. Check out BECOMING MORE ACCESSIBLE WITH SEMANTIC HTML if you want to learn more about the benefits.

Going forward I’ve got a new look, better image optimization, and a new appreciation for all things web.

So like a fine wine, I believe that HTML has gotten better with age. It’s still simple enough for anyone to learn, but even more powerful with the introduction of semantic HTML. Semantic tags convey the meaning of a page and define what its content is, which helps with search engine optimization.

Bottom line, it’s great to be able to peek behind the curtain of web pages. Going forward you can be sure I’ll still be digging around in the code.

To me, HTML is a still a really cool sandbox. If you’d like to join me, don’t forget your bucket. I’ll be the one with pigtails and a pink truck.

until nxt time …

References

HTML. (n.d.). In Wikipedia. Retrieved from http://en.wikipedia.org/wiki/HTML

Header image by Marjon Besteman-Horn from Pixabay

THREE TYPES OF STYLE

If you’ve read any of my blogs on HTML, you’ve learned that HTML is a markup language that is pretty simple to learn. Today I’d like to share with you some basic information on Cascading Style Sheets, or CSS.

CSS helps you to keep the informational content of a document separate from the details of how to display it. The details of how to display the document are known as its style

(Why use CSS?, n.d.)

There are three types of CSS:

  • Inline
  • Internal (or Embedded)
  • External

To demonstrate how each type works I modified one of my existing HTML pages.


Inline

You can change the appearance of a single tag contained in your HTML page by using the style attribute. Here’s an example:

The last sentence in the text block below has the same format as the preceding two paragraphs.

When I add the style attribute within the <p> or paragraph tag, I can apply one, or even multiple styles. In this example I’m applying three: color, font size and alignment.

Now the sentence is blue, smaller, and centered as shown below:


Internal (or Embedded)

Internal CSS affects the entire HTML document. The style tag is placed in the head section rather than on a single tag. Here’s the style tag I used to create my internal CSS.

This code ensures that header tags H1, H2, and H3 throughout this HTML page are displayed as follows:

  • H1 tags are centered and have a one pixel solid border (“Holly Foster”)
  • H2 tags are displayed in all small caps (“BLACK & WHITE”)
  • H3 tags are crimson (“Page Links” & “Beverage Histories”)

Here’s a screenshot of the page using only inline and internal CSS:


External

External CSS is similar to internal CSS, but the file is separate and has a .css extension. This is important when you want to style multiple pages in your website.

Once your file is created, the next step is to link the files together. To do that I add the following under the <head> tag in my HTML source code:

<link rel=”stylesheet” type=”text/css” href=”css/primary.css”>

In this example the CSS file is named “primary” and I placed it in a subfolder named “css.” This code should be added to each HTML page to which you want the styles to apply. To see my final HTML page, use this link.


Hierarchy

One last thing.

“If a CSS rule doesn’t seem to work when it looks like it should and your code appears to be written correctly, or perhaps an element you’re trying to style won’t apply in any browser, your CSS rules are suffering from a CSS specificity conflict.”

Boudreaux, 2013

Be careful when you use CSS. Inline generally trumps internal or external CSS, but it’s not always clear cut. Check out Ryan Boudreaux’s excellent article for more specifics.

until nxt time …

References

Boudreaux, R. (November 6, 2013). CSS specificity hierarchy: What you need to know. Retrieved from TechRepublic: https://www.techrepublic.com/blog/web-designer/css-specificity-hierarchy-what-you-need-to-know/

Types of CSS (Cascading Style Sheet). (2018, August 20). Retrieved from: https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

Why use CSS? · WebPlatform Docs. (n.d.). Retrieved from: https://webplatform.github.io/docs/tutorials/learning_why_we_use_css/

CROSS BROWSER TESTING

Essentially, with cross browser testing you’re testing the appearance and functionality of a website in different browsers and devices.  Just as humans interpret things differently, not all browsers interpret code the same way.

(Bartlett, 2016)

It’s always been important — and it’s still important today — you must test your site in multiple browsers. But which browsers? Chances are most of your web visitors are using Chrome, but don’t forget to check Safari and Internet Explorer (IE) as well. Let’s take a look at the stats.

“Google Chrome … is by far the most used browser, accounting for more than half of all web traffic, followed by Safari in a distant second place. The combined IE & Edge comes in third, with Firefox in fourth. Opera is fifth with about 3 percent of global web traffic.”

(Martin, 2019)
(Martin, 2019)

Desktop

To find out how well untilnxttime.com rendered, I gathered screenshots from four different desktop browsers. I’m happy to report that it performed well; there’s no noticeable difference in layout, text size or color. Here’s the proof:

Chrome Version 75.0.3770.100 (Official Build) (64-bit) – MAC OS Mojave
Safari Version 12.0.3 – MAC OS Mojave
Internet Explorer 11 – Windows 10 Pro
Firefox Quantum Version 68.0.1 – Windows 10 Pro

Mobile Phone

Let’s not forget our mobile users. Take a look at the screenshots from three different phones: the Note 8, iPhone 8 Plus, and the Pixel 2. Still looking good — they appear to be almost identical.


Tablet

How about tablets? This screenshot is from an iPad.


Other Options

If you don’t have the time to gather your screenshots from friends and co-workers like I did, there are browser compatibility tools available. I did a check with Browserstack and again the site performed well.

For a deeper dive, check out the article Top 12 Browser Compatibility Testing Tools to find other options (including some that are free).

until nxt time …

References

Bartlett, J. (2016, July 21). Why Cross Browser Testing is Important [Blog]. Retrieved from: https://blog.testlodge.com/why-cross-browser-testing-is-important/

Jackson, B. (2017, June 6). Top 12 browser compatibility testing tools. Retrieved from: https://www.keycdn.com/blog/browser-compatibility-testing-tools

Martin, J. (2019, August 6). Chrome, Firefox, Edge, Safari and more: Which is the best web browser for you? Retrieved from: https://www.techadvisor.co.uk/test-centre/software/best-web-browsers-3635255/

Says, L. (2018, November 5). How to Test a WordPress Site in Different Browsers (Easy Way). Retrieved from: https://www.wpbeginner.com/wp-tutorials/how-to-test-a-wordpress-site-in-different-browsers-cross-browser-testing-made-easy/

Header image by Grzegorz Walczak on Unsplash

SOCIAL MEDIA DEBUT

“What is interesting is the power and the impact of social media… So we must try to use social media in a good way.”

– Malala Yousafzai

Guess who’s on Instagram and Twitter now? You guessed it. At the top of the page just under the logo you’ll see links to Instagram and Twitter (click on the MENU bar if you’re browsing with your phone).

Scroll to the bottom of the page and you’ll see the until nxt time Twitter feed. Check out the link to Albert-László Barabási’s TED talk. He discusses the real relationship between your age and your chances of success. There’s hope for those of us who are over the age of 30!

And for good measure, how about a good YouTube video? For the creatives out there, here’s one that explores how to go beyond what you thought was possible. It’s a PBS video called How To Be Creative.

Video is powerful, and I absolutely love TED talks. I am thrilled to have the opportunity to share with you this powerful TED talk by Emily Esfahani Smith. If you have sixteen minutes, you’ll be glad you took the time to watch her presentation on There’s More To Life Than Being Happy.

To the small audience of people who read my blog, I’d also like to take this opportunity to thank you for taking this journey with me. What matters most in life are the things we share with others. Thank you for taking the time — your support means more than you could ever know.

One last thing. You can contact me using my contact page. I’d love to hear from you.

until nxt time …

Header image by NordWood Themes on Unsplash

BABY COME BACK

If you have a website, chances are “Baby Come Back” is the song that permeates your business strategy. To get an idea of how to accomplish this feat in the sea of the world wide web, let’s take a look at the digital strategies used by some of my favorite websites. They are:

  • Best Buy
  • Medium
  • Neiman Marcus
  • Saatchi Art
  • TravelZoo

Take a moment and click through the slide show to see each business’ home page, then we’ll break it down one by one.

Best Buy

Best Buy uses email marketing in a big way; I receive one at least once a day! Here’s today’s message to entice me to visit their site.

Image of Best Buy promotional email

Medium

Medium.com was launched in 2012 as a blogging platform. The site houses long-form content written by external contributors, and contains no advertisements. Instead, writers who join their Partner Program are “paid based on how deeply readers engage with their work, not based on clicks or attention” (Medium).

If you visit their site more than once you’ll see this splash screen displayed:

Medium.com splash screen, shown when visiting their website

Once you sign up you’ll receive the Medium Daily Digest, a subtle reminder to come back and read articles of interest.

Image of Medium.com Daily Digest email

Neiman Marcus

Neimans’ promotes heavily via search engines. Here’s my result when I use Google to search using the single word dresses:

There are two chances they’ll get me to visit their site: by clicking on their photo of a floral dress or using the link that advertises designer dresses.

They also promise 15% off my first purchase if I sign up using my email address. If I don’t want to receive a lot of emails, I can opt to follow them on social media or download their app.

Saatchi Art

According to Wikipedia, “Saatchi Art is an online art gallery and artist network … based in Los Angeles, California. It is the largest gallery and platform for artists in the world.” They use their website footer as a space to drive future traffic via their app, social media, and email collection. Here’s a screen shot:

Their banner also promises New Original Art Every Week to entice you to return.

TravelZoo

I love to travel, but I like to do it without breaking my bank account. In my opinion, there’s no better place to find your next vacation than TravelZoo. They use a bright blue button at the top of their home page to convince you to JOIN FOR FREE. If you do, they claim you’ll gain access to exclusive deals and offers.

As a member I receive advance notification of their travel deals, which offer appealing itineraries at attractive prices. Honestly, it’s just fun to visit their site, which is extremely well designed.

So there you have it — five sites asking you to come back, stay for awhile, and perhaps spend some money. If you have a site and need some tips on traffic-driving strategies, check out the Forbes article 23 Proven Ways To Drive Traffic To Your Website.

until nxt time …

References

Adams, R. L. (2017, April 10). 23 Proven Ways To Drive Traffic To Your Website. Retrieved from: https://www.forbes.com/sites/robertadams/2017/04/10/23-proven-ways-to-drive-traffic-to-your-website/

Medium. (n.d.). A place to publish your best work. Retrieved from https://medium.com/creators

Saatchi Art. (2018). In Wikipedia. Retrieved from: https://en.wikipedia.org/w/index.php?title=Saatchi_Art&oldid=875233227

Header image by Marek Levák on Unsplash

ELEMENTS, TAGS & ATTRIBUTES

If you’re just tuning in, I’ve been writing a series of blogs about hand coding HTML, the language of the WWW (World Wide Web). This week I added more tags to my page. If you’re interested, read on for the details. Here’s a refresher on the terminology, just in case you need it.


An ELEMENT is a component of a webpage

An HTML element is a component of a webpage. The example below shows the markup for the sentence that reads But the details are missing. The element is comprised of the entire line of code.

Picture of an HTML element.

TAGS mark the start and end of an element

Tags mark the start and end of an element. In our example, we are using the paragraph, or <p></p>. Although there are a couple of exceptions, HTML tags generally begin with the less-than (<) character and end with greater-than (>).

Picture of HTML tags.

Attributes define a specific behavior

HTML also allows us to add an attribute, along with its corresponding value. In our example the font-size attribute is contained within the start tag.

Picture of HTML attribute and value.

Here’s what my updated page looks like. You can check it out real time here.

Snapshot of a mywebspace page.

The additions

I added eight additional formatting tags to:

  • define a section quoted from another source <blockquote>
  • define the title of a work <cite>
  • define text deleted from a document <del>
  • define text inserted into a document <ins>
  • highlight text <mark>
  • make text smaller <small>
  • create subscript text <sub>
  • create superscript text <sup>

I also added a basic tag — the <br> or break tag. It’s an interesting one because unlike most other HTML tags, it doesn’t require an end tag (it’s referred to as an “empty” tag). It inserts a single break in the text as opposed to the additional space added when you use the paragraph, or <p> tag. That comes in handy when you need to format an address, or perhaps a poem.

In addition to the tags I added three attributes, which give the tags meaning and context:

  • “text-align:center;” to center my text
  • “font-size:200%” to bump up the text by two hundred percent
  • “color:rgb(11, 102, 35)” to create a forest green heading

A couple of extras

To finish up, I:

  • used the title attribute.
  • defined the use of the Verdana font for my Beverage History title.
  • added a frame tag <iframe> to embed a YouTube video.

I also made the video responsive, meaning it resizes according to the size of the browser window. Check out the video listed in the References section below if you want to learn how to do it.

More to come next week.

until nxt time …

References

HTML br tag. (n.d.). Retrieved from: https://www.w3schools.com/tags/tag_br.asp

HTML element. (2019). In Wikipedia. Retrieved from https://en.wikipedia.org/w/index.php?title=HTML_element&oldid=910228137

Johansson, R. (2005, August 30). HTML tags vs. elements vs. attributes | 456 Berea Street. Retrieved from: https://www.456bereastreet.com/archive/200508/html_tags_vs_elements_vs_attributes/

Paper Krane. (n.d.). How To Make iframe’s Responsive (YouTube Embeds, Google Maps etc.) – YouTube. Retrieved from: https://www.youtube.com/watch?v=X4t0JxiBeO0

Header image by Adi Goldstein on Unsplash

SEMANTIC RESTRUCTURE

Last week I wrote about creating a page on Quinnipiac’s mywebspace server in my blog Blue Pencil. Today I’m going to tell you how I restructured that page to incorporate the use of semantic HTML.

Never heard of semantic HTML?

If you’d like to get into the weeds, check out my blog Becoming More Accessible with Semantic HTML. If not, here’s a couple of reasons why it’s important.

” … semantic HTML can make your site more accessible and generate more traffic based on higher search engine rankings” (Foster, 2019).

Where I Started

Here’s what my original hand coded HTML page looks like.

To begin the restructuring, I added the following semantic tags:

  • <header>
  • two <nav> sections
  • <article>
  • <footer>

I also added tags for:

  • subheaders <h2> <h3> <h4> <h5> <h6>
  • an unordered list <ul>
  • an ordered list <ol>
  • a strong tag <strong>
  • an emphasis tag <em>

Next I optimized my images using Photoshop’s Save for Web function and ImageOptum. See my blog Optimize if you want to learn how.

Finally, I used the W3 validator to make sure my code was “clean.”

Where I Finished

Here’s the final product. You can use this link to see it in real time.

It’s more organized, has better structure, and is accessible. As a result it will have a faster load time.

As Adam Sandler says in the Hanukkah song, “not too shabby.” I’m sorry — I couldn’t resist 🙂

There’s even a bit of whimsy. Check out the links on the right hand navigation section if you want to read the history of wine, beer and liquor.

More HTML to come next week.

until nxt time …

References

Foster, H. (2019, July 28). Blue pencil. [Blog post]. Retrieved from: https://untilnxttime.com/2019/07/28/digital-blue-pencil/

Foster, H. (2019, July 28). Becoming more accessible with semantic HTML. [Blog post]. Retrieved from: https://untilnxttime.com/2019/07/28/semantic-html/

Foster, H. (2019, August 4). Optimize. [Blog post]. Retrieved from: https://untilnxttime.com/2019/08/04/optimize

OPTIMIZE

“When we talk about how to ‘optimize’ images for the web, you can think about this in three ways:

1) making images look good,
2) making images load quickly, and
3) making images easy for search engines to index.”

(Maggie, 2019)

So how do you accomplish all three?


Start with a great photo

Choose an image that is clear and well-focused.

This is a photo of the Petronas Twin Towers in Kuala Lumpur, Malaysia. The file type is JPEG — it’s the format produced when you take a picture with your digital camera or cell phone.

The dimensions of the photo are 900 pixels by 1200 pixels. The file size equals 947KB.

“KB” stands for kilobyte, which is a unit of measurement. It’s the number of computer bytes required to store a file.

Make adjustments

Our goal is to produce the smallest file size while maintaining an acceptable image size and quality.

A straightforward way to reduce file size is to change the dimensions. You can do that by:

  • cropping the image, and/or
  • adjusting the height and width proportionally.

In my case, I didn’t want to change the dimensions — so I left the image as is. We can still optimize the image, however, by adjusting the quality.

You can usually reduce the quality to somewhere between 60 and 80 percent and still have an acceptable looking photo. If you have Photoshop, you can use the Save for Web process to make your adjustments.

I used the settings to decrease the quality to: 80% or very high, 60% or high, and 40%, which is considered medium quality.

For this particular photograph, it’s really hard to see any difference, but the file sizes are dramatically different. Click on any image below to view the full size gallery.

If you don’t have Photoshop you can use a free web app called Optimizilla. Using their default settings, the image was compressed to 274KB.

Remove the metadata

Image metadata includes details relevant to the image itself as well as information about its production. Some metadata is generated automatically by the device capturing the image. Additional metadata may be added manually and edited through dedicated software or general image editing software such as GIMP or Adobe Photoshop” (Rouse, n.d.).

Next I used ImageOptim to remove the metadata from my images. As you can see, the reduction was small but every little bit helps when it comes to quick download time.

Don’t forget the alt text

Alt stands for alternative text, and a lot of people forget to include it with their images. Alternative text is important because:

  • it enables visually impaired web visitors to enjoy your site.
  • it provides a description if your image can’t load.
  • it helps with image search engine optimization (SEO).

“While search engine image recognition technology has vastly improved over the years, search crawlers still can’t ‘see’ the images on a website page like we can, so it’s not wise to leave the interpretation solely in their hands. If they don’t understand, or get it wrong, it’s possible you could either rank for unintended keywords or miss out on ranking altogether.”

(Alt Text for Images | 2019 SEO Best Practices, n.d.)

Faster load time

Uploading large images to your website can cause your visitor to experience long lag times. If you’re like me, it’s maddening to arrive at a site and have to wait for it to load. If it takes too long, you’ll probably jump ship and find a similar site that loads quickly.

“According to Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.”

(Oberoi, 2014)

Optimization = Success

To review:

  • Start with a great image.
  • Adjust the image dimensions (if you can).
  • Reduce the quality as low as you can while maintaining an acceptable image.
  • Remove any unnecessary metadata.
  • Don’t forget to add the alternative text.

The extra steps required to reduce your images are worth the time. Great images and quick load time will ensure that you can deliver the message you worked hard to produce.

until nxt time …

References

Alt Text for Images | 2019 SEO Best Practices. (n.d.). Retrieved from: https://moz.com/learn/seo/alt-text

JPEG (Joint Photographic Experts Group) Definition. (n.d.). Retrieved from: https://techterms.com/definition/jpeg

Kilobyte Definition. (n.d.). Retrieved from: https://techterms.com/definition/kilobyte

Maggie. (2019, February 21). How to optimize images for better web design & SEO | Jimdo. Retrieved from: https://www.jimdo.com/blog/optimize-website-images-for-better-design-seo/

Oberoi, A. (2014, March 20). 5 reasons visitors leave your website. Retrieved from https://www.websitemagazine.com/blog/5-reasons-visitors-leave-your-website

Rouse, M. (n.d.). What is image metadata? – Definition from WhatIs.com. Retrieved from: https://whatis.techtarget.com/definition/image-metadata

The Importance of Images in Web Design. (2010, August 9). Retrieved from: http://www.thoughtmechanics.com/the-importance-of-images-in-web-design/

BECOMING MORE ACCESSIBLE WITH SEMANTIC HTML

In my last blog Blue Pencil I explained how the tags used in HTML tell the browser where to place things. In the old days we used <div> tags and <span> tags which made our page look — well — nice. But what if your HTML code could do more than give formatting directions? What if it could share information and make the job of organizing your site easier?

Currently, there’s a movement toward using Semantic HTML, and if you use it in your code, your tags can do a whole lot more than formatting.

Better Accessibility

Good semantic HTML also improves the accessibility of web documents (see also Web Content Accessibility Guidelines). For example, when a screen reader or audio browser can correctly ascertain the structure of a document, it will not waste the visually impaired user’s time by reading out repeated or irrelevant information when it has been marked up correctly.

(Semantic HTML, 2019)

It can also help you keep your code more organized, which helps search engine crawlers do their job more efficiently.

Better Search Engine Optimization

In a recent article published in Lifewire — a technology advice website — Jennifer Kyrnin describes how semantic HTML is different from traditional HTML and points out one of its main benefits.

… semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.

(Kyrnin, 2019)

Sounds great, right? Let’s take a look at some popular semantic HTML tags. Notice how they do double duty by telling WHAT THEY ARE as well as WHERE THEY SHOULD BE on the page.

(James, n.d.)

Now that you have an idea of how they work and why they work well, let’s take them for a spin.

Adding Navigation

To test semantic HTML, I decided to add a navigation bar to my existing index.html page. Look just below the <body> tag and you’ll see the <nav> tag. The <ul> tells the browser it’s an unordered list, and the <li> tags use the <a> tag to make links out of the words listed in white: Home, Effective Writing, Digital Health, Visual Design, Web Design, and About. Here’s a snapshot of the code.

Here’s how the page looks in the browser with the newly added navigation.

Super easy and really efficient.

As someone who is used to traditional HTML, it’s easier to code the way I always have. But it didn’t take a lot of energy to incorporate semantic tags into my page.

Going forward, I’ve learned that using semantic HTML can make your site more accessible and generate more traffic based on higher search engine rankings.

Better Cross Browser Capabilities

According to web developer Bruce Lawson, ” … HTML5 semantics are carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content. We’ll also see that semantic markup is not ‘nice to have,’ but is rather a cornerstone of Web development, because it is what enhances accessibility, searchability, internationalization and interoperability” (2011).

until nxt time …

References

Foster, H. (2019, July 28). BLUE PENCIL. [Blog post]. Retrieved from: https://untilnxttime.com/2019/07/28/digital-blue-pencil/

James, O. (n.d.). Semantic HTML | HTML & CSS is hard. Retrieved from: /html-and-css/semantic-html/

Kyrnin, J. (2019, May 2). What is semantic HTML and why you should use it. Retrieved from: https://www.lifewire.com/why-use-semantic-html-3468271

Lawson, B. (2011, November 18). Sexy new HTML5 semantics. Retrieved from: https://www.smashingmagazine.com/2011/11/html5-semantics/

Semantic HTML. (2019). In Wikipedia. Retrieved from: https://en.wikipedia.org/w/index.php?title=Semantic_HTML&oldid=905603875

Markup language. (2019). In Wikipedia. Retrieved from https://en.wikipedia.org/w/index.php?title=Markup_language&oldid=907146353

What is HTML – A Simple Guide to HTML. (n.d.). Retrieved from: http://www.simplehtmlguide.com/whatishtml.php

Header image by Digital Buggu from Pexels