เครื่องมือแปลงข้อความเป็น HTML

ทำไมข้อความธรรมดาจึงต้องแปลง

เมื่อคุณพิมพ์ลงในโปรแกรมแก้ไขข้อความ การขึ้นบรรทัดใหม่และบรรทัดว่างที่คุณเห็นล้วนเป็นอักขระจริงในไฟล์ แต่เบราว์เซอร์กลับละเลยมัน HTML จะยุบช่องว่างทุกชุด รวมถึงการขึ้นบรรทัดใหม่ ให้เหลือเป็นช่องว่างเดียว หากวางร่างที่จัดรูปแบบเรียบร้อยลงในหน้าเว็บโดยตรง มันจะแสดงผลเป็นย่อหน้าเดียวที่ไม่มีการแบ่งแยก การจะได้ระยะห่างกลับคืนมา คุณต้องแปลการขึ้นบรรทัดที่มองไม่เห็นเหล่านั้นให้เป็นมาร์กอัปจริง ซึ่งเป็นสิ่งที่ตัวแปลงนี้ทำพอดี

มันอ่านข้อความของคุณ หาขอบเขตของย่อหน้า แล้วห่อแต่ละบล็อกด้วยแท็กเชิงความหมาย เพื่อให้เบราว์เซอร์จัดวางเนื้อหาตามที่คุณตั้งใจ ผลลัพธ์คือ HTML ที่สะอาดและมีโครงสร้าง ซึ่งคุณวางลงใน CMS เทมเพลตอีเมล หรือโพสต์บล็อกได้โดยไม่ต้องพิมพ์แท็กด้วยมือแม้แต่แท็กเดียว

ย่อหน้าและการขึ้นบรรทัดถูกตรวจจับอย่างไร

กฎหลักนั้นเรียบง่ายและคาดเดาได้ คือ บรรทัดว่างเป็นเครื่องหมายจุดจบของย่อหน้าหนึ่งและจุดเริ่มต้นของย่อหน้าถัดไป บล็อกข้อความแต่ละบล็อกที่อยู่ระหว่างบรรทัดว่างจะถูกห่อด้วยแท็ก p ของตัวเอง ซึ่งเป็นองค์ประกอบเชิงความหมายที่ถูกต้องสำหรับย่อหน้าและให้ระยะห่างที่เหมาะสมผ่านสไตล์เริ่มต้นของเบราว์เซอร์

การขึ้นบรรทัดเดี่ยวภายในย่อหน้าเป็นอีกประเด็นหนึ่งต่างหาก โดยค่าเริ่มต้นมันจะถูกยุบหายไป แต่หากเปิด "คงการขึ้นบรรทัด" การขึ้นบรรทัดเดี่ยวแต่ละครั้งจะกลายเป็นแท็ก br ดังนั้นที่อยู่ไปรษณีย์หรือบทกวีสั้น ๆ จึงคงโครงสร้างบรรทัดที่แม่นยำไว้ภายในย่อหน้าเดียว ความแตกต่างนี้สำคัญ คือ แท็ก p สร้างบล็อกที่แยกกันพร้อมระยะขอบ ขณะที่แท็ก br บังคับให้ขึ้นบรรทัดใหม่ภายในบล็อกโดยไม่มีระยะห่างพิเศษนั้น

ตัวอย่างประกอบ

ลองนึกถึงย่อหน้าสั้น ๆ สองย่อหน้าที่คั่นด้วยบรรทัดว่าง โดยย่อหน้าแรกถูกแบ่งออกเป็นสองบรรทัดที่พิมพ์ เมื่อเปิดการแปลงเป็นย่อหน้าและปิด "คงการขึ้นบรรทัด" คุณจะได้องค์ประกอบ p สองตัว และย่อหน้าแรกอ่านเป็นประโยคเดียวที่ลื่นไหล แต่หากเปิด "คงการขึ้นบรรทัด" ตอนนี้ p แรกจะมีแท็ก br อยู่ตรงจุดที่คุณกด Enter ดังนั้นสองบรรทัดที่พิมพ์จึงยังคงเรียงซ้อนกัน อินพุตเดียวกัน ให้ผลลัพธ์สองแบบที่ต่างกันและถูกต้องสมบูรณ์ทั้งคู่ เลือกได้ด้วยช่องทำเครื่องหมายเพียงช่องเดียว

ข้อควรระวังเรื่องการ escape ที่คุณต้องเข้าใจ

ตัวแปลงนี้สร้างมาสำหรับงานเขียนร้อยแก้ว จึงปฏิบัติต่ออินพุตของคุณในฐานะเนื้อหาที่จะถูกห่อ ไม่ใช่โค้ดที่ต้องทำให้เป็นกลาง นั่นหมายความว่าอักขระที่มีความหมายพิเศษใน HTML จะไม่ถูก escape โดยอัตโนมัติ หากข้อความของคุณมีเครื่องหมายวงเล็บมุมหรือเครื่องหมายแอมเปอร์แซนด์อยู่จริง ๆ มันจะผ่านเข้าไปในมาร์กอัปตามที่เขียนไว้

ในทางปฏิบัติเรื่องนี้ไม่เป็นปัญหาสำหรับงานเขียนทั่วไป แต่ให้ระมัดระวังเมื่อข้อความของคุณมีสัญลักษณ์ หากคุณกำลังเขียนเกี่ยวกับโค้ดและย่อหน้าของคุณมีอะไรบางอย่างเช่นเครื่องหมายน้อยกว่าตามด้วยชื่อแท็ก เบราว์เซอร์อาจพยายามตีความมันเป็นมาร์กอัป เมื่อมีความเสี่ยงนั้น ให้ escape อักขระอันตรายเองก่อน โดยแทนที่แอมเปอร์แซนด์ด้วย & เครื่องหมายน้อยกว่าด้วย < และเครื่องหมายมากกว่าด้วย > เพื่อให้แสดงผลเป็นข้อความตามตัวอักษรแทนที่จะถูกแยกวิเคราะห์

คลาสและเอกสารที่สมบูรณ์

สองตัวเลือกช่วยปรับแต่งผลลัพธ์ให้เข้ากับปลายทาง "เพิ่มคลาสให้ย่อหน้า" ให้คุณประทับคลาส CSS ลงบนทุกแท็ก p ที่สร้างขึ้น เพื่อให้เนื้อหาทั้งบล็อกสืบทอดสไตล์ที่มีอยู่ของคุณทันทีที่วาง โดยไม่ต้องแก้ไขด้วยมือ นี่เป็นวิธีที่เร็วที่สุดในการทำให้ข้อความที่แปลงแล้วเข้ากับการจัดรูปแบบตัวอักษรของเว็บไซต์

"ห่อในเอกสาร HTML ที่สมบูรณ์" ยกระดับสนิปเพตให้เป็นไฟล์เดี่ยวที่ครบถ้วนซึ่งมีแท็ก html, head และ body ล้อมรอบย่อหน้าของคุณ ปิดมันไว้เมื่อคุณกำลังวางลงในหน้าหรือโปรแกรมแก้ไขที่มีโครงสร้างนั้นอยู่แล้ว และเปิดมันเมื่อคุณต้องการไฟล์ในตัวที่บันทึกและเปิดในเบราว์เซอร์ได้โดยตรง หรือแนบเป็นเอกสาร HTML

สิ่งนี้เข้ากับเวิร์กโฟลว์จริงตรงไหน

การใช้งานที่พบบ่อยที่สุดคือการย้ายงานเขียนจากโปรแกรมแก้ไขข้อความธรรมดาหรือแอปจดบันทึกเข้าสู่ระบบเผยแพร่ ร่างงานอย่างสบายใจในข้อความธรรมดา แล้วส่งผ่านตัวแปลง จากนั้นวางมาร์กอัปที่ถูกต้องลงใน CMS ของคุณ โดยมั่นใจได้ว่าการแบ่งย่อหน้าจะคงอยู่ มันยังมีประโยชน์ไม่แพ้กันสำหรับอีเมล HTML ที่สร้างด้วยมือ ซึ่งไคลเอนต์จำนวนมากตัด CSS ออก และคุณจำเป็นต้องใช้แท็ก p และ br อย่างชัดเจนแทนที่จะพึ่งช่องว่าง

นักพัฒนาใช้มันเพื่อสร้างเทมเพลตและฟิกซ์เจอร์อย่างรวดเร็ว เปลี่ยนบล็อกข้อความให้เป็นมาร์กอัปที่พร้อมใช้สำหรับคอมโพเนนต์หรือหน้าจำลอง ส่วนใครก็ตามที่กำลังย้ายเนื้อหาระหว่างแพลตฟอร์มก็ใช้มันเพื่อทำให้ข้อความที่วางมาอย่างยุ่งเหยิงเป็นย่อหน้าเชิงความหมายที่สม่ำเสมอก่อนนำเข้าได้

ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง

ข้อผิดพลาดคลาสสิกคือการใช้การขึ้นบรรทัดเดี่ยวในจุดที่คุณตั้งใจจะให้เป็นย่อหน้าใหม่ แล้วสงสัยว่าทำไมสองบล็อกถึงมารวมกัน ให้แทรกบรรทัดว่างระหว่างย่อหน้าที่แท้จริง ข้อผิดพลาดในทางตรงกันข้ามคือการเปิด "คงการขึ้นบรรทัด" ทิ้งไว้สำหรับร้อยแก้วที่ลื่นไหล ซึ่งจะกระจายแท็ก br ไปทั่วข้อความและรบกวนการไหลของบรรทัดตามธรรมชาติบนหน้าจอขนาดต่าง ๆ และอย่างที่กล่าวข้างต้น อย่าคิดเอาเองว่าเครื่องมือจะทำความสะอาดอักขระพิเศษให้ หากเนื้อหาของคุณมีสัญลักษณ์ HTML ที่คุณต้องการแสดงตามตัวอักษร ให้ escape มันก่อนแปลง