Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Basics of (X)HTML Tags

4,401 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
  • Be the first to comment

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>

×