all the tags i could be using¤
i'm interested in how we write about code, and i think we should use standards in as many places as possible. the document explores some of the standard html tags that i'm not aware of, or forgot about.
let's look through the standard html tags and see what opinions we can reuse.
motivation¤
this exercise is useful for me because i like to write in markdown which has a limited design affordances. since markdown is a superset of html we can reuse standard tags as design units in our literate programming.
a concrete example is the <var></var> tag¤
> The HTML element represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent. The Var Text element
based on definition the <var> tag seems like perfect way
to style variables defined within a program.
* i do not agree with the style, but i agree with the semantics.
* to derive intertextuality between code/narrative. pre tags seems to make more sense between there forms will be most consistent. the monospace indicates that this reads code.
* maybe the code has a different style itself.
%reload_ext pidgy
import pandas, requests
pandas.options
__import__("requests_cache").install_cache()
### style choices
while toying with the document i realize that some folks might be caught up
by style inconsistencies with the tags.
i'm changing some styles used in this document.
the goal of this is semantic consistency so style matters less today.
style=\
```css
var {
font-family: monospace;
whitespace: pre;
font-weight: bold;
}
mark {
background-color: lightblue;
}
a:link {
font-weight: bold;
}
```
<style>
{{style.splitlines(True)[1:-1] | join}}
</style>
style choices¤
while toying with the document i realize that some folks might be caught up by style inconsistencies with the tags. i'm changing some styles used in this document. the goal of this is semantic consistency so style matters less today.
style=\
css
var {
font-family: monospace;
whitespace: pre;
font-weight: bold;
}
mark {
background-color: lightblue;
}
a:link {
font-weight: bold;
}
our resources¤
all the html tags. mdn,w3schools=filter(any, ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://www.w3schools.com/TAGS/default.asp ).splitlines()) ````````````````````````````````````````````````
we are going to explore documentation from mdn and w3schools
because they are popular resources that populated the query all the html tags
.
mdn,w3schools=filter(any, (
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://www.w3schools.com/TAGS/default.asp
).splitlines())
choosing a resource¤
we are going to refer to the mdn docs: * mdn has more description * the mdn docs have 20 more tags defined. after further inspection these may be mostly deprecated tags. * mdn breaks their tables into groups
between the two resources there are 139 tags to explore.
the tags¤
the html tag¤
Using the language attribute on the HTML element requires the lang attribute to be defined.
otherwise, most automated testing with fail.
| Element | Description | |
|---|---|---|
| 0 | <html> | The <html> HTML element represents the root (t... |
document tags¤
there is nothing fun and new here.
i do need to visit the recommendations for the <meta/> for others reasons.
for accessibility reasons we need to include <title> because it is the document title.
| Element | Description | |
|---|---|---|
| 0 | <base> | The <base> HTML element specifies the base URL... |
| 1 | <head> | The <head> HTML element contains machine-reada... |
| 2 | <link> | The <link> HTML element specifies relationship... |
| 3 | <meta> | The <meta> HTML element represents Metadata th... |
| 4 | <style> | The <style> HTML element contains style inform... |
| 5 | <title> | The <title> HTML element defines the document'... |
content sections¤
the <header> element might be practial to utilize within markdown.
there are probably geo situations where address would be useful too.
| Element | Description | |
|---|---|---|
| 0 | <address> | The <address> HTML element indicates that the ... |
| 1 | <article> | The <article> HTML element represents a self-c... |
| 2 | <aside> | The <aside> HTML element represents a portion ... |
| 3 | <footer> | The <footer> HTML element represents a footer ... |
| 4 | <header> | The <header> HTML element represents introduct... |
| 5 | <h1>, <h2>, <h3>, <h4>, <h5>, <h6> | The <h1> to <h6> HTML elements represent six l... |
| 6 | <main> | The <main> HTML element represents the dominan... |
| 7 | <nav> | The <nav> HTML element represents a section of... |
| 8 | <section> | The <section> HTML element represents a generi... |
text content¤
dfs[4]
inline text content¤
- a variable could be an:
a, abbr, dfn, mark, ruby, var -
there are different references to coded objects like:
var, code, samp- these differentiations can help an author give more semantic meaning
dfs[5]
in a literate programming, it seems possible that we layer inline tags together
my variable is an example with layers.
multimedia/embeds¤
don't forget your alt text.
return dfs[6], dfs[7], dfs[8]