The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,861 other subscribers

Archive for the ‘HTML5’ Category

« Previous Entries
Next Entries »

What is the difference between <p>, <div> and <span> in HTML&XHTML?

Posted by jpluimers on 2023/06/06

I write most of my documentation in Markdown or reStructuredText, so I don’t bump into html questions as often as in the past. But recently, I had to document in html as markdown was impossible, bumped in the choice between using div or p tags for paragraphs, and remembered there was a p problem not present with div but forgot which problem.

So I found [Wayback/Archive] What is the difference between <p>, <div> and <span> in HTML&XHTML? where the red bit explained what I forgot:

As others have answered… div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.

An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. [Wayback/Archive] The specs provide more detailed info.

All phrasing elements, such as strong and em, can only contain other phrasing elements: you can’t put a table inside a cite for instance. Most flow content such as div and li can contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and th are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements.

While both div and p are non-phrasing flow content, the div can contain other flow content children (including more divs and ps). On the other hand, p may only contain phrasing content children. That means you can’t put a div inside a p, even though both are non-phrasing flow elements.

Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div inside a span, you will get a validation error even if you have span {display: block;} and div {display: inline;} in your CSS.

Thanks [Wayback/Archive] Dhamu for asking that question and [Wayback/Archive] chharvey for explaining these details!

The [Wayback/Archive] HTML Standard: 3.2.5.2 Kinds of content has a cool diagram too:

Read the rest of this entry »

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

Visual Studio Code: blazingly fast text expansion with Emmet

Posted by jpluimers on 2022/09/15

I come from a background of Delphi, Visual Studio and Notepad++ editors that historically have expanded their functionality over decades of releases.

When switching much of my development to Visual Studio Code, which out of the box aims at basic support (which has grown remarkably over the years so it’s way beyond basic now), I decided to review my editing behaviours see if plugins (in vscode speak “extensions marketplace“) would assist me with that.

One of my behaviours I wanted to get rid of is heavily use of keyboard macros, so when doing more web-stuff, I bumped into Emmet (that in the past was called Zen Code).

I bumped into Emmet because I wanted to refactor quite a few bits of html, and embed many sections of text in tags. Normally I would have written a macro for that, but now I did a quick [Wayback/Archive.is] vscode html embed text in element – Google Search and bumped into [Wayback/Archive.is] html – How to do tag wrapping in VS code? – Stack Overflow (thanks [Wayback/Archive.is] Alex!)

Since Visual Studio Code has built-in support for Emmet, here are some links so I can quickly find them back:

Hopefully I will now also less rely on user-defined snippets, though they are still available: [Wayback/Archive.is] Snippets in Visual Studio Code

Using Emmet eventually might help me in my blog-writing too, which still is heavily WordPress.com, known for its limited editor, based.

