Make <ha-card> use <h1> for header

[spacegaier]

Breaking change

Proposed change

As confirmed by bram (#7323 (comment)) we should use more <h> elements (allows e.g. proper/better copying of data into documents such as MS Word). I converted the <ha-card> to do so. This enables proper copying of the system health info (see separate PR #7337 that depends on this one here).

The switch to <h1> for the header has no visual impact. I also replaced all occurrences where the "header" attribute of >ha-card> is not used an instead a custom HTML element was used. Those are now all <h1> as well.

The CSS change I made is to ensure that header that contain an icon have the same height as ones without. This is e.g. required for the device config page, where otherwise the headers would be misaligned between those different cards since some have a "plus" icon, some don't. This previously resulted in the ones with icon being 48px high, but those without only 32px. Now they are all 48px, and I removed some padding on top to counter balance that, so overall they remain the same size.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io