The Basics of (X)HTML Tags

4,257 views

Published on

A quick overview of how to write (X)HTML. This just covers the basic syntax rules. More on using each specific tag later in the series.

Published in: Technology, Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,257
On SlideShare
0
From Embeds
0
Number of Embeds
550
Actions
Shares
0
Downloads
443
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

The Basics of (X)HTML Tags

  1. 1. The Basics of (X)HTML Tags Background photo by Will Pate <ul><ul><li>LearningNerd.com </li></ul></ul><ul><ul><li>LearningNerd.com </li></ul></ul>
  2. 2. <ul><ul><li>This is part of a series of (X)HTML and CSS tutorials, which can all be found at LearningNerd.com/xhtml-css </li></ul></ul>
  3. 3. Anatomy of an (X)HTML Tag
  4. 4. <ul><ul><li>An (X)HTML tag is just a name/keyword surrounded by angle brackets. </li></ul></ul><ul><ul><li>So this is called the h1 tag . </li></ul></ul><ul><ul><li>Tag name </li></ul></ul><ul><ul><li>Angle brackets </li></ul></ul><ul><ul><li>< h1 > </li></ul></ul>
  5. 5. <ul><ul><li>It's good practice to write all HTML tags in lower-case letters. </li></ul></ul><ul><ul><li>And when using XHTML, all tags must be lower-case. </li></ul></ul><ul><ul><li>Good: <html> </li></ul></ul><ul><ul><li>Bad: <HTML> </li></ul></ul>
  6. 6. <ul><ul><li>Most (X)HTML tags are used in pairs to label content (such as text). </li></ul></ul><ul><ul><li>The closing tag always needs a slash before the tag name. </li></ul></ul><ul><ul><li>Opening tag </li></ul></ul><ul><ul><li>Closing Tag </li></ul></ul><ul><ul><li><h1> content < / h1> </li></ul></ul>
  7. 7. <ul><ul><li>The opening tag, closing tag, and the content between them makes one unit called an (X)HTML element. </li></ul></ul><ul><ul><li>More specifically, this example can be called the h1 element . </li></ul></ul><ul><ul><li><h1> content </h1> </li></ul></ul><ul><ul><li>(X)HTML Element </li></ul></ul>
  8. 8. <ul><ul><li>Just like those Russian stacking dolls, (X)HTML elements can nest inside of each other. </li></ul></ul><ul><ul><li><p> here's a bunch of text with <q> a quote </q> in the middle of it </p> </li></ul></ul>Photo by A30_Tsitika / Angélica
  9. 9. <ul><ul><li>When nesting elements, the first tag opened must be the last tag closed. </li></ul></ul><ul><ul><li>Good: </li></ul></ul><ul><ul><li><p> <q></q> </p> </li></ul></ul><ul><ul><li>Bad: </li></ul></ul><ul><ul><li><p> <q> </p> </q> </li></ul></ul>
  10. 10. <ul><ul><li>Some (X)HTML tags insert content instead of labeling it. They're called empty or self-closing tags. </li></ul></ul><ul><ul><li><hr> </li></ul></ul><ul><ul><li>In HTML, empty tags just look like opening tags. </li></ul></ul><ul><ul><li><hr / > </li></ul></ul><ul><ul><li>In XHTML, empty tags have a slash . </li></ul></ul><ul><ul><li>(The space before the slash makes it compatible with old web browsers.) </li></ul></ul>
  11. 11. Attributes
  12. 12. <ul><ul><li>Attributes just add extra information within an (X)HTML tag. </li></ul></ul><ul><ul><li>The value for an attribute can be inside either single or double quotes. </li></ul></ul><ul><ul><li><h1 id =“ blah ”> </li></ul></ul><ul><ul><li>Attribute </li></ul></ul><ul><ul><li>Value </li></ul></ul>
  13. 13. <ul><ul><li>Tags can have multiple attributes, each separated by a space . </li></ul></ul><ul><ul><li><h1 id=“blah” class=“big” > </li></ul></ul><ul><ul><li>content </h1> </li></ul></ul><ul><ul><li>Attributes always go inside the opening tag. </li></ul></ul>
  14. 14. <ul><ul><li>You'll learn how to use every specific attribute and tag later in this series. </li></ul></ul><ul><ul><li>Now that you know the basic rules for writing (X)HTML, the rest will be easy! </li></ul></ul>
  15. 15. <ul><ul><li>The next part of this series will cover the elements of an (X)HTML document. </li></ul></ul><ul><ul><li>If you have any questions, feel free to contact me through LearningNerd.com . </li></ul></ul>

×