Tags, Attributes, & Elements - Oh my!
Tags
Tags are essentially keywords (tag names) surrounded by angle brackets (<,>) that your web browser reads to understand how to lay out the content. Simply: Tags surround content and apply meaning to it. Here is an example below:
<tagname>content</tagname>
And tags always come in pairs: a starting tag <tagname> and an end tag </tagname>. The start tag is often called an opening tag and the end tag is often called the closing tag.
Put It To Work
In your code editor , add the following to your document. Then save and view the updated code in your browser:
See the Pen VXYmaK by Tim Mumford (@mumfordt) on CodePen.
The first line in the top, <!DOCTYPE html>, is a document type declaration and it let's the browser know which version of HTML we are using. We are working with HTML 5 (the newest). If we do not have that declaration, the browser gets a little wacky.
Looking at <html>, this opening tag kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in your browser!
Closing Tags
The </body> and </html> put a close to their respective elements (We'll talk about elements in a bit).
Attributes
Tags can also have attributes, which are like the extra sprinkles on top. They appear on the inside of the opening tag, along with its values. We will talk about these more later, but here is an example:
<tag attribute="value">Margarine</tag>
Elements
Tags pretty much mark the beginning and the end of an element. Elements are the chunks that make up web pages. Everything between an opening tag and closing tag is considered an element. So everything between the <body> and the</body> is considered the body element.
Here is another example: <title> and</title> are tags, while
<title>Humpty Dumpty</title> is the title element.
<h1>Yup!</h1>