ตัวอย่างเว็บไซต์:
คลิกเลย 
สูตรใหม่ SEO HTML5 + CSS3 + For iPad iPhone Apple Safari Chomes ... อื่นๆ✔สูตร publisher ภาพตัวอย่างที่ได้ผลบน Google:
...
...
<title>Songtoday.com</title>
<body itemscope itemtype="
http://schema.org/WebPage "> <- ต้องใส่สำคัญมาก HTML5
...
<div itemprop="breadcrumb">
<a href="category/books.html">รวมหนังสือดีๆ</a> >
<a href="category/books-literature.html">วรรณกรรมและนิยาย</a> >
<a href="category/books-classics">หนังสือคลาสสิก</a>
</div>
✔สูตร breadcrumb ภาพตัวอย่างที่ได้ผลบน Google:
เนื้อหา
<div itemscope itemtype="
http://schema.org/Book ">
<img itemprop="image" src="catcher-in-the-rye-book-cover.jpg" />
<span itemprop="name">รวมหนังสือ</span> -
<link itemprop="bookFormat" href="
http://schema.org/Paperback ">หนังสือเล่มใหม่
โดย <a itemprop="author" href="/author/jd_salinger.html">นาย โทนี่</a>
Rating:
<div itemprop="aggregateRating" itemscope itemtype="
http://schema.org/AggregateRating ">
<span itemprop="ratingValue">4.5</span> เกรดคะแนนโหวต 4 1/2 ดาว
<span itemprop="reviewCount">78</span> จำนวนคนที่เข้าชม
</div>
✔สูตร Rating ภาพตัวอย่างที่ได้ผลบน Google มีรูปดาวเด่นกว่าน่าคลิกมากกว่า :
<footer>
Link 1 Link 3 Link 2
</footer>
</body></html>
สิ่งที่เพิ่มขึ้น ✔สูตร itemscope="itemscope", itemprop="image", itemprop="url", ...
HTML5 2012 ล่าสุด มันอาจจะทำให้ทุกท่านถึงกับรื้อเว็บไซต์ตัวเองใหม่ทั้งหมดเพื่อปรับรับกับ Google อัลกอ.. 2012 ใหม่
For iPad iPhone Apple Safari Chomes ... อื่นๆหากคุณเคยใส่ HR องค์ประกอบในหน้าเว็บของคุณคุณจะรู้ว่าเส้นมันจะใหญ่มากและไม่สวยและดังนั้นจึงเป็นสิ่งสำคัญที่รูปแบบใด HR แท็กที่คุณใช้ พื้นฐาน HR แท็ก จะปรากฏทางเบราว์เซอร์ที่ต้องการแสดง เบราว์เซอร์ที่ทันสมัยมักจะแสดง unstyled HR ที่มีความกว้างแท็กของ 100% ความสูงของ 2px และชายแดน 3D สีดำเพื่อสร้างบรรทัด
นี่คือ ตัวอย่างขององค์ประกอบมาตรฐาน หรือคุณสามารถเห็นใน ภาพนี้ วิธี unstyled HR ที่ปรากฏในเบราว์เซอร์ที่ทันสมัย
<hr />
เส้นมันจะใหญ่และไม่สวย
มันเป็นไปได้ที่จะสไตล์ HR เพื่อที่จะดูดีและจริงพอดีกับรูปแบบหน้าเว็บของคุณ แต่คุณจะต้องระมัดระวังกับมันเป็นมีบางประเด็นเบราว์เซอร์ที่มีวิธีการที่จะแสดง
ความกว้างและความสูงมีความสอดคล้องกันเบราว์เซอร์
รูปแบบเดียวที่มีความสอดคล้องกันทั่วเว็บเบราเซอร์ที่มี width และ height รูปแบบ เหล่านี้จะกำหนดวิธีการขนาดใหญ่บรรทัดจะ หากคุณไม่ได้กำหนด width และ height ความกว้างเริ่มต้นเป็น 100% และความสูงเริ่มต้นคือ 2px
ใน ตัวอย่างนี้ ผมเปลี่ยนความกว้างถึง 50% ขององค์ประกอบหลัก:
<hr style="width:50%;" />
และใน ตัวอย่างนี้ ผมเปลี่ยนความสูงถึง 2em:
<hr style="height:2em;" />
ในเบราว์เซอร์ที่ทันสมัย (Chrome, Safari, Opera, Firefox, และ IE8 +) เบราว์เซอร์ที่สร้างเส้นขอบโดยการปรับ ดังนั้นหากคุณลบเส้นขอบที่มี border สถานที่ให้บริการแบบ สายจะหายไปบนหน้า ที่คุณสามารถดู (ดีคุณจะไม่เห็นอะไรเป็นเส้นจะมองไม่เห็น) ใน ตัวอย่างนี้ :
<hr style="border: none;" />
แต่ใน Internet Explorer 7 และต่ำกว่าการเปลี่ยนแปลง border: none; ไม่มีผลอะไรเลย เบราว์เซอร์ยังคงแสดงเส้นเหมือนปกติจะ ดังนั้นใน IE7 และต่ำกว่า ตัวอย่างข้างต้น จะแสดงสามบรรทัดมากกว่าเพียงหนึ่ง
แต่การปรับขนาดเส้นขอบสีและรูปแบบจะให้เส้นมองแตกต่างกันและมีผลเดียวกันในเบราว์เซอร์ที่ทันสมัยทั้งหมด ตัวอย่างเช่นใน การสาธิตนี้ ผมเปลี่ยนเส้นเป็นสีแดงประ 1px กว้าง:
<hr style="border: 1px dashed #000;" />
แต่ถ้าคุณเปลี่ยนเส้นขอบและความสูงลักษณะมองแตกต่างกันเล็กน้อยใน IE7 จากเบราว์เซอร์ที่ทันสมัย ในขณะที่คุณสามารถเห็นใน ตัวอย่างนี้ เมื่อคุณดูใน IE7 มีเส้นภายใน beveled ที่ไม่แสดงในเบราว์เซอร์อื่น ๆ (รวมทั้ง IE8 และขึ้นไป):
<hr style="height:1.5em;width:25em;border:1px solid #000;" />
การเปลี่ยนสีของเส้นอาจเป็นเรื่องยากเกินไป
Internet Explorer 7 และต่ำกว่าถือว่าสีของเส้นเป็นสีพื้นและเพื่อการเปลี่ยนแปลงสีของเส้นเมื่อคุณเปลี่ยน color สถานที่ให้บริการ . แต่เบราว์เซอร์ที่ทันสมัยรักษาสีของเส้นเป็นสีพื้นหลังและไม่เปลี่ยนเว้นแต่คุณจะใช้ background-color ใน ตัวอย่างนี้ ผมเปลี่ยนสีด้วย color:
<hr style="color:#c00;" />
และใน ตัวอย่างนี้ ผมเปลี่ยน background-color คุณสมบัติ:
<hr style="background-color:#c00;" />
เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดที่คุณควร เปลี่ยนทั้งหมด ให้เป็นสีเดียวกันดังนั้นบรรทัดปรากฏถูกต้องในเบราว์เซอร์มากที่สุด:
<hr style="color:#c00;background-color:#c00;" />
แน่นอนมันยังคงไม่ทำงาน Opera 9 และลดลงเนื่องจากเบราว์เซอร์นี้ต้อง สูงที่กำหนดไว้และเส้นลบ เช่นกันก่อนที่มันจะเปลี่ยนสีของเส้น:
<hr style="color:#c00;background-color:#c00; height:1px;border:none; " />
ปรับตำแหน่งของสาย
นี้ดูเหมือนว่ามันจะเป็นสิ่งที่ง่ายที่จะทำเพียงแค่ใช้ float ในสถานที่ ที่จะผลักดันแนวไปทางขวาหรือซ้าย:
<hr style="width:50%; float:right; " />
แต่ เป็นคุณสามารถเห็น มันไม่ทำงานใน Internet Explorer 7 และต่ำกว่า ที่จะได้ไปทำงานในรุ่นเหล่านี้ของ IE, คุณจะต้องลบ float สไตล์และใส่ใน เลิก แอตทริบิวต์ align :
<hr style="width:50%;" align="right" />
ทำให้เส้นตกแต่งด้วยภาพพื้นหลัง
แทนสีคุณสามารถกำหนดภาพพื้นหลังของคุณสำหรับ HR เพื่อที่จะมีลักษณะตรงตามที่คุณต้องการให้ แต่ยังคงแสดงความหมายในมาร์คอัปของคุณ ใน ตัวอย่างนี้ ผมใช้ ภาพ ที่เป็นสามเส้นหยัก โดยการตั้งค่าเป็นภาพพื้นหลังด้วยซ้ำไม่ก็สร้างแบ่งในเนื้อหาที่มีลักษณะเกือบจะเหมือนที่คุณเห็นในหนังสือ:
<hr style="height:20px;background: #fff url(aa010307.gif) no-repeat scroll center;border:none;" />
แต่ในขณะที่เรากำลังมาถึงคาดว่าจะมีปัญหากับหนึ่งของเบราว์เซอร์ IE7 และลดรอบ HR ที่มีเส้นขอบ หากคุณเปิดลายเส้นและปิดมันมีลักษณะเดียวกัน (ในความเป็นจริงตัวอย่างข้างต้นมีเส้นขอบปิด) และถ้าคุณตั้งค่าสีเป็นสีขาว (สีเดียวกับสีพื้นหลัง), สายหายไปในเบราว์เซอร์รุ่นเก่าเหล่านี้
ทางออกเดียวคือสับวงล้อมรอบ HR ที่มี DIV , เพิ่มภาพพื้นหลังเพื่อ DIV และจากนั้นตั้ง HR display ที่ไม่มี: ในขณะที่คุณสามารถเห็นใน ตัวอย่างนี้ ก็ทำงาน แต่มันทำให้ความหมายของ HTML น้อย นี่คือสถานการณ์ที่มันอาจจะดีกว่าที่จะปล่อยให้ IE7 แสดงบรรทัดไม่ถูกต้องหรือลบภาพจาก IE7 และต่ำกว่าด้วย สำหรับตัวอย่างนี้คือ:
<div style="height:20px;background: #fff url(aa010307.gif) no-repeat scroll center;" >
<hr style="display:none;" />
โอกาสหน้ามีอะไรดีๆ จะโพสแบ่งปันอีกนะครับ
ตัวอย่างเว็บไซต์: คลิกเลย 
ความรู้ทั่วไป
