• Becoming an eLearning Hacker
  • Glossary
  • Regular Expressions (Regex)
  • Projects
  • Challenges
  • Essential Tools
  • HTML
  • CSS
  • JavaScript
  • Web Scraping
  • Learning Analytics
  • Images
  • Download
  • Translations
  • Common HTML Attributes

    HTMLWeb Development

    Attributes are invisible key-value pairs that are included inside HTML elements (or tags) to assign information to the element, such as:

    <p attribute-key="attribute-value">Example paragraph</p>

    General Attributes

    These general attributes are constantly used and are extremely useful.

    id

    Assign a unique identification string to an element. This is useful for referencing the element with CSS or JavaScript.

    <p id="paragraph1">Example paragraph</p>

    Once this paragraph is assigned the id "paragraph1" we can then write CSS either in our header or an external file to format it, as follows:

    p#paragraph1 { color: blue; }

    When referencing an element with an id in CSS, use the name of the element type (in this case, p) followed by the hashtag (#) symbol and the element's id. The result will be as follows:

    Example paragraph

    class

    Assign one or more class names to an element. This is useful for referencing the element as part of a group with CSS or JavaScript.

    <p class="speaker1">Hello</p>
    <p class="speaker2">Hi</p>
    <p class="speaker1">How are you?</p>
    <p class="speaker2">Fine. You?</p>

    We can then assign CSS values as follows:

    p.speaker1 { color: green; }
    p.speaker2 { color: coral; }

    When referencing an element with a class in CSS, use the name of the element type (in this case, p) followed by a period (.) and the element's class name. The result will be as follows:

    Hello

    Hi

    How are you?

    Fine. You?

    src

    Assign the source for an element. This is typically used when you are including an external file or other resource in your site, such as an image, video, audio, CSS, or JavaScript file. For instance, to embed an image in your HTML, use an img element with a src attribute as follows:

    <img src="https://edtechbooks.org/content_images/elearning_hacker/rickroll_4k.jpg">

    Rick Astley

    href

    Assign a link (or horizontal reference) to an element. This is typically used to create a hyperlink to a file or another page.

    name

    Assign a unique name string to an element. This is similar to id, but it is typically used for form elements that will be used to submit information to the server and should be avoided for assigning formatting.

    value

    Assign a value to an element. This is typically used with input fields like form elements, checkboxes, or radio buttons.

    Accessibility Attributes

    alt

    Provide a description of a visual or audio resource so that screen readers, web crawlers, and those with disabilities can understand the content.

    dir

    Choose the direction of the text. For example, English would be left-to-right, while Arabic would be right-to-left.

    Options include ltr for left-to-right and rtl for right-to-left.

    aria

    Accessible Rich Internet Applications (ARIA) values are used in more sophisticated applications where content is dynamically changed. We will not address them here, but if you are dynamically changing content on a page after it is loaded, please realize that you will need to include additional markup to ensure that your materials are accessible.

    Table Attributes

    Tables have a variety of attributes that can be set, such as cellpadding, cellspacing, width, height, etc., but these formatting attributes should generally be set with CSS instead.

    Some common structural attributes that may be used include the following:

    colspan and rowspan

    Make a cell (td or th) span across multiple columns or multiple rows:

    <table>
      <thead>
        <tr><th rowspan="2">Name</th><th colspan="2">Values</th></tr>
        <tr><th>X</th><th>Y</th></tr>
      </thead>
      <tbody>
        <tr><td>Chicago</td><td>1.5</td><td>3.2</td></tr>
      </tbody>

    </table>

    NameValues
    XY
    Chicago1.53.2

    Format Attributes

    There are many attributes that may be used for formatting content (e.g., width, height), but these should generally not be used. Instead, you should use element- and class-based CSS whenever possible.

    If necessary, the style attribute can be used to apply CSS formatting to a single element, but this should be done sparingly and, instead, the CSS for that element should be set in a separate CSS file. This allows formatting to cascade (or be shared) between files and elements and prevents you from having to update formatting for each and every element.

    style

    Assign CSS formatting´╗┐ to an element within the HTML tag. This is useful for development and testing, but generally, all CSS formatting should be moved to a separate CSS file and assigned to the element either via the id or class.

    Custom Attributes

    At times, it can be helpful to store your own metadata in HTML elements. This is best done by creating your own custom attributes. To prevent confusion, you should only create custom attributes that begin with data-*. For instance, if you wanted to store a note about whether an element has been spellchecked or not, you could use data-spellchecked="true".


    This content is provided to you freely by EdTech Books.

    Access it online or download it at https://edtechbooks.org/elearning_hacker/common_html_attributes.