This repository has been archived by the owner on Nov 29, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
html-summary.txt
240 lines (231 loc) · 14.9 KB
/
html-summary.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
HTML SUMMARY FILE
Note- some of the definitions were copied from the book. No copyright is intended, and besides the forming of this document, credit to John Duckett & his publisher for the following info!
Also, some content may have been copied over from other websites (like w3 schools). I claim no ownership/authorship, aside from compiling this list.
- Elements Shown in the HTML&CSS Book -
<html> </html> Tells the page there is html code within.
<body> </body> The body of the page. Indicates that anything within should be shown inside the main browser window.
<h1> </h1> The main heading. Increase the number, and the heading will get smaller (all the way to 6).
<p> </p> Represents a paragraph.
<head> </head> This contains information ABOUT the page.
Stuff in here isn't shown on the main section of the webpage, but in the top (title area).
<title> </title> Within is the title shown at the top of the webpage (or web browser).
<b> </b> Makes text bold.
<i> </i> Makes text italicized.\
<sup> </sup> Text becomes a superscript.
<sub> </sub> Text becomes a subscript
<br /> Line break.
<hr /> Horizontal rule (line).
<strong> </strong> Indicates the content has a strong importance. (default, makes the text bold + ex: may say the text w/ strong emphasis)
<em> </em> Indicates emphasis that subtly changes the meaning of a sentance. (default, makes the text italic)
<blockquote> </blockquote>
Used for longer quotes that take up an entire paragraph. You can use <p> tags within.
<q> </q> Used for shorter quotes that are within a paragraph. But, IE doesn't put " " quotes around the quote,
even though other browsers do. So people avoid this tag.
<abbr> </abbr> If you use an abbreviation or an acronym, you can use the <abbr> element. The title tag is used to specify the full term.
HTML5 just uses the <abbr> element for both abbreviations and acronyms, while in HTML4
there was a separate <acronym> element.
<cite> </cite> The cite element can be used to indicate where the citation is from.
In HTML5 <cite> shouldn't be used for a person's name (though people did in HTML4).
Browsers will render content of <cite> in italics.
<dfn> </dfn> Is used to indicate the defining instance of a new term. Some browsers show the content in italics.
The word/phrase that needs to be defined goes within the tags, and the definition after.
<address> </address>
The <address> element has a specific use: to contain contact details for the author of the page.
It can contain the physical address but doesn't have to. Could contain phone # or email address.
Also, see hCard microformat for adding physical address info.
<ins> </ins> Used to show content that has been inserted into a document. (text is usually underlined)
<del> </del> Can show text that has been deleted from a document. (text has a line through it)
<s> </s> Indicates something is no longer relevant or accurate, but shouldn't be deleted.
Visually, shows text with a line through it.
Note: older versions of HTML had the <u> element for underlined content, but this is being phased out.
<a> </a> The link tag, to connect webpages. Most commonly used with this is the href attribute. (see below)
Can also link to other id's with the #. See below for an example.
<ol> </ol> Ordered list. List elements <li> go within.
<ul> </ul> Unordered lists. List elements <li> go within.
<li> </li> List elements. Go within the list tags <ol>.
<dl> </dl> A definition list. Within is <dt> and <dd> elements.
<dt> </dt> Definition term. Contains the term that will be defined.
<dd> </dd> Contains the definition.
<img /> The image element. It is an empty element (doesn't have a closing tag).
Use the following attributes within: src, alt, and title
<figure> </figure> Introduced in HTML5, this element can contain images that share a caption.
It uses the <img /> element and the <figcaption> element within.
<figcaption> </figcaption>
Used in the <figure> element. Holds a caption of the image(s).
<table> </table> A table in html. Contains <tr> and <td> elements to create the table.
<tr> </tr> Table row. Goes within the <table> element, and holds the <td> element.
<td> </td> Table data. Holds elements of data that go in a table row <tr>.
<th> </th> Table header. Is an element that represents the heading for either a column
or a row. You can use the scope attribute to define if it's a "row" or "col".
<thead> </thead> A table head. Not really different than the other table stuff, but especially useful when
styling in css and for those who use screen readers.
<tbody> </tbody> The body of the table.
<tfoot> </tfoot> The footer of the table.
<form> </form> Form control elements live within the <form> element. This requires the action attribute and
should usually have a method and id attribute too.
<input /> The input element. Used for several different form controls. See attributes below that apply.
Ex: type, name, size, maxlength
<textarea> </textarea>
Creates a multi-line text box. Anything within is "default" text within when the page loads.
<select> </select> A dropdown list box (aka select box). The options to select from are made with the <option> element.
<option> </option> Represents an option within a list/select box. The words within are the ones that will be shown as an option.
<button> </button> Makes a button. Basically anything can go inside, like a combination of an image and text.
<label> </label> The <label> tag defines a label for an <input> element. Technically, each form should have its own <label>
element, b/c this makes the form accessible to vision-impaired users.
This element can be used in two ways. First, to wrap around both the text description and the form input.
Secondly, to be kept separate from the form control and use the for attribute to indicate which form
control it is a label for.
Also, if it's a label for a checkbox or radio button for example, you can click on the text within to select instead of
just the physical button area itself (expands clickable area).
<fieldset> </fieldset>
You can group related form controls within this element. Especially useful for organization / longer forms.
<legend> </legend> This element goes inside the <fieldset> element. Contains a caption which can help identify the purpose
of that group of form controls.
<div> </div> The <div> element allows you to group a set of elements together in a one block-level box.
This is extremely useful- you could group the header section of your page, the body, and the footer, all separately.
<span> </span> The <span> element is basically the inline <div> equivalent.
It could contain a section of text where there is no other sutiable element to differentiate it from its
surrounding text. Or, it could contain a number of inline elements.
The most common use of <span> is to control the appearance of the content through CSS.
<iframe> </iframe> An iframe is like a little window that has been cut into your page, and in that window you can see another page.
The term iframe is an abbreviation of inline frame.
<meta /> The <meta> element lives inside the <head> element and contains information about that web page.
Isn't visible to users, but super useful.
- Attributes -
- lang
<p lang="en">Paragraph in English</p>
The lang attribute. Indicates the text within is in the language specified.
- cite
<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh"> </blockquote>
In the above example, cite is the attribute. The value should be a URL that contains more data about the citation.
- href
<a href="mailto:homer@example.org">homer@example.org</a>
<a href="http://www.imdb.com">IMDB</a>
The href attribute, within the <a></a> tags. href indicates a link's destination.
- target
There's also the target="_blank" attribute, which opens a link in a new window.
Generally, you should avoid opening links in a new window, but if you do, it's considered good
practice to inform users that the link will open a new window before they click on it.
- id
The id attribute assignes an id to an html element. It is known as the global attribute, as
any element can have the id attribute. No id's of elements should ever be the same, becuase
it is meant to be a unique identifier.
In chapter 4, we use href's to link to certain id's as a way to go to certain locations on the page.
Example:
<a href="#topOfPage">Go To Top</a> Clicking this will go to the html element that has
the id = "topOfPage"
<h2 id="topOfPage">Welcome!</h2> This is the h2 element that is id'd by topOfPage.
When the link above is clicked, the page will go to
where this html element is!
- src
In this example, used for images. Tells the <img /> tag where the image is.
- alt
In the <img /> tag, this is a text description of the image in case the image doesn't come up,
and also is helpful for those with screen reader software and search engines.
If using an image to only make a page look more attractive, then include this, but the quotes
should be empty.
- title
Can use with the <img /> element to provide additional info about the image. Any text that is within
the quotes for this attribute will appear in a tooltip when the mouse hovers over the image.
- height
Specifies the height of an image in pixels. (More people are starting to use CSS for image sizing instead of HTML)
- width
Specifies the width of an image in pixels. (More people are starting to use CSS for image sizing instead of HTML)
- scope
You can use this within a table header <th> to designate that the table header is for a column or a row.
Ex: <th scope="row">Tickets Sold:</th>
- colspan
This attribute is used for table headers or data, etc. when they span across multiple columns.
Ex: <td colspan="2">Geography</td>
- rowspan
This attribute is used for table headers or data, etc. when they span across multiple rows.
Ex: <td rowspan="3">CNN</td>
- action
A mandatory attribute within the <form> element. Contains the URL for the page on the server that will receive the
information in the form when submitted.
- method
Forms can be sent using one of two methods: get or post. If this attribute isn't used, the default type is get.
- get
Used for short forms, and when you're retrieving data from the web server. The values from the form are added
to the end of the URL specified in the action attribute.
- post
The values are sent in HTTP headers. You should use post if users are uploading a file, if the form is very long,
if the form contains sensitive data like passwords, if it adds or deletes info from a database, etc.
- type
Used in the <input> element. Determines what kind of input will be created.
Examples:
- text
Creates a single line of text input (textbox)
- password
Creates a text input (above), except the characters are hidden (they show up as dots as default I think)
- file
For uploading a file.
- hidden
A hidden form control (can be viewed through the "view source" option). A web page author could use a hidden
field to indeicate which page a user was on when they submitted a form.
- date
A date picker. For entering dates!
- email
For entering email addresses! Automatically verifies the email is in the correct format.
- url
Same thing as email. You have to put in a URL- automatic validation. However, when I tested it, it also required
"http://". So, users maybe could be confused, especially if they type www.something.com and it doesn't work.
- search
A simple search box. Includes the x to clear the search box. You can pair it with a submit button named "Search"!
- name
The name of a form control to be referenced / used later.
- size
Setting the size of a form control. This is old, you should do this in CSS. The value (integer) is the number of characters
that can be seen within the form control.
- maxlength
Sets the max length of a form control.
- checked
For radio or checkbox buttons in forms. If checked="checked", then it will be selected by default on the page load.
- selected
Similar to checked, can be used to indicate the option that should be selected when a page loads within a list/select box.
- multiple
If a select box has the multiple attribute, and it's value is set as multiple, it will become a multiple select box,
where multiple options can be selected.
- for
The for attribute states which form control a label belongs to (referencing the id)
- required
If required="required" in a form element, then it is required before submitting (HTML5 form validation).
- placeholder
You can use this attribute on any text input element. The value that placeholder is set to will be the "placeholder" text
in the text input until a user clicks on the text input.
- scrolling
This won't be supported in HTML5, so I'm not even sure why I'm putting this here (I disregarded non supported attributes before).
But, it's for an iframe. It can take three values to determine if you want the iframe to have scroll bars enabled (yes/no/auto).
- frameborder
This won't be supported in HTML5, so I'm not even sure why I'm putting this here either. For an iframe. Do you want a border?
0 is no. 1 is yes.
- seamless
This IS supported in HTML5. This can be applied to an iframe where scrollbars are not desired. This attribute doesn't require
a value, so often you will see seamless="seamless". Classic.
- some meta attributes
- name & content
Most common, used together. They specify properties of an entire page.
- description
Commonly used by search engines to understand what the page is about. Should be a max of 155 characters.
Sometimes this is also displayed in search engine results.
- keywords
Should contain a list of comma-separated words that a user might search on to find the page.
In practice, this no longer has any noticeable effect on how search engines index your site.
- robots
Indicates whether search engines should add this page to their search results or not. A value of noindex can be used
if this page should not be added. A value of nofollow can be used if search engines should add this page in their results
but not any pages that it links to.
- http-equiv
- author
Defines the author of the web page.
- pragma
Prevents browsers from chaching the page. (prevents it from storing it locally to save time downloading it on subsequent visits)
- expires
Indicates if the page should expire, and if it does, then it should no longer be cached. The date must be in the following form
example: Fri, 04 Apr 2014 23:59:59 GMT
The http-equiv attribute provides an HTTP header for the information/value of the content attribute.
The http-equiv attribute can be used to simulate an HTTP response header.
Using http-equiv is no longer the only way to specify the character set of an HTML document:
HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">
attribute values: content-type, default-style, & refresh