Exercise 1 Tags Defined
The very first Exercise covers many tags - this page will give a simple explanation of what each one is.
DOCTYPE
The HTML DOCTYPE tells the browser what version of coding we are using.
- <!DOCTYPE html>
- This doctype tells the browsers we are using HTML5. It does not need a closing tag.
Basic HTML Elements (Tags)
The Basic HTML Elements are the building blocks of every html web page. They each have opening and closing tags. Remember that only the opening tag has attributes added to it.
- <html> </html>
- HTML stands for Hyper Text Mark-up Language. This is the tag that contains all your document information. It opens and closes your whole page.
- <head> </head>
- The HEAD tag contains information that gives instructions to the body section of your webpage
- <title> </title>
- The TITLE tag names your page. This is the information that you see at the top of your browser window. If you bookmark a page - this is what shows up. Use meaningful titles on your pages. It is like free advertising.
- <body> </body>
- The BODY tag contains the information you want displayed in the browser window.
Other HTML Elements
- HTML Block Elements
These elements start a new line, with space above and below them.
- <h?> </h?> 1, 2, 3, 4, 5, 6
- The H tag or heading tag. Use for Headline information. Search engines look for heading tags, particularly h1 tags. This is a way to tell a search engine that what you have inside an H1 tag is important information. The sizes range from 1 which is large, to 6 which is small. Headings give heirarchy to page information. Use from large down to small.
- <p> </p>
- The P or Paragraph tag. It can contain text, images and other inline elements, but not other block elements. The paragraph tag only adds one space after it. To add more space use the br tag - see below.
- HTML Grouping Element
This Element can contain several Block Elements. You can use them to break your page content into "groups" of content
- <div> </div>
- The DIV tag or division. It can be used to divide a page into sections. It can hold one piece of content or a whole group of information.
- HTML Inline Style Elements
These elements add style to the text. They do not start a new line. They are physical style tags.
Use them inside of block tags.
- <em> </em>
- EM - used to make text italic
- <strong> </strong>
- STRONG - used to make text appear bolder
- Commenting Code
Commenting code is used to add comments inside your coding.
- <!-- Commenting code -->
- Write notes of explanation to yourself with them, so when you go back to work on a page months later - you know what you were thinking, or what each piece of the page means. It does not show in the browser window.
- Empty Elements
Empty Elements do not have a closing tag.
- <br>
- BR or break tag. Use one to make a single return in a paragraph. Or use multiple br tags to add more space.
- <hr>
- HR or horizontal rules. You can use them to divide between sections or to add decorative elements.
Extra TIPs
Attributes are added in the opening element only, never in the closing element.
Hex Code is made of six numbers that go from #000000 to #FFFFFF or from black to white. The number is always preceeded by the # sign.
You can sample colors in photoshop or other graphics programs to find the hex code.