The power of the web lies in hyperlinks connecting resources together, and those resources displaying information with a few key data structures. Hyperlinks are constructed with the Anchor (a) Tag, and in addition to the basic text structures like paragraphs, data can be organized with Tables, Lists, Figures, and more.
In HTML, links are made with the "anchor" or "a" tag. The content inside the anchor tag is the clickable text of the link. The HREF attribute specifies where the link should lead. The optional TARGET attribute can help show the new resource in a specific part of the browser.
<a href="http://sample.com/url/to/resource.html" target="_blank">Click Here</a>
Absolute v Relative: Absolute paths in the HREF attribute are URLs that
show the full address of the resource. This will usually start with http://domain.com,
https://domain.com, or //domain.com. Relative paths are URLs that compare
with the current location. If a page at http://domain.com/somewhere.html has a relative link
with an HREF of elsewhere.html, then clicking on that link will direct the user to
http://domain.com/elsewhere.html.
Internal v External:
Links to resources on the same domain are known as "internal" because they typically
belong to the same web site. Remember, a web site is a collection of related web pages
on the same domain. External links, on the other hand, lead to resources on other web sites,
typically on different domains or sub-domains. External links must have absolute paths,
and they are good candidates for using the target="_blank" attribute to open in a new tab/window.
You should be able to identify the basic type of link by its HREF attribute.
Bookmark Anchors: These hyperlinks can help users navigate within a page, using the hashtag (#)
syntax and matching the ID attribute of the elements. For example, a Frequently Asked Questions page might
have a DIV like this one: <div id="faq1"> that holds their first question and answer,
and then also a link at the top like this one: <a href="#faq1">1. Sample Question?</a>
that jumps the user directly to the relevant question.
Application Schemes: By leading the HREF attribute with mailto: or tel:,
you can direct a browser to launch a different program to handle the link. The mailto:
scheme will open the default email application, and the tel: scheme can open the phone
app on mobile devices or a calling program like Skype on desktop devices. Other applications schemes may be available
for advanced use cases--if you wish to launch a different program from the web browser,
application scheme URLs is the topic to begin your research.
Image Maps: Using the map and area tags,
you can construct a visual-spatial map to display a collection of links.
The areas can be circles or polygons, specified by pixel measurements.
The map can then be applied to a particular image by matching its name in the
value of the usemap attribute in the img tag.
It's important not to over-style links, as we want users to recognize them as links. Styles for links should make it very obvious that they are clickable elements.
Links have 4 special CSS pseudoclasses representing certain states.
They are :link (default state for links that have not been visited),
:visited (default state for links that have been visited),
:hover (the state of having the mouse on top of the element),
and :active (the state of being clicked on by the mouse).
It is important that these states be specified in this order in the CSS code.
Switching the order may result in some of the styles never appearing.
For example, if the :hover state is specified after the :active
state, then the :hover styles will override the :active styles.
Since anchor tags are inline by default, it can be helpful to specify their
display property as block or inline-block
in order to use all the box model properties and make the elements look like buttons.
You should be able to use all the pseudoclass states and box model styles to modify the look of the links.
Some data is appropriate to arrange into a list.
Lists where order does not matter should be constructed with
unordered (bulleted) lists using the <ul> tag.
Lists where order does matter should be constructed with
ordered (numbered) lists using the <ol> tag.
In either type of list, each list item should use the <li> tag.
Other tags are allowed inside the <li> tag,
which means complex lists, even nested lists, can be created.
Nested, unordered lists are often used to construct navigation menus.
<ol>
<li>First List Item</li>
<li>Another List Item</li>
<li>Last List Item</li>
</ol>
The code above will create an ordered (numbered) list with 3 items in it.
If you modify the opening <ol> tag to include the
start attribute (e.g. <ol start="4">),
you can adjust the starting number of the list.
The CSS property list-style-type allows for a variety of
bullet icons and numbering schemes. You can also set this property to
none and use custom icons.
You should be able to determine which type of list is appropriate for the data you have, construct the list using the proper tags, and style the list to customize the bullets or numbering.
Tabular data can be presented using the <table> tag and
its related nested tags. This produces a basic chart format. A table may be
broken down into 4 parts.
<caption>: This caption describes the entire table.
It should be the very first child of the <table> element.
<thead>: Header rows belong in this part.
<tbody>: The main content rows of the table belong here.
If none of the 4 parts are specified, the browser will assume all rows
belong in a <tbody> element.
<tfoot>: Footer rows belong in this part.
The <thead>, <tbody>, and
<foot> parts may contain any number of table rows,
each one specified with a <tr> tag.
Each <tr> can contain any number of table cells.
Header cells should be implemented with the <th> tag,
while data cells should be implemented with the <td> tag.
Tables often work best if every row has the same number of cells.
However, each cell is allowed to use the colspan attribute or
rowspan attribute to extend the cell along the specified number
or cells in the other columns or rows.
Two important CSS properties that are table-specific include
border-collapse and border-spacing,
which specify how borders around the cells behave. Using the declaration
border-collapse: collapse; will force the cells to share borders.
The defaut value is separate, which then allows you to use
the border-spacing property to specify exactly the distance
between cell borders.
You should be able to construct the appropriate HTML to represent a given chart.
<iframe>: This element allows you to embed other web pages
into your page as if it were a regular block element. The src
attribute should contain a reference (URL) to the embedded page.
<blockquote>: This element allows you to call extra
attention to some content of your page. The cite attribute
can be used to attribute the quote to another source. For shorter quotations,
consider using the <q> tag.
<figure>: This element is useful for marking up an image
that is important to the content of the page. The nested <figcaption>
element can provide a description to go with the image.
More data structures could be appropriate for your data.
Some of these could include <address>,
<code>, <map>, or more.
Expert HTML developers will regularly review the available
HTML tags in case they are useful to fringe cases in their projects.
You should be able to recognize the miscellaneous data structures described above.