Intermediate HTML 2 – The Meta Tag and the Class Attribute

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="twitter:site" content="@HemmingsNews">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Page Title</title>
    </head>

    <body>
        <a href="https://paircode.com/forums/forum/general/">general forums on Pair Code</a>
        <img src="images/img_la.jpg" alt="LA" style="width:100%">
        <div class="boxed-content">
            <h1>This is a Heading</h1>
            <p>This is a paragraph.</p>
            <p>This is another paragraph.</p>
        </div>
        <footer></footer>
    </body>
</html>

Meta Tags

<meta name=”twitter:site” content=”@PairCode”> 

meta

The meta tag is invisible to the human eye, but it’s visible to the browser and search engines. The meta tag usually has two attributes (name and content), and the name usually describes the content. It uses these attributes to tell the browser certain things about the web page.

name=”twitter:site” content=”@PairCode”

The name/content combo of this meta tag tells the browser and search engines that @PairCode is this site’s Twitter handle.

<meta charset="UTF-8">

charset=”UTF-8

This is a rare meta tag that only has one attribute, the charset attribute.

<meta name="viewport" content="width=device-width,initial-scale=1">

Here’s another example of a meta tag with a name/content combo. This combo tells the browser that your website is mobile responsive.

Class Attribute

<div class="red-text">

The last attribute to look at is the class attribute. It’s one of the most widely used attributes. Unlike the id attribute, the name you assign to a class can be used on any number of elements. It will make much mere sense when you start using CSS and JavaScript.