{"id":251,"date":"2018-02-05T07:00:00","date_gmt":"2018-02-05T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=251"},"modified":"2018-02-01T13:45:17","modified_gmt":"2018-02-01T20:45:17","slug":"html-terminology","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/02\/05\/html-terminology\/","title":{"rendered":"HTML Terminology"},"content":{"rendered":"

Elements, tags, attributes… there are a lot of terms used to describe the various bits of HTML. Understanding the most common of these terms will help you understand and discuss HTML with confidence, so in this tip I’m going to describe all the terms that apply to this snippet of HTML:<\/p>\n

<a href=\"https:\/\/coreassistance.com\/\">Core Assistance<\/a><\/code><\/pre>\n
That entire thing, the entire link from start to finish, is called an element<\/strong>.  Specifically, this is an anchor element<\/strong> (the a<\/code> stands for anchor).<\/p>\n
This anchor element is made up of several components, the first of which is the opening tag<\/strong>, which is this part:<\/p>\n
<a href=\"https:\/\/coreassistance.com\/\"><\/code><\/pre>\n
This opening tag contains an attribute<\/strong>:<\/p>\n
href=\"https:\/\/coreassistance.com\/\"<\/code><\/pre>\n
Attributes are made up of name-value pairs.  In this example, the name<\/strong> of this attribute is href<\/code> and the value<\/strong> of the attribute is https:\/\/coreassistance.com\/<\/code>.<\/p>\n
That’s the opening tag.  Next comes the content<\/strong> of the element, also commonly called the text content<\/strong>:<\/p>\n
Core Assistance<\/code><\/pre>\n
Finally, we have the closing tag<\/strong>:<\/p>\n
<\/a><\/code><\/pre>\n
So, to recap, here’s the entire element<\/strong>:<\/p>\n
<a href=\"https:\/\/coreassistance.com\/\">Core Assistance<\/a><\/code><\/pre>\n
This element<\/strong> has:<\/p>\n
    \n
  • An opening tag<\/strong>:
    <a href=\"https:\/\/coreassistance.com\/\"><\/code>\n
      \n
    • Containing an attribute<\/strong>:
      href=\"https:\/\/coreassistance.com\/\"<\/code><\/li>\n<\/ul>\n<\/li>\n
    • Some text content<\/strong>:
      Core Assistance<\/code><\/li>\n
    • A closing tag<\/strong>:
      <\/a><\/code><\/li>\n<\/ul>\n
      There are, of course, a couple of exceptions worth pointing out.<\/p>\n
      Some HTML elements do not have both opening and closing tags, and contain no text content.  Take the image element<\/strong>, for example:<\/p>\n
      <img src=\"...\" alt=\"...\"><\/code><\/pre>\n
      In this case the code above is still referred to as an element<\/strong>, but instead of calling this an opening or closing tag, it’s simply referred to as a tag<\/strong>.<\/p>\n
      This can lead to a bit of confusion.  Most of the time an HTML element<\/strong> has both a start tag<\/strong> and an end tag<\/strong>, with neither tag representing the whole element, but rather being part of it.  With some elements, however, that have no content, only a single tag is used, and that single tag represents the entire element.<\/p>\n
      Another exception applies to attributes<\/strong>.  Most of the time an attribute consists of a name<\/strong> and a value<\/strong>, but some attributes have no value.  The checked<\/code> attribute is a good example of this:<\/p>\n
      <input type=\"checkbox\" checked><\/code><\/pre>\n
      This input element<\/strong> contains two attributes<\/strong>.  The first has a name<\/strong> (type<\/code>) and value<\/strong> (checkbox<\/code>), but the second attribute just has a name: checked<\/code>.  The mere presence of this attribute is enough to indicate the state of the checkbox, so no value is required.<\/p>\n
      Now you know the most common terms used in HTML!<\/p>\n","protected":false},"excerpt":{"rendered":"
      Ever wonder what the difference is between a tag and an element?  Or what, exactly, an attribute is?  If so, this is the tip for you!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-251","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=251"}],"version-history":[{"count":17,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/251\/revisions"}],"predecessor-version":[{"id":364,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/251\/revisions\/364"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}