WordPress HTML Coding Standards

July 6th, 2016

ภาษา HTML ก็มี standard เหมือนกันนะ ลองอ่านเหตุผลว่าทำไมถึงต้องควรทำตาม standard ในโพสต์ WordPress Coding Standards สำคัญไฉน? ดู สำหรับ HTML ซึ่งเป็นโค้ดที่ค่อนข้างจะเปิดเผย ใครจะดูก็ได้ ดังนั้นเวลาที่คนอื่นเค้า view source เล่น หรือเรา view source เอง หรือเราทำเทมเพลตเอาไว้แสดงข้อมูล โค้ดจะได้ดูสะอาดตา สวยงาม และที่สำคัญ เราหาข้อบกพร่องได้ง่าย

ถ้าพอนึกออกว่าทำไมเราถึงควรทำแล้ว เรามาเริ่มดูกันเลย..

Validation

ทุกหน้า HTML ควรจะต้องผ่าน W3C Validator เพื่อให้มั่นใจได้ว่าโค้ดเราเขียนตรงตามมาตรฐานที่เค้าวางไว้

Self-closing Elements

ทุกแท็กจะต้องมีแท็กปิดของมันตลอด แต่บางแท็กที่เป็น self-closing จะไม่มีแท็กปิด อย่างเช่นแท็ก br ให้เราใส่ / ไว้ และเว้นวรรคไว้หน้า / นั้น 1 ครั้ง เช่น

<br />

W3C ก็ว่าไว้อย่างนั้นเช่นกัน

Attributes และ Tags

พวก attribute ทั้งหลาย จะต้องเขียนด้วยตัวพิมพ์เล็กทั้งหมด ค่าพวกนี้มีจุดประสงค์ให้เครื่องคอมพิวเตอร์อ่านเป็นหลัก แต่ว่าถ้าตรงไหนที่จะให้คนอ่าน ก็ให้ใช้ตัวพิมพ์ใหญ่ได้ตามความเหมาะสม เช่น

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<a href="http://example.com/" title="Description Here">Example.com</a>

Quotes

การใช้ quote จะใช้กับพวกค่าของ attribute ต่างๆ และจะใช้ double หรือ single quote ก็ได้ แล้วแต่ชอบ ส่วนตัวผมชอบ double quotes มากกว่า แล้วก็ให้ระลึกไว้เสมอว่า เราควรจะต้องใส่ quote กับค่าของ attribute เสมอ เพื่อความปลอดภัยของระบบ

การ Indentation

ก็จะคล้ายๆ กับของ PHP แท็กเปิดแท็กปิดก็ควรจะตรงกัน ลองดูตัวอย่างข้างล่างนี้

แบบที่ถูก

<?php if ( ! have_posts() ) : ?>
    <div id="post-1" class="post">
        <h1 class="entry-title">Not Found</h1>
        <div class="entry-content">
            <p>Apologies, but no results were found.</p>
            <?php get_search_form(); ?>
        </div>
    </div>
<?php endif; ?>

แบบที่ผิด

        <?php if ( ! have_posts() ) : ?>
        <div id="post-0" class="post error404 not-found">
            <h1 class="entry-title">Not Found</h1>
            <div class="entry-content">
            <p>Apologies, but no results were found.</p>
<?php get_search_form(); ?>
            </div>
        </div>
<?php endif; ?>

จบ.. สำหรับ HTML จะมีไม่ค่อยเยอะเท่าไหร่ พวกฟอร์แมตต่างๆ ถ้าทำให้ผ่าน W3C Validator ได้ ก็ไม่ต้องห่วงอะไรแล้ว 🙂

 

อ้างอิงจากต้นฉบับ WordPress HTML Coding Standards