What HTML element to use for short pieces of text?
I’m working on the UI of an internal administrative web application which enables you to manage different kinds of data (in our example - people). Some of the screens consist of a header, containing the basic informations of the person, and a form for making changes.
Example markup (without styling):
<header>
<h1>John Doe</h1>
<img src="johndoe.jpg" alt="Profile picture"/>
<div>Group X</div>
<div>London, UK</div>
<div>01.01.1970</div>
<div>some kind of ID (example: X920EDY)</div>
</header>
I want to improve the accessibility of our application by using semantic markup, but can’t figure out which HTML tags should be used in the header area. I’d use an <h1> for the title (“John Doe”) and an <img> for the image, but I’m not sure what to use for the rest of the content.
The text on the right (“Group X”) visually looks like a heading, but it doesn’t feel right to use an <h2> here, as <h> elements should represent headings of sections and there is no grouped content that belongs to that text.
The texts underneath the title are currently defined as <div> — it also doesn’t feel right because <div>s have no meaning on their own. I thought about using a <p> but the texts are not paragraphs. Another options I considered were <span> and <ul> but they also don’t seem right because the first one, like <div>, has no semantic value and the texts don't create a list of semantically similar items.
Does anyone have a better idea?
html accessibility semantic-markup
edited Nov 24 '18 at 20:16
unor
65.7k17138242
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
add a comment |
I’m working on the UI of an internal administrative web application which enables you to manage different kinds of data (in our example - people). Some of the screens consist of a header, containing the basic informations of the person, and a form for making changes.
Example markup (without styling):
<header>
<h1>John Doe</h1>
<img src="johndoe.jpg" alt="Profile picture"/>
<div>Group X</div>
<div>London, UK</div>
<div>01.01.1970</div>
<div>some kind of ID (example: X920EDY)</div>
</header>
I want to improve the accessibility of our application by using semantic markup, but can’t figure out which HTML tags should be used in the header area. I’d use an <h1> for the title (“John Doe”) and an <img> for the image, but I’m not sure what to use for the rest of the content.
The text on the right (“Group X”) visually looks like a heading, but it doesn’t feel right to use an <h2> here, as <h> elements should represent headings of sections and there is no grouped content that belongs to that text.
The texts underneath the title are currently defined as <div> — it also doesn’t feel right because <div>s have no meaning on their own. I thought about using a <p> but the texts are not paragraphs. Another options I considered were <span> and <ul> but they also don’t seem right because the first one, like <div>, has no semantic value and the texts don't create a list of semantically similar items.
Does anyone have a better idea?
html accessibility semantic-markup
edited Nov 24 '18 at 20:16
unor
65.7k17138242
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
microformats.org/wiki/about
– connexo
Nov 13 '18 at 14:59
I would answer your question with pleasure, but I'm blind myself, so I can't see your image with text. Could you please update your question with a piece of code with some (fake) data? Thanks!
– Andre Polykanine
Nov 13 '18 at 20:32
@AndrePolykanine Thank you for your response! I added an example markup in the question.
– robertdev
Nov 14 '18 at 11:12
add a comment |
I’m working on the UI of an internal administrative web application which enables you to manage different kinds of data (in our example - people). Some of the screens consist of a header, containing the basic informations of the person, and a form for making changes.
Example markup (without styling):
<header>
<h1>John Doe</h1>
<img src="johndoe.jpg" alt="Profile picture"/>
<div>Group X</div>
<div>London, UK</div>
<div>01.01.1970</div>
<div>some kind of ID (example: X920EDY)</div>
</header>
I want to improve the accessibility of our application by using semantic markup, but can’t figure out which HTML tags should be used in the header area. I’d use an <h1> for the title (“John Doe”) and an <img> for the image, but I’m not sure what to use for the rest of the content.
The text on the right (“Group X”) visually looks like a heading, but it doesn’t feel right to use an <h2> here, as <h> elements should represent headings of sections and there is no grouped content that belongs to that text.
The texts underneath the title are currently defined as <div> — it also doesn’t feel right because <div>s have no meaning on their own. I thought about using a <p> but the texts are not paragraphs. Another options I considered were <span> and <ul> but they also don’t seem right because the first one, like <div>, has no semantic value and the texts don't create a list of semantically similar items.
Does anyone have a better idea?
html accessibility semantic-markup
edited Nov 24 '18 at 20:16
unor
65.7k17138242
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
I’m working on the UI of an internal administrative web application which enables you to manage different kinds of data (in our example - people). Some of the screens consist of a header, containing the basic informations of the person, and a form for making changes.
Example markup (without styling):
<header>
<h1>John Doe</h1>
<img src="johndoe.jpg" alt="Profile picture"/>
<div>Group X</div>
<div>London, UK</div>
<div>01.01.1970</div>
<div>some kind of ID (example: X920EDY)</div>
</header>
I want to improve the accessibility of our application by using semantic markup, but can’t figure out which HTML tags should be used in the header area. I’d use an <h1> for the title (“John Doe”) and an <img> for the image, but I’m not sure what to use for the rest of the content.
The text on the right (“Group X”) visually looks like a heading, but it doesn’t feel right to use an <h2> here, as <h> elements should represent headings of sections and there is no grouped content that belongs to that text.
The texts underneath the title are currently defined as <div> — it also doesn’t feel right because <div>s have no meaning on their own. I thought about using a <p> but the texts are not paragraphs. Another options I considered were <span> and <ul> but they also don’t seem right because the first one, like <div>, has no semantic value and the texts don't create a list of semantically similar items.
Does anyone have a better idea?
html accessibility semantic-markup
html accessibility semantic-markup
edited Nov 24 '18 at 20:16
unor
65.7k17138242
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
edited Nov 24 '18 at 20:16
unor
65.7k17138242
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
edited Nov 24 '18 at 20:16
unor
65.7k17138242
edited Nov 24 '18 at 20:16
unor
65.7k17138242
edited Nov 24 '18 at 20:16
unor
65.7k17138242
65.7k17138242
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
asked Nov 13 '18 at 14:46
robertdevrobertdev
185
185
microformats.org/wiki/about
– connexo
Nov 13 '18 at 14:59
I would answer your question with pleasure, but I'm blind myself, so I can't see your image with text. Could you please update your question with a piece of code with some (fake) data? Thanks!
– Andre Polykanine
Nov 13 '18 at 20:32
@AndrePolykanine Thank you for your response! I added an example markup in the question.
– robertdev
Nov 14 '18 at 11:12
add a comment |
microformats.org/wiki/about
– connexo
Nov 13 '18 at 14:59
I would answer your question with pleasure, but I'm blind myself, so I can't see your image with text. Could you please update your question with a piece of code with some (fake) data? Thanks!
– Andre Polykanine
Nov 13 '18 at 20:32
@AndrePolykanine Thank you for your response! I added an example markup in the question.
– robertdev
Nov 14 '18 at 11:12
microformats.org/wiki/about
– connexo
Nov 13 '18 at 14:59
microformats.org/wiki/about
– connexo
Nov 13 '18 at 14:59
I would answer your question with pleasure, but I'm blind myself, so I can't see your image with text. Could you please update your question with a piece of code with some (fake) data? Thanks!
– Andre Polykanine
Nov 13 '18 at 20:32
I would answer your question with pleasure, but I'm blind myself, so I can't see your image with text. Could you please update your question with a piece of code with some (fake) data? Thanks!
– Andre Polykanine
Nov 13 '18 at 20:32
@AndrePolykanine Thank you for your response! I added an example markup in the question.
– robertdev
Nov 14 '18 at 11:12
@AndrePolykanine Thank you for your response! I added an example markup in the question.
– robertdev
Nov 14 '18 at 11:12
add a comment |
1 Answer
1
active
oldest
votes
A list here would be the best solution, imo. It won't convey semantically similar items, but it will gather under one hood, so to say, all the info about John Doe.
You may do a <ul>, but if for some reason you want to keep your divs, you may do so and add appropriate ARIA for the list, shown below.
One more thing: As far as I can see (with sighted help), the ID thing is related to the group X. I.e., the data go like this: John Doe, London, birthdate, group x, ID. If I'm right, you need to change the place of your divs in the code, as most screen readers order the page as it is laid out in the code.
So, the final solution without changing your markup, except for adding an outer div for the list:
<div role="list">
<div role="listitem">London, UK</div>
<div role="listitem">01.01.1970</div>
<div role="listitem">Group X</div>
<div role="listitem">some kind of ID (example: X920EDY)</div>
</div>
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
1
I agree with @Andre and would also have posted a list as a recommended solution because you're grouping them all together. Andre's example uses theroleattribute but he only did that if you had to use<div>elements. If you're free to use any elements, then please use the real<ul>/<li>. The first rule of ARIA use is to not use ARIA (w3.org/TR/using-aria/#rule1). You can style the lists to not have bullet characters and to arrange them horizontally.
– slugolicious
Nov 15 '18 at 8:01
1
Also noted by Andre, the order of the elements in your code will be the order that a screen reader reads them, even if you use CSS to move things around. The screen reader user essentially walks the DOM sequentially (it's actually an accessibility tree, not the DOM, but it's a close comparison), so if you want the user to hear the person's name, then group, location, bday, and ID, put them in that order in your code. Note that the profile picture is probably decorative and doesn't add additional info so could havealt="", but I think it's helpful to hear that a person's picture is there.
– slugolicious
Nov 15 '18 at 8:11
Thank you for your responses, it seems like a list would be the most appropriate option here (and semantically better than plain <div>s)!
– robertdev
Nov 15 '18 at 11:02
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283554%2fwhat-html-element-to-use-for-short-pieces-of-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
A list here would be the best solution, imo. It won't convey semantically similar items, but it will gather under one hood, so to say, all the info about John Doe.
You may do a <ul>, but if for some reason you want to keep your divs, you may do so and add appropriate ARIA for the list, shown below.
One more thing: As far as I can see (with sighted help), the ID thing is related to the group X. I.e., the data go like this: John Doe, London, birthdate, group x, ID. If I'm right, you need to change the place of your divs in the code, as most screen readers order the page as it is laid out in the code.
So, the final solution without changing your markup, except for adding an outer div for the list:
<div role="list">
<div role="listitem">London, UK</div>
<div role="listitem">01.01.1970</div>
<div role="listitem">Group X</div>
<div role="listitem">some kind of ID (example: X920EDY)</div>
</div>
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
1
I agree with @Andre and would also have posted a list as a recommended solution because you're grouping them all together. Andre's example uses theroleattribute but he only did that if you had to use<div>elements. If you're free to use any elements, then please use the real<ul>/<li>. The first rule of ARIA use is to not use ARIA (w3.org/TR/using-aria/#rule1). You can style the lists to not have bullet characters and to arrange them horizontally.
– slugolicious
Nov 15 '18 at 8:01
1
Also noted by Andre, the order of the elements in your code will be the order that a screen reader reads them, even if you use CSS to move things around. The screen reader user essentially walks the DOM sequentially (it's actually an accessibility tree, not the DOM, but it's a close comparison), so if you want the user to hear the person's name, then group, location, bday, and ID, put them in that order in your code. Note that the profile picture is probably decorative and doesn't add additional info so could havealt="", but I think it's helpful to hear that a person's picture is there.
– slugolicious
Nov 15 '18 at 8:11
Thank you for your responses, it seems like a list would be the most appropriate option here (and semantically better than plain <div>s)!
– robertdev
Nov 15 '18 at 11:02
add a comment |
A list here would be the best solution, imo. It won't convey semantically similar items, but it will gather under one hood, so to say, all the info about John Doe.
You may do a <ul>, but if for some reason you want to keep your divs, you may do so and add appropriate ARIA for the list, shown below.
One more thing: As far as I can see (with sighted help), the ID thing is related to the group X. I.e., the data go like this: John Doe, London, birthdate, group x, ID. If I'm right, you need to change the place of your divs in the code, as most screen readers order the page as it is laid out in the code.
So, the final solution without changing your markup, except for adding an outer div for the list:
<div role="list">
<div role="listitem">London, UK</div>
<div role="listitem">01.01.1970</div>
<div role="listitem">Group X</div>
<div role="listitem">some kind of ID (example: X920EDY)</div>
</div>
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
1
I agree with @Andre and would also have posted a list as a recommended solution because you're grouping them all together. Andre's example uses theroleattribute but he only did that if you had to use<div>elements. If you're free to use any elements, then please use the real<ul>/<li>. The first rule of ARIA use is to not use ARIA (w3.org/TR/using-aria/#rule1). You can style the lists to not have bullet characters and to arrange them horizontally.
– slugolicious
Nov 15 '18 at 8:01
1
Also noted by Andre, the order of the elements in your code will be the order that a screen reader reads them, even if you use CSS to move things around. The screen reader user essentially walks the DOM sequentially (it's actually an accessibility tree, not the DOM, but it's a close comparison), so if you want the user to hear the person's name, then group, location, bday, and ID, put them in that order in your code. Note that the profile picture is probably decorative and doesn't add additional info so could havealt="", but I think it's helpful to hear that a person's picture is there.
– slugolicious
Nov 15 '18 at 8:11
Thank you for your responses, it seems like a list would be the most appropriate option here (and semantically better than plain <div>s)!
– robertdev
Nov 15 '18 at 11:02
add a comment |
A list here would be the best solution, imo. It won't convey semantically similar items, but it will gather under one hood, so to say, all the info about John Doe.
You may do a <ul>, but if for some reason you want to keep your divs, you may do so and add appropriate ARIA for the list, shown below.
One more thing: As far as I can see (with sighted help), the ID thing is related to the group X. I.e., the data go like this: John Doe, London, birthdate, group x, ID. If I'm right, you need to change the place of your divs in the code, as most screen readers order the page as it is laid out in the code.
So, the final solution without changing your markup, except for adding an outer div for the list:
<div role="list">
<div role="listitem">London, UK</div>
<div role="listitem">01.01.1970</div>
<div role="listitem">Group X</div>
<div role="listitem">some kind of ID (example: X920EDY)</div>
</div>
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
A list here would be the best solution, imo. It won't convey semantically similar items, but it will gather under one hood, so to say, all the info about John Doe.
You may do a <ul>, but if for some reason you want to keep your divs, you may do so and add appropriate ARIA for the list, shown below.
One more thing: As far as I can see (with sighted help), the ID thing is related to the group X. I.e., the data go like this: John Doe, London, birthdate, group x, ID. If I'm right, you need to change the place of your divs in the code, as most screen readers order the page as it is laid out in the code.
So, the final solution without changing your markup, except for adding an outer div for the list:
<div role="list">
<div role="listitem">London, UK</div>
<div role="listitem">01.01.1970</div>
<div role="listitem">Group X</div>
<div role="listitem">some kind of ID (example: X920EDY)</div>
</div>
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
answered Nov 14 '18 at 20:20
Andre PolykanineAndre Polykanine
2,3341122
2,3341122
1
I agree with @Andre and would also have posted a list as a recommended solution because you're grouping them all together. Andre's example uses theroleattribute but he only did that if you had to use<div>elements. If you're free to use any elements, then please use the real<ul>/<li>. The first rule of ARIA use is to not use ARIA (w3.org/TR/using-aria/#rule1). You can style the lists to not have bullet characters and to arrange them horizontally.
– slugolicious
Nov 15 '18 at 8:01
1
Also noted by Andre, the order of the elements in your code will be the order that a screen reader reads them, even if you use CSS to move things around. The screen reader user essentially walks the DOM sequentially (it's actually an accessibility tree, not the DOM, but it's a close comparison), so if you want the user to hear the person's name, then group, location, bday, and ID, put them in that order in your code. Note that the profile picture is probably decorative and doesn't add additional info so could havealt="", but I think it's helpful to hear that a person's picture is there.
– slugolicious
Nov 15 '18 at 8:11
Thank you for your responses, it seems like a list would be the most appropriate option here (and semantically better than plain <div>s)!
– robertdev
Nov 15 '18 at 11:02
add a comment |
1
I agree with @Andre and would also have posted a list as a recommended solution because you're grouping them all together. Andre's example uses theroleattribute but he only did that if you had to use<div>elements. If you're free to use any elements, then please use the real<ul>/<li>. The first rule of ARIA use is to not use ARIA (w3.org/TR/using-aria/#rule1). You can style the lists to not have bullet characters and to arrange them horizontally.
– slugolicious
Nov 15 '18 at 8:01
1
Also noted by Andre, the order of the elements in your code will be the order that a screen reader reads them, even if you use CSS to move things around. The screen reader user essentially walks the DOM sequentially (it's actually an accessibility tree, not the DOM, but it's a close comparison), so if you want the user to hear the person's name, then group, location, bday, and ID, put them in that order in your code. Note that the profile picture is probably decorative and doesn't add additional info so could havealt="", but I think it's helpful to hear that a person's picture is there.
– slugolicious
Nov 15 '18 at 8:11
Thank you for your responses, it seems like a list would be the most appropriate option here (and semantically better than plain <div>s)!
– robertdev
Nov 15 '18 at 11:02
1
1
I agree with @Andre and would also have posted a list as a recommended solution because you're grouping them all together. Andre's example uses the
role attribute but he only did that if you had to use <div> elements. If you're free to use any elements, then please use the real <ul>/<li>. The first rule of ARIA use is to not use ARIA (w3.org/TR/using-aria/#rule1). You can style the lists to not have bullet characters and to arrange them horizontally.– slugolicious
Nov 15 '18 at 8:01
I agree with @Andre and would also have posted a list as a recommended solution because you're grouping them all together. Andre's example uses the
role attribute but he only did that if you had to use <div> elements. If you're free to use any elements, then please use the real <ul>/<li>. The first rule of ARIA use is to not use ARIA (w3.org/TR/using-aria/#rule1). You can style the lists to not have bullet characters and to arrange them horizontally.– slugolicious
Nov 15 '18 at 8:01
1
1
Also noted by Andre, the order of the elements in your code will be the order that a screen reader reads them, even if you use CSS to move things around. The screen reader user essentially walks the DOM sequentially (it's actually an accessibility tree, not the DOM, but it's a close comparison), so if you want the user to hear the person's name, then group, location, bday, and ID, put them in that order in your code. Note that the profile picture is probably decorative and doesn't add additional info so could have
alt="", but I think it's helpful to hear that a person's picture is there.– slugolicious
Nov 15 '18 at 8:11
Also noted by Andre, the order of the elements in your code will be the order that a screen reader reads them, even if you use CSS to move things around. The screen reader user essentially walks the DOM sequentially (it's actually an accessibility tree, not the DOM, but it's a close comparison), so if you want the user to hear the person's name, then group, location, bday, and ID, put them in that order in your code. Note that the profile picture is probably decorative and doesn't add additional info so could have
alt="", but I think it's helpful to hear that a person's picture is there.– slugolicious
Nov 15 '18 at 8:11
Thank you for your responses, it seems like a list would be the most appropriate option here (and semantically better than plain <div>s)!
– robertdev
Nov 15 '18 at 11:02
Thank you for your responses, it seems like a list would be the most appropriate option here (and semantically better than plain <div>s)!
– robertdev
Nov 15 '18 at 11:02
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283554%2fwhat-html-element-to-use-for-short-pieces-of-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
microformats.org/wiki/about
– connexo
Nov 13 '18 at 14:59
I would answer your question with pleasure, but I'm blind myself, so I can't see your image with text. Could you please update your question with a piece of code with some (fake) data? Thanks!
– Andre Polykanine
Nov 13 '18 at 20:32
@AndrePolykanine Thank you for your response! I added an example markup in the question.
– robertdev
Nov 14 '18 at 11:12