Difference between revisions of "HTML Primer"

From Dreamwidth Notes
Jump to: navigation, search
(Headings)
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
The following primer tries to give a short overview of HTML.  See also the [[CSS Primer]] and [[Browser Developing Tools]].
 +
 
= Basic formatting: Tags and attributes =
 
= Basic formatting: Tags and attributes =
  
An HTML tag is surrounded by < > brackets.  Most tags come as a set with an "opening" form (Example: <div>) and a "closing" form with a / (Example: </div>)  An individual tag inside of an HTML document is called an "element".
+
An HTML tag is surrounded by <code>&lt; &gt;</code> brackets.  Most tags come as a set with an "opening" form (Example: <code>&lt;div&gt;</code>) and a "closing" form with a / (Example: <code>&lt;/div&gt;</code>A few tags are self-closing and can either be written with a closing slash (Examples: <code>&lt;/br /&gt;</code>, <code>&lt;hr /&gt;</code>, <code>&lt;img /&gt;</code>) or not (<code>&lt;br&gt;</code>, <code>&lt;hr&gt;</code>, <code>&lt;img&gt;</code>) An individual tag inside of an HTML document is called an "element".
  
HTML tags nest together much like nesting boxes: tags can contain other tags inside of them between the opening and closing forms of the tag.  Some tags can't contain other tags and these tags do not need closing tags.
+
HTML tags nest together much like nesting boxes: tags can contain other tags inside of them between the opening and closing forms of the tag.  Self-closing tags can't contain other tags.
  
Tags can also have attributes, which come in the form of name="value".  For instance, when you are making a link to another page using the <code>a</code> tag, your code will be:
+
Tags can also have attributes, which come in the form of <code>name="value"</code>.  For instance, when you are making a link to another page using the <code>&lt;a&gt;</code> tag, your code will be:
  
 
<syntaxhighlight lang="html4strict">
 
<syntaxhighlight lang="html4strict">
Line 16: Line 18:
  
 
== Inline versus block elements ==
 
== Inline versus block elements ==
 +
 +
* [http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm Block vs inline elements]
  
 
= Tag Overview =
 
= Tag Overview =
Line 23: Line 27:
 
The basic structure of an HTML page uses these tags.   
 
The basic structure of an HTML page uses these tags.   
  
* &lt;html&gt; -- The HTML tag contains everything else.  
+
* <code>&lt;html&gt;</code> -- The HTML tag contains everything else.  
* &lt;head&gt; -- The head tag doesn't contain tags that show up on the page.  Instead, it includes other resource files, the title of the page, and other [http://www.w3schools.com/html5/tag_meta.asp metadata tags].
+
* <code>&lt;head&gt;</code> -- The head tag doesn't contain tags that show up on the page.  Instead, it includes other resource files, the title of the page, and other [http://www.w3schools.com/html5/tag_meta.asp metadata tags].
* &lt;body&gt; -- The body tag contains all of the tags that actually show up on the page.
+
* <code>&lt;body&gt;</code> -- The body tag contains all of the tags that actually show up on the page.
  
 
Example of the HTML, head, and body tags put together in their proper order:
 
Example of the HTML, head, and body tags put together in their proper order:
Line 41: Line 45:
  
 
== Head tags ==
 
== Head tags ==
 +
 +
* <code><title></code> -- To define the window title of your page.
 +
* <code><link></code> -- To link to other resources such as CSS stylesheets or scripts.
  
 
== Divs ==
 
== Divs ==
  
Div tags mostly exist to give structure to an HTML page--they are usually used with class or ID attributes.  They are block elements.
+
Div tags mostly exist to give structure to an HTML page--they don't do anything on their own as they're just containers and are usually used with class or ID attributes.  They are block elements.
  
 
== Spans ==
 
== Spans ==
  
A span tag is mostly used to contain inline elements--again, usually used with class or ID attributes.  Span tags are inline elements.
+
A span tag is mostly used to contain inline elements--again, usually used with class or ID attributes as they don't do anything on their own.  Span tags are inline elements.
  
 
== Paragraphs and Break tags ==
 
== Paragraphs and Break tags ==
  
* &lt;p&gt; -- This tag defines a paragraph in the text.
+
* <code>&lt;p&gt;</code> -- This tag defines a paragraph in the text. This is a preformated tag. Text within a paragraph has some space before and after it.
* &lt;br /&gt; -- This tag defines a line break
+
* <code>&lt;br /&gt;</code> -- This tag introduces a line break.
 +
* <code>&lt;hr /&gt;</code> -- This tag introduces a 1px thick horizontal line.
  
 
== Links ==
 
== Links ==
  
The link tag is the &lt;a&gt; tag:
+
The link tag is the <code>&lt;a&gt;</code> tag:
  
 
<syntaxhighlight lang="html4strict">
 
<syntaxhighlight lang="html4strict">
Line 65: Line 73:
 
== Images ==
 
== Images ==
  
The image tag is how to include an image in an HTML document:
+
The image tag is how to include an image in an HTML document.  For instance, here is an image to Dreamwidth's little username icon:
  
 
<syntaxhighlight lang="html4strict">
 
<syntaxhighlight lang="html4strict">
<img src="http://s.dreamwidth.org/img/silk/identity/user.png" width="16" height="16">
+
<img src="http://s.dreamwidth.org/img/silk/identity/user.png" width="16" height="16" />
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
== Headings ==
 
== Headings ==
  
* &lt;h1&gt;
+
Headings are block level elements meant to organize a page into sections (think of entries in a table of contents)--the smaller the number, the higher the heading is in the hierarchy. Headings are preformated tags: text within a heading has a certain size, some spacing before and after it and is bold.
* &lt;h2&gt;
+
 
* &lt;h3&gt;
+
* <code>&lt;h1&gt;</code> -- the highest level, usually the biggest in size
* &lt;h4&gt;
+
* <code>&lt;h2&gt;</code>
* &lt;h5&gt;
+
* <code>&lt;h3&gt;</code>
* &lt;h6&gt;
+
* <code>&lt;h4&gt;</code>
 +
* <code>&lt;h5&gt;</code>
 +
* <code>&lt;h6&gt;</code>
  
 
== Lists ==
 
== Lists ==
Line 86: Line 96:
 
=== Unordered and ordered lists ===
 
=== Unordered and ordered lists ===
  
* &lt;ol&gt; -- This tag surrounds list elements in ordered lists.
+
* <code>&lt;ol&gt;</code> -- This tag surrounds list elements in ordered lists.
* &lt;ul&gt; -- This tag surrounds list elements in unordered lists.
+
* <code>&lt;ul&gt;</code> -- This tag surrounds list elements in unordered lists.
* &lt;li&gt; -- This is the tag for an individual list element in both ordered and unordered lists
+
* <code>&lt;li&gt;</code> -- This is the tag for an individual list element in both ordered and unordered lists
  
 
=== Definition list ===
 
=== Definition list ===
Line 94: Line 104:
 
Not used too commonly:
 
Not used too commonly:
  
* &lt;dl&gt; -- The tag that contains all of the list elements
+
* <code>&lt;dl&gt;</code> -- The tag that contains all of the list elements
* &lt;dt&gt; -- The title part of the definition in the list
+
* <code>&lt;dt&gt;</code> -- The title part of the definition in the list
* &lt;dd&gt; -- The definition part of the definition in the list.
+
* <code>&lt;dd&gt;</code> -- The definition part of the definition in the list.
  
 
== Tables ==
 
== Tables ==
  
* &lt;table&gt;
+
* <code>&lt;table&gt;</code> -- Goes around the entire table
* &lt;thead&gt;
+
* <code>&lt;caption&gt;</code> -- Gives the table a caption
* &lt;tbody&gt;
+
* <code>&lt;thead&gt;</code> -- This optionally goes around rows in the head of the table
* &lt;tr&gt;
+
* <code>&lt;tbody&gt;</code> -- This optionally goes around rows in the body of the table
* &lt;th&gt;
+
* <code>&lt;tr&gt;</code> -- Indicates a row
* &lt;td&gt;
+
* <code>&lt;th&gt;</code> -- Table cell that is a header
 +
* <code>&lt;td&gt;</code> -- Normal table cell
  
 
== Quoting ==
 
== Quoting ==
  
* &lt;blockquote&lt;
+
* <code>&lt;blockquote&gt;</code> -- use for longer, block quotes
* &lt;q&lt;
+
* <code>&lt;q&gt;</code> -- use for shorter, inline quotes
  
 
= References =
 
= References =
 +
 +
* [http://www.w3schools.com/html5/html5_reference.asp HTML5] reference -- shows what's new and deprecated
  
 
[[Category: Styles]]
 
[[Category: Styles]]

Latest revision as of 10:16, 24 April 2011

The following primer tries to give a short overview of HTML. See also the CSS Primer and Browser Developing Tools.

Basic formatting: Tags and attributes

An HTML tag is surrounded by < > brackets. Most tags come as a set with an "opening" form (Example: <div>) and a "closing" form with a / (Example: </div>) A few tags are self-closing and can either be written with a closing slash (Examples: </br />, <hr />, <img />) or not (<br>, <hr>, <img>) An individual tag inside of an HTML document is called an "element".

HTML tags nest together much like nesting boxes: tags can contain other tags inside of them between the opening and closing forms of the tag. Self-closing tags can't contain other tags.

Tags can also have attributes, which come in the form of name="value". For instance, when you are making a link to another page using the <a> tag, your code will be:

<a href="http://www.dreamwidth.org">Dreamwidth</a>

In this instance, the href part of the opening tag is an attribute. The text inside of the link tag is what shows up as the link, and then the tag closes with the </a> form of the tag.

Some important tag attributes are classes and ids. A class is a label that one can place on a tag, and an id is a unique identifier. You can then use these class and ID tags to apply CSS rules to an element-- see the CSS Primer for more information.

Inline versus block elements

Tag Overview

Html, Head and Body; comments

The basic structure of an HTML page uses these tags.

  • <html> -- The HTML tag contains everything else.
  • <head> -- The head tag doesn't contain tags that show up on the page. Instead, it includes other resource files, the title of the page, and other metadata tags.
  • <body> -- The body tag contains all of the tags that actually show up on the page.

Example of the HTML, head, and body tags put together in their proper order:

<html>
<head><title>My Page</title></head>
<body>
<p>Content of my page</p>
</body>
</html>

Notice that inside the head tag, we are using a title tag, and inside the body we are using a paragraph tag.

Head tags

  • <title> -- To define the window title of your page.
  • <link> -- To link to other resources such as CSS stylesheets or scripts.

Divs

Div tags mostly exist to give structure to an HTML page--they don't do anything on their own as they're just containers and are usually used with class or ID attributes. They are block elements.

Spans

A span tag is mostly used to contain inline elements--again, usually used with class or ID attributes as they don't do anything on their own. Span tags are inline elements.

Paragraphs and Break tags

  • <p> -- This tag defines a paragraph in the text. This is a preformated tag. Text within a paragraph has some space before and after it.
  • <br /> -- This tag introduces a line break.
  • <hr /> -- This tag introduces a 1px thick horizontal line.

Links

The link tag is the <a> tag:

<a href="http://www.dreamwidth.org">Dreamwidth</a>

Images

The image tag is how to include an image in an HTML document. For instance, here is an image to Dreamwidth's little username icon:

<img src="http://s.dreamwidth.org/img/silk/identity/user.png" width="16" height="16" />

Headings

Headings are block level elements meant to organize a page into sections (think of entries in a table of contents)--the smaller the number, the higher the heading is in the hierarchy. Headings are preformated tags: text within a heading has a certain size, some spacing before and after it and is bold.

  • <h1> -- the highest level, usually the biggest in size
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

Lists

There are a few different types of lists.

Unordered and ordered lists

  • <ol> -- This tag surrounds list elements in ordered lists.
  • <ul> -- This tag surrounds list elements in unordered lists.
  • <li> -- This is the tag for an individual list element in both ordered and unordered lists

Definition list

Not used too commonly:

  • <dl> -- The tag that contains all of the list elements
  • <dt> -- The title part of the definition in the list
  • <dd> -- The definition part of the definition in the list.

Tables

  • <table> -- Goes around the entire table
  • <caption> -- Gives the table a caption
  • <thead> -- This optionally goes around rows in the head of the table
  • <tbody> -- This optionally goes around rows in the body of the table
  • <tr> -- Indicates a row
  • <th> -- Table cell that is a header
  • <td> -- Normal table cell

Quoting

  • <blockquote> -- use for longer, block quotes
  • <q> -- use for shorter, inline quotes

References

  • HTML5 reference -- shows what's new and deprecated