Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
88bb7e5b
Commit
88bb7e5b
authored
Feb 08, 2021
by
Paul Slaughter
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add semantic elements to HTML style guide
- Also add example showing opportunity and misuse of semantic tags.
parent
7de5a0b0
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
32 additions
and
0 deletions
+32
-0
doc/development/fe_guide/style/html.md
doc/development/fe_guide/style/html.md
+32
-0
No files found.
doc/development/fe_guide/style/html.md
View file @
88bb7e5b
...
...
@@ -6,6 +6,38 @@ info: To determine the technical writer assigned to the Stage/Group associated w
# HTML style guide
## Semantic elements
[
Semantic elements
](
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
)
are HTML tags that
give semantic (rather than presentational) meaning to the data they contain. For example:
-
[
`<article>`
](
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
)
-
[
`<nav>`
](
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
)
-
[
`<strong>`
](
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
)
Prefer using semantic tags, but only if the intention is truly accurate with the semantic meaning
of the tag itself. View the
[
MDN documentation
](
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
)
for a description on what each tag semantically means.
```
html
<!-- bad - could use semantic tags instead of div's. -->
<div
class=
"..."
>
<p>
<!-- bad - this isn't what "strong" is meant for. -->
Simply visit your
<strong>
Settings
</strong>
to say hello to the world.
</p>
<div
class=
"..."
>
...
</div>
</div>
<!-- good - prefer semantic classes used accurately -->
<section
class=
"..."
>
<p>
Simply visit your
<span
class=
"gl-font-weight-bold"
>
Settings
</span>
to say hello to the world.
</p>
<footer
class=
"..."
>
...
</footer>
</section>
```
## Buttons
### Button type
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment