BOM: Byte Order Mark
What does it look like:
On the page an invisible element push the html element out of there normal place, messing up alignment.
In the developper code, in firefox it looks like a red dot that display /ufeff on mouse hover.
In a php file it the BOM might cause the header to be sent prematurely, leading to a “header already sent” error.
What is the BOM and why does it causes issue:
BOM is usually invisible in browser but can cause issue by displacing html elements on the page.
W3 consortium write in their dedicated resource on BOM:
At the time this article was written, if you include some external file in a page using PHP and that file starts with a BOM, it may create blank lines.
This is because the BOM is not stripped before inclusion into the page, and acts like a character occupying a line of text. See an example. In the example, a blank line containing the BOM appears above the first item of included text.
https://www.w3.org/International/questions/qa-byte-order-mark#problems
The byte order mark is not present in UTF-8 but some text editor such as Microsoft notepad add it systematically (at the time of writing).
Solution to identify the file starting with BOM:
To find out the php file that included the BOM I SSH into the shared hosting, and found the file using this code:
find -type f|while read file;do [ "`head -c3 -- "$file"`" == $'\xef\xbb\xbf' ] && echo "found BOM in: $file";done
I downloaded the file through FTP and encoded it in UTF-8 with notepad++ and uploaded back to the server.
Notepad++ offers to format the file in UTF-8 with or without the BOM in the encoding tab.