Site Bytes – Working with HTML

Site Bytes
Site Bytes

Browsers use a coding language called ‘HTML’ or ‘Hypertext Markup Language’ to turn text into a webpage. HTML is a big subject, so you shouldn’t expect to read this and immediately know how to code an entire website by hand. This will give a quick introduction to how HTML works, and some takeaways you can use immediately.

▶Watch Video: Tech Time with Angie May 20 2020

When you make a webpage on your site, by default your editor is set to a ‘WYSIWYG’ – or ‘What You See Is What You Get’ – setting. This acts a lot like Microsoft Word or other text editing software. Use the dropdown in the lower left of the editor to switch between WYSIWYG and HTML.

The HTML editor is a simple text editor that does not give options for fonts, images, links, or other media like the WYSIWYG editor does.

HTML works by using opening and closing ‘tags’ for most ‘elements’. When we write a sentence, we start with a capital letter and end with punctuation. When we make an HTML ‘element’, we start with an opening tag and end with a closing tag.

<p>Hello, world.</p>

Here, the <p> is the opening tag for a paragraph element, and the </p> is the closing tag.

Some elements can be ‘nested’ inside other elements. So if we wanted to make one of these words a link, we would put it in an ‘anchor’ tag (<a>…</a>) within the <p>...</p> element.

<p>Hello, <a>world</a>.</p>

It’s important that elements close in the reverse order that they open. ‘<p>Hello, <a>world.</p></a>’ does not make sense to a computer.

Right now, the link for the word ‘world’ does not do anything. We can tell it how to behave by giving the <a> element an ‘attribute’. Attributes tell elements how to behave. In this case the ‘href’ attribute (short for ‘hyperlink reference’) tells the link what page to open when it is selected.

<p>Hello, <a href="https://www.unl.edu/">world</a>.</p>

We can add a ‘class’ attribute that’s linked to a style in the UNL Framework to style our elements. If we wanted to make all the text of this paragraph scarlet, we could add ‘class="unl-scarlet"’ to the <p> element.

<p class="unl-scarlet">Hello, <a href="https://www.unl.edu/">world</a>.</p>

What you can use today:
If you are looking for a specific error found by Web Audit, such as a broken link or image missing alternate text, you can switch your editor to HTML to help identify where the error is located. You might also try fixing the error by updating the ‘href’ attribute for a broken link, or creating an ‘alt’ attribute for an image missing alternate text. Working in HTML might also be easier for changing the location of links or separating text into paragraphs.

If you have ideas for videos or articles you would like to see, please email Keith McGuffey at kmcguffey2@unl.edu. More video tutorials can be found on the Nebraska Extension County Websites Media Hub channel.

###

Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Keith McGuffey, IANR Media Web Specialist.