1. The Basics of (X)HTML Tags Background photo byWill Pate

• • LearningNerd.com

• LearningNerd.com

2.

• This is part of a series of (X)HTML and CSS tutorials, which can all be found atLearningNerd.com/xhtml-css

3. Anatomy of an (X)HTML Tag 4.

• An (X)HTML tag is just a name/keyword surrounded by angle brackets.

• So this is called theh1 tag .

• Tag name

• Angle brackets

• < h1 >

5.

• It's good practice to write all HTML tags in lower-case letters.

• And when using XHTML, all tagsmustbe lower-case.

• Good:

• Bad:

6.

• Most (X)HTML tags are used in pairs to label content (such as text).

• The closing tag always needs aslashbefore the tag name.

• Opening tag

• Closing Tag

• content < / h1>

7.

• The opening tag, closing tag, and the content between them makes one unit called an (X)HTML element.

• More specifically, this example can be called theh1 element .

• content

• (X)HTML Element

8.

• Just like those Russian stacking dolls, (X)HTML elements can nest inside of each other.

• here's a bunch oftext with aquote in the middle of it

Photo byA30_Tsitika/ Anglica 9.

• When nesting elements, thefirsttag opened must be thelasttag closed.

• Good:

• Bad:

10.

• Some (X)HTML tags insert content instead of labeling it. They're called empty or self-closing tags.

• In HTML, empty tags just look like opening tags.

• In XHTML, empty tags have aslash .

• (The space before theslashmakes it compatible with old web browsers.)

11. Attributes 12.

• Attributes just add extra information within an (X)HTML tag.

• The value for an attribute can be inside either single or double quotes.

• Attribute

• Value

13.

• Tags can have multiple attributes, each separated by aspace .

• content

• Attributes always go inside the opening tag.

14.

• You'll learn how to use every specific attribute and tag later in this series.

• Now that you know the basic rules for writing (X)HTML, the rest will be easy!

15.

• The next part of this series will cover the elements of an (X)HTML document.

• If you have any questions, feel free to contact me throughLearningNerd.com .