Questions tagged [html5]
HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard and currently remains under development.
90 questions
1
vote
1
answer
121
views
Is it Okay to skip heading levels in html structure?
Is it okay to skip heading levels for example h2 to h4, or h1 to h3. are there any implications in SEO, does it impact site ranking or indexing, and why do some developers skip heading levels?
Are ...
2
votes
1
answer
55
views
Values on alt tags for accessibility
We're working on an online report that uses a lot of graph charts, all of them as images (eg not interactive). I know best practices for alt tags, but was wondering if adding the data of the graph ...
- 38.3k
1
vote
2
answers
197
views
How do you display long file paths in a web app?
I'm working on a website that allows the user to upload two files from a remote computer and displays the file paths as a confirmation. However, if the file paths are long, the card that holds the ...
- 111
1
vote
2
answers
845
views
HTML input of type color has no empty state
The HTML input of type color has no empty state. Therefore it always shows a selected color. What would be the best way to convey to the user that they have to select a color.
I restyled the color ...
- 115
0
votes
2
answers
349
views
What tag should you use for the title of a "fixed" dialog? (cookie consent banner, subscribe to notifications, etc.)
For "fixed" dialogs displayed over the page, like a "cookie consent banner" or "subscribe to notifications", what is the recommended tag for the title (e.g. "Your ...
- 123
1
vote
1
answer
500
views
Should I override controls so that it handle different locale's or let the browser handle it?
Similar to A good solution how to localize and let user choose language on HTML page
but I am specifically wondering about localization of control elements such as required on input or date fields.
...
2
votes
2
answers
780
views
Do users actually use the arrows in <input type="number">?
Does the average user actually use these really tiny arrows?
- 193
2
votes
1
answer
67
views
Wcag 2.1 Success criteria-1.3.6
I am unable to understand the examples available on w3.org, which are:
The links in the navigation of a website are marked up so that users can add their own icons.
Icons on a website are marked up ...
0
votes
1
answer
54
views
Feedback on my document management system [closed]
I've created a document management system and want to make the table look more stylish.
https://codepen.io/reonLOW/pen/abbbMrZ
1
vote
4
answers
185
views
How to solve UX vs screen reader accessibility problem?
I'm learning web-development and semantic html markup. Recently a tutorial suggested that because "Click here" or "Read more" anchor texts are not so descriptive to visually impaired users depending ...
- 336
0
votes
2
answers
104
views
Do HTML5 browsers have to be able to properly process HTML4 tags when the tags appear in HTML5 pages? [closed]
According to the post here, the HTML5 specification requires HTML5 browsers to be able to properly process HTML4 tags when they are in HTML5 pages.
Unfortunately, the post doesn't very well ...
user127749
3
votes
1
answer
4k
views
Need explanation how Clear input button accessibility works
I've a text input with a clear button (looks like "x"). When clicked, this button will remove all the text from the input:
The markup for this looks like:
<label for="first-name">First name&...
- 141
2
votes
2
answers
4k
views
For Screen Readers: How to markup a group of text items to be read as one item? Should I even try?
How might I mark up the following component in accordance with WCAG 2.1 guidelines, accessibility best practices, and with as much assistive technology compatibility as possible (I don't want to ...
- 123
1
vote
1
answer
4k
views
Is a label-tag inside a button-tag valid and / or has any UX- / ergonomic-reasons?
I am checking an application and I found this in HTML DOM:
<button type="submit">
<label>Submit</label>
</button>
I have never seen this before and asking myself if this is ...
- 177
1
vote
1
answer
588
views
Where should keyboard focus after closing a dialog with the button opening the dialog removed?
In the UI design, each item panel contains a remove button. If clicking the remove button, a confirmation dialog would prompt. If cancel, the keyboard would focus back to the remove button. If confirm,...
- 113
0
votes
1
answer
577
views
HTML5 placeholder attribute used to hold default even after value change?
I have a HTML form that is used to modify preexising values. Thus on load values are prepopulated and upon submission, a check is made so that a confirmation message could be shown upon change.
We ...
- 491
0
votes
1
answer
373
views
Best way to organize search form interface?
I have a tab in my application where users can search Accounts. The account table has two different types of accounts, User and Staff type. User type is one that has a username, password, etc. Staff ...
- 101
0
votes
1
answer
245
views
Using placeholders on input elements
I have a number of forms where users must enter phone numbers, credit card numbers, amounts, e-mail addresses and I am using placeholders for these fields in hope to guide the user on what to type in ...
- 101
0
votes
1
answer
214
views
UI element names and hierarchy for web SaaS B2B application [closed]
I´m building an ReactJS based library of web elements for a SaaS B2B application. I know this is common, but I´m having lots of difficulties choosing right names for my visual hierarchy. What I call ...
- 133
3
votes
1
answer
5k
views
Should I use the native HTML5 date picker when available?
My application is using the Material UI style, and I need to provide a date picker to the users.
I have two options:
Use the native date picker when the browser supports it (e.g. on Edge, Chrome), ...
- 131
0
votes
2
answers
387
views
how better place back button?
Our main goal is, to keep the ability to go back SOMEWHERE
but we don’t want it to be too prominent. Where should we put that button?
This is the link to the live page where this button called 'Ürün ...
- 103
53
votes
6
answers
40k
views
Should disabled elements be focusable for accessibility purposes?
For example, if we have a set up wizard with 3 steps, and the user is on step 1, should the user be able to focus on the control to continue to the next step, regardless of whether or not that control ...
1
vote
1
answer
1k
views
What are the differences between icon and button badges?
iOS style badges are overlayed atop the upper right part of the icon. It's usually red with white text.
When displayed inline on a button or next to a header or link, IMHO, the badge seems to take on ...
- 11
2
votes
2
answers
2k
views
Is there a pattern for an HTML select box that provides existing hardcoded values but also needs to be able to take custom input?
I have a menu of reference information, like below.
download bmml source – Wireframes created with Balsamiq Mockups
The above fields are progressively pre-populated by the system, and user has ...
- 287
2
votes
0
answers
190
views
I need horizontal scroll bar with fixed width and right side checkbox [closed]
I need horizontal scroll bar with fixed width and right side check box.
Currently I truncate the text, but I need horizontal scroll without truncate.
Refer my sample page is here:- https://jsfiddle....
- 21
8
votes
1
answer
2k
views
What is the benefit of using the HTML5 <time> tag?
I have a web application I am writing the HTML for. In the app I will be displaying a lot of dates and in HTML5 they added a <time> tag. If I wrap all of my dates and times in the <time> ...
- 249
8
votes
5
answers
886
views
Which form widget for (seemingly) linear input without default value?
For answers in digital questionnaires, is there any reasonably well understood form widget between a horizontal group of radio buttons (or check boxes) and a slider gauge that lets the user input a ...
- 2,518
10
votes
5
answers
6k
views
Are Placeholders good for default values?
I read (and believe) this article that data entry tips in HTML placeholders are generally harmful and should be avoided.
In-context descriptions or hints can help clarify what goes inside
each ...
- 3,951
2
votes
3
answers
655
views
Does anyone know of any examples of the use of character counter on an input field?
I am working on a project that allows users to edit objects named by clicking on it using something similar to the HTML 5 Content-editable attribute.
Update:
The character limit is 30 not three.
...
2
votes
2
answers
2k
views
when to choose one between dropdown and typeahead
I am about to design a webpage wherein I got confused between few components which suits.
Here, I would like to understand what is the best scenario for choosing between typeahead and dropdown menu ...
- 121
3
votes
2
answers
843
views
User Interface design for HTML based mobile applications [closed]
I'm currently working on the User Interface design for a responsive mobile app that is being coded using html. This is the first mobile app development project for me as well as my Head of Engineering ...
3
votes
1
answer
2k
views
How best to show a document preview
I have a fairly basic web form that gathers information such as name, address, description, yada, yada. I have to do a rewrite and so am wondering what the best practice currently is to show a ...
- 131
3
votes
3
answers
5k
views
Use a web framework (Bootstrap) or write my own CSS from scratch? [closed]
We are a startup building an ERP platform. It has lots of screens (10-15) and will be a browser first application. We are a team of 3 and our skillset is mostly javascript specifically Angular. We ...
- 131
1
vote
2
answers
142
views
What is this input type or form setup called? [duplicate]
Couple of us arguing about this and none of us can remember what this is or would be called. Commonly seen on forms where you are moving an option from one box on the left to a box on the right and ...
- 13
0
votes
1
answer
353
views
Pop up modal with alert box notification
So I have a pop-up modal which serves as subscription point and it has an email field, this email field has email validation and the error message is displayed in alert box.
My question, is it a good ...
0
votes
3
answers
91
views
Proper way to describe saving canvas to server?
Problem
I have an app where the user draws to an HTML5 canvas, and then is presented an option to save it to the server. Currently a button that says "Save" is shown, which instructs the server to ...
- 103
2
votes
3
answers
343
views
Is this a parallax effect design?
Here:
http://www.ginventory.co/
I am not sure if this is also called parallax.
If not, I'd like to know what is it called?
- 185
0
votes
2
answers
1k
views
How to make HTML-dashboards of SPA printable?
We have a SPA (Single Page Application) SaaS product (https://www.webbsc.at/home/) which displays user's financial data and analysis. Obviously it would be great if the user could print the data to ...
- 235
0
votes
1
answer
130
views
Ideas for application layout using angularJS [closed]
I am converting a classic asp application that displays the status of any number of applications, can be one, can be 10+. I am using angularJS for the front end and restful web service for back end.
...
2
votes
1
answer
145
views
Handling lack of support for HTML5 [closed]
I've made a client-side JS script that runs when the Register button is clicked for the current version of a site, but want to implement real-time validation on the client.
How do I handle some ...
- 55
0
votes
1
answer
54
views
How to manage a growing drop down on my blog
I have a blog and I add articles on it quite frequently. One caters to Short Stories and the other to Articles.
Not the drop-down has become huge and is covering most of the screen.
Can you please ...
- 1
68
votes
5
answers
53k
views
Why aren't HTML5 typed number inputs right aligned, and should they be?
As you may know, with HTML5 when an input has type="number" the field is "customized". Two little arrows are added to the field (w3school example) but the numbers are still left aligned.
I saw that ...
- 3,144
1
vote
1
answer
528
views
bootstrap auto-hint/validation on form field types [closed]
It seems that Bootstap has a 'field type' validation, that it performs automatically.
Is there a way I can turn that off, OR, maybe better, pass messages to that along with making it work on plain ...
- 113
6
votes
2
answers
3k
views
When should a text input be auto selected?
By default in most browsers, text inputs become fully selected when you tab into them, but not when you click on them. But in some instances, applications choose to focus the text input when it ...
- 161
1
vote
2
answers
545
views
Creative Methods to Allow Users to Select Chart Series
This is a very generic question, but I have a graph that will be plotting attendance data for the public schools in my district. The users would like to see this data grouped by district, High Schools,...
- 113
1
vote
3
answers
167
views
How to browse a long list of artists and songs
I have a mobile app that allows you to browse lists of songs:
[a][b][c][d][e]
Elvis - Song 1
Elvis - Song 2
Elvis - Song 3
Ernie Wood - Song 4
You can jump to the letter to filter based on the first ...
- 133
2
votes
3
answers
915
views
Better way than scrolling a long list
I have a mobile app that allows you to browse lists of songs:
[a][b][c][d][e]
Elvis - Song 1
Elvis - Song 2
Elvis - Song 3
Ernie Wood - Song 4
You can jump to the letter to filter based on the first ...
- 133
4
votes
4
answers
11k
views
Ordered Multi-select control in HTML
I'm developing a highly customisable SaaS application. It has at several places a multi select, for some cases additionally to selecting the items, the user can define an order, for other cases it is ...
- 235
28
votes
5
answers
4k
views
Which input control is recommended for a large value range?
I'm working on a web app that allows the user to enter a timing value in a range from 0s to 1s with a step of 200ns (yes, nanoseconds).
I tried that with an input of type range (slider) but that's ...
- 425
5
votes
2
answers
2k
views
HTML5 small tag font size
In HTML5, the <small> tag "represents side comments such as small print...typically features disclaimers, caveats, legal restrictions, or copyrights." 1
We use this as a footnote to a table, ...
- 293