HTML / CSS 社内ルール (Eng)

[BLOCK element and INLINE element rules]

• BLOCK element in BLOCK element is OK.
• BLOCK element in INLINE element is BAD (except when it is necessary).
• In INLINE element, DIV is not used We use SPAN.
• DIV is a BLOCK element. However, do not put DIV element as an INLINE element.

[How to use the BR tag]

Example At the end of the line put <br> tag. If there are two <br>, make a new space to show <br> is used twice! If you want to create two separate paragraphs it is possible to make a new <p> tag for the separation.

[How to use the directory]

• /images/: All images are put in here
• /slides/: all slides are put in here
• /js/: js · jQuery are stored in here
• /tpl/: all Smarty’s template is in here.
• /fonts/: fonts related are all stored here.
• /css/: all css file is in here.

[META]

Title: Very important | important | less important keyword:Five to seven(Do enter the appropriate keywords although there are no effects on SEO) Description: Depending on the length, the keyword can be good up to 2 times.

[HTML5 tag]

<nav> <section> <article> etc. According to the rule, this can not be used because it may not be compatible for some clients PC.

[The usage and about ALT]

Be sure to type ALT for the image. If image is not loaded, ALT will appear. This is useful for those who have visual impairment.

※ Important

As for example, putting logo image in the tag.

<img src="logo.gif" alt="logo">

People with visual impairment gets information by listening to the sound. If the information received is only “logo”, the person will not understand clearly. To be fair and more precise, it is very important to describe the wording of an image. So, if Accorder’s logo is used then it is, alt=”Accorder Co., Ltd.”.

※ Important 2

• • “!”, “?”, “→” Special characters should not be in image tag. It should either be in background or list tag.
  • If it is really necessary to put in IMG tag, please use alt=”” instead of alt=”arrow”. Unnecessary information of alt will be measured in SEO techniques.

[IMG tag rules]

Basically, you will decide the width, height and alt tags. However, it is absolutely unnecessary to have width and height in image tag (depending on the design)

<img src="logo.gif" width="200" height="45" alt="Accorder Co. Ltd.">

The unit does not fill the page except percentage, %. The units are normally in pixel, so make sure to put the value of the pixel.

[Method of determining the image name]

It basically unifies according to rules. page name_type_description Page name: contact.html -> contact, index.html -> top, company.html->company type: icn: Icon bg: background image img: image bul: Brett photo: photo ※ There will be plenty of images used under the same element. Hence, please do put the image name as the example below … Example) contact_icn_phone.png contact_icn_fax.png contact_bg.png contact_bul_phonenumbers.png

[Format of the image]

jpg: photo (QUALITY: 40% ~ 60%) png: all of the image other than the photo (the banner that contains the photos, saved in jpg) gif: for animation If required support from old browser, png is used not gif. It corresponds the Retina display. Adjust the size to two times bigger and the vertical double-wide. Then for img tags, please adjust the size in css.img tags, or just adjust the size in CSS. For example, if the image is 320×320, then write in 640×640.

[How to close the tag]

■ Example of ID

<div id="wrapper">
<p>aaaaaaaaaaaaa</p>
</div> <-!/#wrapper-->

■ Example of CLASS

<div class="wrapper">
<p>aaaaaaaaaaaaa</p>
</div> <-!./wrapper-->

If the source code is short, it wont be a problem to know which DIV belongs to which DIV. But if the codes are long and it does not fit in one screen, then comment is needed right next to the closed tag. So that it is easy to be identified.

[Method of determining the ID · CLASS name]

Putting proper name for every class created will give a huge advantage so that you can use in all of the pages

Example of a class used in all pages:

Ex) all_top_menu Ex) all_footer Ex) all_footer_copyright

Example of index.html:

Ex) top_welcome Ex) top_welcome_title Ex) top_content Ex) top_content_news Ex) top_content_blog

Example of contact.html:

Ex) contact_phone Ex) contact_fax Make sure that short forms are not used when coding. Some people may not understand short forms and it can be a waste of time to figure it out. Avoiding short forms help to speed up the efficiency work of coding. Ex) top_ttl → top_title Ex) Top_pt → Top_photo Ex) Wrp_ct → Wrapper_content Even though it is just a class name, please be sure that the name can be predicted by others. So that they can detect where is the class located easily. #footer: The footer ID at? #footer_logo: The logo is in the footer? #footer_logo_text: The text and the logo is a part of the footer? #footer_copyright: The copyright of the footer may be placed outside of the footer_logo?

[CSS writing-orders]

• background
• width
• height
• margin
• padding
• position
• float
• display
• border
• line
• letter
• text
• font
• color

※ In particular, background ~ padding, text ~ color are protected like always!

[Always put this on the first line of css file]

※ Should be saved in UTF-8 format.