HTML Instructions

When looking at any of the code in the Developer tools portion of your website, it might look complicated, but there are some simple things to look for that will make navigating much easier! Plus, knowing some of the basic HTML code will help you pinpoint which elements you need to change, alter, or add in order to make your website more accessible!

HTML Tags:

• A tag tells your browser how to format your website. There are a lot of different types of tags in HTML, from headings to paragraphs to dividers, but when each line of code is being written, the first thing written is what tag is being defined.

• When looking at the HTML code in the developer tool, the first word in each line after a “<” sign is an HTML tag.
  • Example:
    • The line of code indicated in (Image 1) below, would have the tag “p”

• There are often many different parts of the website that have the same tags, which is useful, because this allows you to format all of a kind of element the same. For example, if you wanted to format all paragraphs the same way, you would look for all of the lines of code that have the “p” tag.

HTML Classes:

• The “class” attribute is used to group different elements that might have different tags, but are still grouped together. For example, if you have a heading, an image, and a paragraph, but they are all part of the main part of your page, you may want to give them all the class “main-content”.
  • Example:
    • The line of code indicated in (Image 2) below, would have the class “entry-content”

• An element can have multiple classes that will be separated by spaces.
• When specifying an element by their class, add a “.” before the class.

class="main-content"    ->    .main-content

HTML Ids:

• The “id” attribute is used to specifically define a certain element. An id is unique to an element; no other element in your website will have that id.
  • Example:
    • The line of code indicated in (Image 3) below, would have the id “top-of-page”

• When specifying an element by its id, add a “#” before the id.

id="toolbar"    ->    #toolbar

Identifying an Element:

• You want to be as specific as possible when identifying an element for the plugin.
  1. An id is the most unique, so if the element has an id, you want to use it
  2. A class is not as specific, but might still be unique
  3. If the element has neither an id nor a class, use its tag, but you will probably have to identify elements above that element as well
• Identifying the elements above a specific element:
  • If the element you want to identify does not have an id or class, or its class is not unique, you will have to identify the section that your element is in so that the plugin can find your specific element. Your website is divided into sections that everything is within, like the Header, Main, or Footer sections. There might even be smaller sections, like if you have a list, or if certain items are grouped. For example, if you have many images within the header that you want to give unique alts to, but none of them have ids or classes, you have to identify the header that the images are within, and then the specific image you want to give the alt to.
  • In order to identify a specific element, list the id or classes of any sections the element is within separated by spaces, and then either the class or tag of your element.
    • Example: (Image 4)
      • To identify the h2 element in (Image 4) below, you would write:  .entry-content h2

Tips

1. To check if a class or tag is unique, open up the developer tools and press CTRL+F and search for the class or tag (Image 5).

2. Look for an arrow before a tag. When you open it and hover over the arrow, it will show you what elements are contained inside it. You can use this to find out what sections your element are within.