Apparently, my Google Search fu still is good enough to find these kinds of gems (:

–jeroen

Posted in .NET, CSS, Development, HTML, HTML5, Software Development, Visual Studio and tools, vscode Visual Studio Code, Web Development | Leave a Comment »

I love the way it shows “Duden Offline”

Posted by jpluimers on 2021/11/04

This does not happen often, and I found the way that [WayBack] Duden Offline is indicated hilarious!

It’s just a “basic” HTML page showing the meaning of “Wartung” (German word for Maintenance).

Duden is het German equivalent of the Oxford English Dictionary.

Not all of the huge site was gone. Part of the “Rechtschreibung” was still there, including the Wikipedia entry (:

I wonder what that one shows during maintenance (:

Links:

–jeroen

Read the rest of this entry »

Posted in CSS, Development, Fun, HTML, HTML5, Power User, Software Development, Web Development | Leave a Comment »

Naughty naughty no alt: CSS style to clearly show which images lack an alt-text

Posted by jpluimers on 2021/10/05

The CSS from [WayBack/Archive.is] Naughty naughty no alt that shows the below red moving rendering of images that do not have an alt-text is simple:

Read the rest of this entry »

Posted in Bookmarklet, CSS, Development, HTML, HTML5, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

html – CSS Display an Image Resized and Cropped – Stack Overflow

Posted by jpluimers on 2021/08/25

[WayBack] html – CSS Display an Image Resized and Cropped – Stack Overflow (thanks [WayBack] roborourke!); see full answer link for runnable snippet and HTML (the WordPress editor keeps fucking up preformatted code blocks with html or XML in it).

You could use a combination of both methods eg.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

You embed the img in a div with class .crop, or in-line the styles in the img and div tags.

--jeroen

 

Posted in CSS, Development, HTML, HTML5, SocialMedia, Software Development, Web Development, WordPress, WordPress | Leave a Comment »

HTML table border styles

Posted by jpluimers on 2021/01/20

I always get confused when I see this kind of HTML:

<td style="border: 1px black; border-style: none solid solid;">

This raises questions like:

  • When less than 4 borders are mentioned, which borders are solid, and which borders are none?
  • What is the order of 0…4 borders?

Luckily these links helped me:

  1. [WayBack] w3schools: CSS border-style property
  2. [WayBack] w3schools: CSS Borders
  3. [WayBack] border-style – CSS: Cascading Style Sheets | MDNThe border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.

The first two made me find the last one, which is best as it has a CSS demo button (that also works on the WayBack link), a list of examples, and even better, answers the above questions with the “border-style” list below.

I rephrased their list into a table emphasising the clock-wise order:

The number of values determine the sides affected; thinking clock-wise is easiest to get it:

# values affected sides example top right bottom left
1 all: top, right, bottom, left solid solid solid solid solid
2 top & bottom, right & left none solid none solid none solid
3 top, right & left, bttom dotted none solid dotted none solid none
4 top, right, bottom, left double dotted solid none double dotted solid none

Their list:

The border-style property may be specified using one, two, three, or four values.

  • When one value is specified, it applies the same style to all four sides.
  • When two values are specified, the first style applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).

Each value is a keyword chosen from the list below.

then it continues with a table showing the outcome of the various line style values you can put in:

<line-style>
Describes the style of the border. It can have the following values:

none
Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden
Like the none keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highestpriority: if any other conflicting border is set, it won’t be displayed.
dotted
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width.
dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid
Displays a single, straight, solid line.
double
Displays two straight lines that add up to the pixel size defined by border-width or border-top-width.
groove
Displays a border with a carved appearance. It is the opposite of ridge.
ridge
Displays a border with an extruded appearance. It is the opposite of groove.
inset
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset
Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

–jeroen

Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

Tables with two headers • Tables • WAI Web Accessibility Tutorials

Posted by jpluimers on 2020/12/08

Since I always forget that you can have any cell marked as th to make it a header: [WayBack] Tables with two headers • Tables • WAI Web Accessibility Tutorials.

This is not just limited to top rows, you can use it any where:

  • in the left column
  • in any other row
  • in any other column
  • in individual cells

In addition, a table can also have a caption, which is not just useful for screen-readers: it benefits general readability.

Quoting the page:

For such tables, use the <th> element to identify the header cells and the scope attribute to declare the direction of each header. The scopeattribute can be set to row or col to denote that a header applies to the entire row or column, respectively.

Additionally, you can use the <caption> element to identify the table in a document. This is particularly useful for screen-reader users browsing the web page in “table mode” where they can navigate from table to table.

Examples on that page:

–jeroen

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

html – Is it possible to specify a starting number for an ordered list? – Stack Overflow

Posted by jpluimers on 2020/11/03

Since I keep forgetting this has been possible since the introduction of html 5: [WayBack] html – Is it possible to specify a starting number for an ordered list? – Stack Overflow:

If you need the functionality to start an ordered list (OL) at a specific point, you’ll have to specify your doctype as HTML 5; which is:

<!doctype html>

With that doctype, it is valid to set a start attribute on an ordered list. Such as:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

–jeroen

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

CSS flex-box layout – Wikipedia

Posted by jpluimers on 2019/09/02

Being a back-end and library person by heart, I am always late in the web-UI game, so this is on my list of things to try: CSS flex-box layout – Wikipedia.

I saw it being used by [WayBack] markdownlint demo: Demo for markdownlint, a Node.js style checker and lint tool for Markdown/CommonMark files.

Some links that should me help further:

–jeroen

Read the rest of this entry »

Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

ls colour codes on OpenSuSE tumbleweed when accessed from Mac OS X ssh

Posted by jpluimers on 2019/06/07

`ls` colour codes

`ls` colour codes

I got confused as I thought red text would mean an error.

But they’re not: greenish yellow on a read background means error (a symbolic link to a place that’s no longer there).

It’s the output of https://github.com/gkotian/gautam_linux/blob/master/scripts/colours.sh as the one at

Actually the script is here https://raw.githubusercontent.com/gkotian/gautam_linux/master/scripts/colours.sh as the one at [WayBack] command line – What do the different colors mean in the terminal? – Ask Ubuntu failed with errors like this one:

-bash: *.xbm: bad substitution

The full script output is below.

Since various terminals have a different mapping from colours in the ANSI escape code colour table, I used the standard HTML colours using (which slightly differs from the Terminal.app screenshot on the right):

References:

Note that the shell on Mac OS X uses a different way of configuring colours CLICOLOR as described in [WayBack] settings – CLICOLOR and LS_COLORS in bash – Unix & Linux Stack Exchange. I might cover that another day.

Script output:

Read the rest of this entry »

Posted in *nix, *nix-tools, ANSI escape code, bash, CSS, Development, Encoding, HTML, HTML5, Linux, openSuSE, Power User, Software Development, SuSE Linux, Tumbleweed, Web Development | Leave a Comment »

« Previous Entries
Next Entries »