More HTML / display types and hierarchy
Lesson Intro
Some elements are display: block – and others are display: inline
It’s tricky… because technically, the browsers each implement this themselves.
They all chose the same thing, but the MDN documentation doesn’t explicitly say what display type each element is by default. We’ve been talking with them about adding the display type, but it’s tricky (and actually, they laid off most of the team who managed MDN since then).
Think about it like this:
The goals
-
Get introduced to the idea of "Block" and "Inline" elements
We’ll go into detail on this soon – so just start noticing them.
-
Consider what is REALLY happening when you click a link
What is your current mental model for that? Let’s replace it with a clear conceptual model.
-
Start thinking about hierarchy
We can use magazines and newspapers to see how this idea of headings and subheadings came into play.
Display: "block" elements stack
They run the full width of their parent element. They also stretch vertically to fit whatever content fills them up.
They are like layers of cake.
You could put one line of text in there… or 1 image / or 100000 million images or paragraphs. The Web was built to stretch (vertically) for miles (infinitely) – if need be.
It’s very convenient. The things stack on top of each other. OK?
Display: "inline" elements go in a line
These elements (along with the ‘words’ in paragraphs, etc.) follow a horizontal path and break to their next line. They are fluid. Bold and italic and mark and links and those types of things that are “inside” of, say, a paragraph would be display: inline elements.
Until writing this lesson… these details never crossed our minds.
“Text just works, right”?
But do we really need to know how the browser reads the “words” in a paragraph? We don’t know.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
No one seems to be able to explain this well…
Even the people who invented it:
html.spec.whatwg.org/multipage/dom.html#kinds-of-content
But that’s OK!
Unless you plan on working for the committee that defines the HTML language – or end up working for Mozilla, we suggest you just ignore this confusing stuff. It’s totally unimportant to the practical act of writing HTML. Just get the “block” and “inline” ideas down.
Non-elements?
“Words” aren’t really elements. It is taken for granted that they just “wrap” and flow in and break lines – in a fluid way based on their parent. But bold and italic and links are all official “elements” – and they are display: inline (By default) (you can change them, as you will soon see). (it’s kinda confusing) (but maybe just considering “words” as inline elements that you can’t change… is OK!)
Here’s an interactive example
and here’s a link to that Pen if you’d like to see the code.
CSS property
Classic display types
a {
display: block;
}
p a {
display: inline-block;
}
li {
display: inline;
}
div {
display: none;
}The browser creators (vendors) ultimately get to decide which elements have which default display type.
a links are display: inline by default. This is necessary because they are so often in paragraphs and need to go in a line but you’ll also want them to behave as parent elements and to set their display to block.
Newly introduced language features
-
CSS property
Border style
h2 { border-style: dotted; }The thing with these is that they don’t work unless all three properties (style, width, color) are set!
-
CSS property
Border width
h2 { border-width: 2px; }hmmm
-
CSS property
Border color
h2 { border-color: red; }This one can be useful if the width and style are already set and you want to override the color;
-
CSS property
Border
h2 { border-width: 2px; border-style: solid; border-color: red; } h2 { border: 2px solid red; }You’ll find that this is how people most often declare border styles. Side note: the values can go in any order?
Some things to think about
Newspapers have some classic “Hierarchy.” There is the main Big Story title, and then many second-tier titles (many h2s), and h3, h4s, etc.
The Yellow Pages
This feels like the first “internet” type grouping of things. Some people just got the “free” one-liner, but you could pay to have a pumped-up ad.
Having a “better” website – is just like having the bigger ad – or even… a Full Page!
What about the hierarchy here?
Is it a "link" - or a Network Request?
What do you think about that?
Exercises
-
Discover some new HTML elements
Spend some time looking through the different elements. https://developer.mozilla.org/en-US/docs/Web/HTML/Element
We’re keeping it simple! And 90s, so – which elements are the next most important ones to learn? Which ones are inline, and which ones are block? Share 6+ new elements you’re going to try using.
BUT REALLY…. we’re trying to pretend it’s 1991-1999 so – look over that list ^ But only use these ones, maybe: https://www.htmlhelp.com/reference/html40/alist.html
-
Break down some printed material
Find some magazines or newspapers or posters. Take a photo. Send it to your computer. Mark it up with Skitch. How does the hierarchy work? Share the output with the group.
-
Practice!
With those new things in mind… write some HTML! Make something. Many many things.
Checklist
-
You’re getting more comfortable with “syntax” and “formatting” – and can describe the difference.
-
You set your Sublime Text indentation user settings.
-
You’re starting to differentiate between display block and display inline elements.
-
You took some magazine covers or newspapers – and broke them down into meaningful hierarchies, and shared them with the group.
-
You got a list together of the next most important elements to start using.
Corrections
In the video – Derek says that the Sublime preferences file is written in Python. It IS written with a Python “dictionary” style syntax, but after that, we talked to the people who make it – and they said that it’s JSON. Same syntax… but – also – allows comments and doesn’t enforce the “no trailing comma” rule… so – is it really JSON? Then they said – well, it’s a “subset” of JSON… and in the end… we couldn’t really come to a final answer. It’s kinda their own file type.
AND it doesn’t matter. But it’s fun that we can just go straight to the source. However, note that the source is often a technical nerd who will not be able to understand why you are asking such a question. 😜
Window management
Derek uses Divvy. You can ask him for the shortcut mapping he uses in the videos.
There’s another free option called Spectacle, but you’ll also notice it says it’s no longer being actively maintained. (which means it might not work with a future OS?)
That is probably because macOS Catalina introduced a native “window snapping” or “Split View” – but it’s not so hot…
There’s a bunch of options like https://apps.apple.com/us/app/bettersnaptool/id417375580
If you find one you like, let us know! (As of April 2024, we highly recommend Divvy)
Pane layout
Sublime Text
1 is for one pane. 2 is for two – 3, 4 – and 5 will make a fun 2×2 grid.
You can see some other options in View → Layout
At this stage, you don’t have that many files so this won’t be that useful yet.
Toggle Sidebar
Sublime Text
This is a weird one. It’s unusual to use 2 letters. But it should help remind you to add one key at a time. Don’t just press them all at the same time. It’s like a fun secret lock!
Note: if there is nothing open (no active folder or files…) (just one file) – it’s not going to toggle!
You’ll want to get used to the file structure at first but to save space, get used to this whacky shortcut.
OPTIONAL! further reading
We just tossed this “optional” reading section together —
It’s ONLY for people who have plenty of extra time and want a few more leads on resources. Do NOT feel obligated to “open this box.” Make sure you have 110% of the bare minimum done first before taking on anything more 😉
Here’s a page from Mozilla (MDN). Fun fact: Mozilla came out of Netscape. There was a browser called Mosaic, so it is a play on “The Mosaic Killer” + Godzilla. Mozilla.”
Here’s how they explain HTML. The way they explain “semantics” is pretty great.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals