Syntax:<\/strong><\/p>\nCode:<\/strong><\/p>\n\n\n\nEDUCBA’s Page<\/title>\n<\/head>\n<body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n<p> Hello World! This is EDUCBA’s first web page. <\/p>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543755998731.png\" alt=\"What is HTML?\" ><\/p>\n<h3>How to Create an HTML Table?<\/h3>\n<p>There are specific table tags to create a table – mainly, <table>, <th>, <tr>, and <td><strong>. <\/strong><\/p>\n<h4>Pre-requisites for HTML Table<\/h4>\n<p>For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.<\/p>\n<ul>\n<li>\n<strong><table>: <\/strong>Defines a table<\/li>\n<li>\n<strong><tr>:<\/strong> Defines a table row<\/li>\n<li>\n<strong><th>: <\/strong>Defines a table header cell<\/li>\n<li>\n<strong><td>: <\/strong>Defines a table data cell<\/li>\n<\/ul>\n<h3>Student Details Table<\/h3>\n<p>John has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.<\/p>\n<table width=\"624\">\n<tbody>\n<tr>\n<td style=\"text-align: center;\" width=\"208\"><strong>Name<\/strong><\/td>\n<td style=\"text-align: center;\" width=\"208\"><strong>Mathematics<\/strong><\/td>\n<td style=\"text-align: center;\" width=\"208\"><strong>Science<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"208\">Mary<\/td>\n<td width=\"208\">78<\/td>\n<td width=\"208\">92<\/td>\n<\/tr>\n<tr>\n<td width=\"208\">Susan<\/td>\n<td width=\"208\">98<\/td>\n<td width=\"208\">84<\/td>\n<\/tr>\n<tr>\n<td width=\"208\">Amy<\/td>\n<td width=\"208\">63<\/td>\n<td width=\"208\">79<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-<\/p>\n<p><strong>Step #1: <\/strong>Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.<\/p>\n<p><strong>Step #2: <\/strong>Select File > New Text File.<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543756191600.png\" alt=\"What is HTML?\" ><\/p>\n<p><strong>Step #3: <\/strong>Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543756316296.png\" alt=\"What is HTML?\" ><\/p>\n\n\n<p><strong>Step #4:<\/strong> Again, go to File > Save As and save the file with the filename.html format.<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543756467690.png\" alt=\"What is HTML?\" ><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543756923275.png\" alt=\"What is HTML?\" ><\/p>\n<p><strong>Step #5: <\/strong>Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre><!DOCTYPE html>\n<html>\n<head>\n<title>Student Details<\/title>\n<\/head>\n<body>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543757171682.png\" alt=\"What is HTML?\" ><\/p>\n<p>Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543757391499.png\" alt=\"What is HTML?\" ><\/p>\n<p><strong>Step #6: <\/strong>Now, define the table using the <table> tag inside the body tag. Define the first row using the <tr> tag, and add 3 headings cells – Name, Mathematics, and Science, using the <th> tag. Don’t forget to close the tags with a corresponding closing tag.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre><table>\n<tr>\n<th>Name<\/th>\n<th>Mathematics<\/th>\n<th>Science<\/th>\n<\/tr>\n<\/table><\/pre>\n<p>Save the file and refresh the webpage to see the updated output:<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543757512582.png\" alt=\"What is HTML?\" ><\/p>\n<p><strong>Step #7: <\/strong>Add the student details by defining a row for each student using <tr> tag, and adding the data in each cell using <td> tag. Close the table with the <\/table> tag.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre><tr>\n<td>Mary<\/td>\n<td>78<\/td>\n<td>92<\/td>\n<\/tr>\n<tr>\n<td>Susan<\/td>\n<td>98<\/td>\n<td>84<\/td>\n<\/tr>\n<tr>\n<td>Amy<\/td>\n<td>63<\/td>\n<td>79<\/td>\n<\/tr><\/pre>\n<p>Once again, save and refresh the webpage to see the final output:<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre><!DOCTYPE html>\n<html>\n<head>\n<title>Student Details<\/title>\n<\/head>\n<body>\n<table>\n<tr>\n<th>Name<\/th>\n<th>Mathematics<\/th>\n<th>Science<\/th>\n<\/tr>\n<tr>\n<td>Mary<\/td>\n<td>78<\/td>\n<td>92<\/td>\n<\/tr>\n<tr>\n<td>Susan<\/td>\n<td>98<\/td>\n<td>84<\/td>\n<\/tr>\n<tr>\n<td>Amy<\/td>\n<td>63<\/td>\n<td>79<\/td>\n<\/tr>\n<\/table>\n<\/body>\n<\/html><\/pre>\n<h3>Applications of HTML<\/h3>\n<table width=\"691\">\n<tbody>\n<tr>\n<td style=\"text-align: center;\" width=\"271\"><strong>Application<\/strong><\/td>\n<td style=\"text-align: center;\" width=\"420\"><strong>How Does HTML Help?<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Web pages<\/strong><\/td>\n<td width=\"420\">To create web pages, provide the structure and content for displaying information in a web browser.\n\n\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>E-commerce<\/strong><\/td>\n<td width=\"420\">To create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Landing pages<\/strong><\/td>\n<td width=\"420\">To develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Newsletters<\/strong><\/td>\n<td width=\"420\">It allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Online portfolios<\/strong><\/td>\n<td width=\"420\">To create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Blogs<\/strong><\/td>\n<td width=\"420\">One can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Documentation<\/strong><\/td>\n<td width=\"420\">It helps to create documentation and help files, providing information and guidance to users of the software and other products.\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Advertisements<\/strong><\/td>\n<td width=\"420\">It can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"271\"><strong>Forms<\/strong><\/td>\n<td width=\"420\">To create a form, one can use <form> elements.\n<p>?<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Advantages and Disadvantages<\/h3>\n<table style=\"height: 471px;\" width=\"685\">\n<tbody>\n<tr>\n<td style=\"text-align: center;\" width=\"301\"><strong>Pros<\/strong><\/td>\n<td style=\"text-align: center;\" width=\"299\"><strong>Cons<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"301\">\n<strong>Open Standard:<\/strong> It is free of cost and readily available.<\/td>\n<td width=\"299\">\n<strong>Limited Functionality: <\/strong>It cannot perform complex tasks like calculations or data storage.<\/td>\n<\/tr>\n<tr>\n<td width=\"301\">\n<strong>Easy to Learn:<\/strong> HTML tags are basic and in a readable format, enclosed in angle brackets. It’s easy to learn and use, even for non-programmers.<\/td>\n<td width=\"299\">\n<strong>Poor Security: <\/strong>It is vulnerable to security threats such as cross-site scripting (XSS) and SQL injection.<\/td>\n<\/tr>\n<tr>\n<td width=\"301\">\n<strong>Search Engine Friendly: <\/strong>Search engines can easily crawl and index the content of the pages.<\/td>\n<td width=\"299\">\n<strong>Inconsistent Browsers: <\/strong>Different browsers render HTML differently, leading to an inconsistent display of web pages on different browsers.<\/td>\n<\/tr>\n<tr>\n<td width=\"301\">\n<strong>Community Support: <\/strong>It has large community support and many online resources available for learning and troubleshooting.<\/td>\n<td width=\"299\">\n<strong>Poor Design Flexibility:<\/strong> It provides limited design options and creates static websites, making it difficult to create visually appealing dynamic websites without integrating CSS and JavaScript.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Final Thoughts<\/h3>\n<p>In conclusion, Hypertext Markup Language is a cornerstone of the World Wide Web. It provides a standardized way of defining the structure and content of a web page using a combination of tags and attributes. With HTML, one can create simple text-based web pages or complex, multimedia-rich applications. It is easy to learn and widely used, making it an essential skill for anyone interested in web development.<\/p>\n<h3>FAQs<\/h3>\n<h4>Q1. How to convert an HTML to PDF?<\/h4>\n<p><strong>Answer: <\/strong>To convert, use a library or online service that supports HTML to PDF conversion.<\/p>\n<h4>Q2. How to add an image in HTML?<\/h4>\n<p><strong>Answer: <\/strong>To add an image, use the <img> tag with the src attribute pointing to the image file’s URL or local path. Example:<\/p>\n<pre><img src=\"image.jpg\" alt=\"Alt text\"><\/pre>\n<h4>Q3. Is HTML a programming language? What is the HTML used for?<\/h4>\n<p><strong>Answer:<\/strong> Hypertext Markup Language is not a programming language, it is a markup language used for creating web pages and other information displayed in a web browser. HTML defines the structure and content of a web page using a set of markup tags.<\/p>\n<h4>Q4. How to add a video in HTML?<\/h4>\n<p><strong>Answer: <\/strong>To add a video, use the <video> tag with the src attribute pointing to the video file’s URL or local path. Example:<\/p>\n<pre><video src=\"video.mp4\"><\/video><\/pre>\n<p>One can also add controls to play, pause, and adjust volume with the controls attribute:<\/p>\n<pre><video src=\"video.mp4\" controls><\/video><\/pre>\n<h4>Q5. Is HTML case-sensitive?<\/h4>\n<p><strong>Answer: <\/strong>No, elements are not case-sensitive. However, as best practice, it’s good to follow the same casing in all tags or elements to improve code readability.<\/p>\n<h4>Q6. How many tags are in HTML?<\/h4>\n<p><strong>Answer: <\/strong>There are over 140 tags specified in the HTML5 standard, but some of them have become obsolete and are not widely used. Commonly used tags include headings, paragraphs, links, images, lists, tables, forms, and multimedia elements like audio and video.<\/p>\n<h4>Q7. What is HTML doctype?<\/h4>\n<p><strong>Answer: <\/strong>The first line of a document is the doctype or document type declaration, which defines the version of the HTML used. Example:<\/p>\n<pre><!DOCTYPE html><\/pre>\n<h4>?Q8. What is an HTML header?<\/h4>\n<p><strong>Answer: <\/strong>The HTML <header> tag defines a header section in a document. This section typically contains information such as the page title, logo, and navigation menu. The header section is usually displayed at the top of the page, and its content is typically shared across multiple pages of a website. The header tag helps to define the structure and hierarchy of a web page and makes it easier to create a consistent look and feel across multiple pages.<\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://www.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://www.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://www.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://www.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://www.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://www.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://www.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://www.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://www.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">Table of Contents</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Key-Takeaways" title="Key Takeaways" >Key Takeaways</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Subsets-of-HTML" title="Subsets of HTML" >Subsets of HTML</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#XHTML-Extensible-Hypertext-Markup-Language" title="1. XHTML (Extensible Hypertext Markup Language)" >1. XHTML (Extensible Hypertext Markup Language)</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#SGML-Standard-Generalized-Markup-Language" title="2. SGML (Standard Generalized Markup Language)" >2. SGML (Standard Generalized Markup Language)</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#DHTML-Dynamic-HTML" title="3. DHTML (Dynamic HTML)" >3. DHTML (Dynamic HTML)</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#TTML-Timed-Text-Markup-Language" title="4. TTML2 (Timed Text Markup Language 2)" >4. TTML2 (Timed Text Markup Language 2)</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#HTML-Template" title="HTML Template" >HTML Template</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-Create-an-HTML-Table" title="How to Create an HTML Table?" >How to Create an HTML Table?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Pre-requisites-for-HTML-Table" title="Pre-requisites for HTML Table" >Pre-requisites for HTML Table</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Student-Details-Table" title="Student Details Table" >Student Details Table</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Applications-of-HTML" title="Applications of HTML" >Applications of HTML</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Advantages-and-Disadvantages" title="Advantages and Disadvantages" >Advantages and Disadvantages</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Final-Thoughts" title="Final Thoughts" >Final Thoughts</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#FAQs" title="FAQs" >FAQs</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-How-to-convert-an-HTML-to-PDF" title="Q1. How to convert an HTML to PDF?" >Q1. How to convert an HTML to PDF?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-How-to-add-an-image-in-HTML" title="Q2. How to add an image in HTML?" >Q2. How to add an image in HTML?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-Is-HTML-a-programming-language-What-is-the-HTML-used-for" title="Q3. Is HTML a programming language? What is the HTML used for?" >Q3. Is HTML a programming language? What is the HTML used for?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-How-to-add-a-video-in-HTML" title="Q4. How to add a video in HTML?" >Q4. How to add a video in HTML?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-Is-HTML-case-sensitive" title="Q5. Is HTML case-sensitive?" >Q5. Is HTML case-sensitive?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-How-many-tags-are-in-HTML" title="Q6. How many tags are in HTML?" >Q6. How many tags are in HTML?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-What-is-HTML-doctype" title="Q7. What is HTML doctype?" >Q7. What is HTML doctype?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Q-What-is-an-HTML-header" title="?Q8. What is an HTML header?" >?Q8. What is an HTML header?</a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/div-tutorial.html"
class="phpgenera_Details_mainL1a">HTML Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>What is HTML?</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">What is HTML?</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/member/887227.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Sep 04, 2024 pm 04:12 PM</span>
<div id="377j5v51b" class="Articlelist_txts_infos">
<span id="377j5v51b" class="Articlelist_txts_infoss on">html</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">html5</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Tutorial</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Properties</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML tags</span>
</div>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<blockquote><p><em>HyperText Markup Language, or HTML, is a language that allows the creation of websites viewable by anyone connected to the internet.?According to a survey, over 55% of respondents stated they used HTML.</em></p></blockquote>
<p>Moreover, learning HTML is usually the first step in any web developer’s journey. An average web developer earns $61,718 annually, with top developers crossing the $103,000 mark.</p>
<p>HyperText is the way to go online by clicking on a text called hyperlinks that will take one to the next page.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543755222677.jpg" class="lazy" alt="What is HTML?" ></p>
<h3 id="Key-Takeaways">Key Takeaways</h3>
<ul>
<li>The basic code consists of a doctype declaration, HTML tag, head tag, title tag, and body tag.</li>
<li>It can run on any OS, such as Windows, Mac, and Linux, and any browser, such as Google Chrome, Mozilla Firefox, and Safari.</li>
<li>It also has various applications, such as creating personal blogs, detail tables, registration forms, landing pages, newsletters, and online portfolios.</li>
<li>The advantages are that it is an open standard, easy to learn, beginner-friendly with excellent community support, and search engine friendly.</li>
<li>The disadvantages include poor security, lack of design flexibility, inconsistent output on various browsers, and limited functionality.</li>
</ul>
<h3 id="Subsets-of-HTML">Subsets of HTML</h3>
<h4 id="XHTML-Extensible-Hypertext-Markup-Language">1. XHTML (Extensible Hypertext Markup Language)</h4>
<ul>
<li>XHTML is an XML-based markup language, which means it adheres to strict syntax and semantic rules.</li>
<li>XHTML was a successor to HTML 4, aiming to make the language more modular and extensible.</li>
<li>XHTML documents must be well-formed and valid, making them more difficult to create and more consistent and accessible to a wider range of devices.</li>
</ul>
<h4 id="SGML-Standard-Generalized-Markup-Language">2. SGML (Standard Generalized Markup Language)</h4>
<ul>
<li>SGML is a metalanguage used for defining markup languages, including HTML.</li>
<li>SGML provides a standard syntax for describing the structure and content of a document, making it useful for exchanging information between different systems.</li>
<li>SGML is a complex and powerful system, but its syntax and complexity have made it less widely used than simpler markup languages like HTML.</li>
</ul>
<h4 id="DHTML-Dynamic-HTML">3. DHTML (Dynamic HTML)</h4>
<ul>
<li>DHTML refers to using HTML, CSS, and JavaScript to create dynamic, interactive web pages.</li>
<li>DHTML allows for manipulating a web page’s content, layout, and behavior in response to user actions without requiring a page refresh.</li>
<li>DHTML is widely used for creating dynamic effects, such as drop-down menus, tooltips, and slide shows.</li>
<li>It can also create simple animations and games.</li>
</ul>
<h4 id="TTML-Timed-Text-Markup-Language">4. TTML2 (Timed Text Markup Language 2)</h4>
<ul>
<li>TTML2 is a markup language used for representing timed text content, such as captions and subtitles, in a standardized way.</li>
<li>TTML2 provides a comprehensive set of features for formatting and styling timed text, including support for multiple languages and font styles.</li>
<li>TTML2 is an important tool for ensuring the accessibility of multimedia content for deaf and hard-of-hearing users and for improving the usability of video content for all users.</li>
</ul>
<h3 id="HTML-Template">HTML Template</h3>
<p>Every HTML page has a basic template. It consists of the following sections:</p>
<p><strong>Document Type Declaration: </strong>The first line of an HTML document is the doctype or document type declaration, which defines the version of HTML used.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html></pre>
<p><strong>Element</strong>: The element is the root element of an HTML document, containing all other elements.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><html>...</html></pre>
<p><strong>Head Element: </strong>The head element contains information about the document, such as the title, metadata, and links to external resources such as stylesheets.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><head>...</head></pre>
<p><strong>Title Element: </strong>The title element defines the document’s title, which shows in the browser’s title bar.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><title>Name of Web Page</title></pre>
<p><strong>Body Element: </strong>The body element contains the main content of the document, including text, images, and other media.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><body>...</body></pre>
<p>Apart from these basic tags, several other elements can help add content to create a great website. These are-</p>
<p><strong>Headings: </strong>Headings (H1, H2, H3, etc.) help to structure the content and provide a hierarchy of information.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><h1>Main Heading</h1></pre>
<p><strong>Paragraphs: </strong>Paragraphs (<p>) assist in defining blocks of text.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><p>Hello World</p></pre>
<p><strong>Links: </strong>Links (<a>) allow users to navigate to other web pages or to other resources.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><a href="https://www.EDUCBA.com">Link to EDUCBA website</a></pre>
<p><strong>Images: </strong>Images (<img>) can provide visual content in a document.</p>
<p><strong>Syntax:</strong></p>
<pre class="brush:php;toolbar:false"><img src="image.jpg" alt="Image Description"></pre>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>EDUCBA’s Page
Hello World! This is EDUCBA’s first web page.
Output:
How to Create an HTML Table?
There are specific table tags to create a table – mainly,
, , , and .
Pre-requisites for HTML Table
For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.
: Defines a table
: Defines a table row
: Defines a table header cell
: Defines a table data cell
Student Details Table
John has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.
Name Mathematics Science
Mary
78
92
Susan
98
84
Amy
63
79
Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-
Step #1: Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.
Step #2: Select File > New Text File.
Step #3: Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.
Step #4: Again, go to File > Save As and save the file with the filename.html format.
Step #5: Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.
Code:
<!DOCTYPE html>
Student Details
Output:
Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”
Step #6: Now, define the table using the
tag inside the body tag. Define the first row using the tag, and add 3 headings cells – Name, Mathematics, and Science, using the tag. Don’t forget to close the tags with a corresponding closing tag.
Code:
<table>
<tr>
<th>Name</th>
<th>Mathematics</th>
<th>Science</th>
</tr>
</table>
Save the file and refresh the webpage to see the updated output:
Step #7: Add the student details by defining a row for each student using
tag, and adding the data in each cell using tag. Close the table with the
tag.
Code:
<tr>
<td>Mary</td>
<td>78</td>
<td>92</td>
</tr>
<tr>
<td>Susan</td>
<td>98</td>
<td>84</td>
</tr>
<tr>
<td>Amy</td>
<td>63</td>
<td>79</td>
</tr>
Once again, save and refresh the webpage to see the final output:
Code:
<!DOCTYPE html>
Student Details
Name
Mathematics
Science
<tr>
<td>Mary</td>
<td>78</td>
<td>92</td>
</tr>
<tr>
<td>Susan</td>
<td>98</td>
<td>84</td>
</tr>
<tr>
<td>Amy</td>
<td>63</td>
<td>79</td>
</tr>
Applications of HTML
Application How Does HTML Help?
Web pages To create web pages, provide the structure and content for displaying information in a web browser.
?
E-commerce To create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.
?
Landing pages To develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.
?
Newsletters It allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.
?
Online portfolios To create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.
?
Blogs One can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.
Documentation It helps to create documentation and help files, providing information and guidance to users of the software and other products.
?
Advertisements It can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.
?
Forms To create a form, one can use
Advantages and Disadvantages
Pros Cons
Open Standard: It is free of cost and readily available.
Limited Functionality: It cannot perform complex tasks like calculations or data storage.
Easy to Learn: HTML tags are basic and in a readable format, enclosed in angle brackets. It’s easy to learn and use, even for non-programmers.
Poor Security: It is vulnerable to security threats such as cross-site scripting (XSS) and SQL injection.
Search Engine Friendly: Search engines can easily crawl and index the content of the pages.
Inconsistent Browsers: Different browsers render HTML differently, leading to an inconsistent display of web pages on different browsers.
Community Support: It has large community support and many online resources available for learning and troubleshooting.
Poor Design Flexibility: It provides limited design options and creates static websites, making it difficult to create visually appealing dynamic websites without integrating CSS and JavaScript.
Final Thoughts
In conclusion, Hypertext Markup Language is a cornerstone of the World Wide Web. It provides a standardized way of defining the structure and content of a web page using a combination of tags and attributes. With HTML, one can create simple text-based web pages or complex, multimedia-rich applications. It is easy to learn and widely used, making it an essential skill for anyone interested in web development.
FAQs
Q1. How to convert an HTML to PDF?
Answer: To convert, use a library or online service that supports HTML to PDF conversion.
Q2. How to add an image in HTML?
Answer: To add an image, use the
<img src="image.jpg" alt="Alt text">
Q3. Is HTML a programming language? What is the HTML used for?
Answer: Hypertext Markup Language is not a programming language, it is a markup language used for creating web pages and other information displayed in a web browser. HTML defines the structure and content of a web page using a set of markup tags.
Q4. How to add a video in HTML?
Answer: To add a video, use the tag with the src attribute pointing to the video file’s URL or local path. Example:
<video src="video.mp4"></video>
One can also add controls to play, pause, and adjust volume with the controls attribute:
<video src="video.mp4" controls></video>
Q5. Is HTML case-sensitive?
Answer: No, elements are not case-sensitive. However, as best practice, it’s good to follow the same casing in all tags or elements to improve code readability.
Answer: There are over 140 tags specified in the HTML5 standard, but some of them have become obsolete and are not widely used. Commonly used tags include headings, paragraphs, links, images, lists, tables, forms, and multimedia elements like audio and video.
Q7. What is HTML doctype?
Answer: The first line of a document is the doctype or document type declaration, which defines the version of the HTML used. Example:
<!DOCTYPE html>
Answer: The HTML tag defines a header section in a document. This section typically contains information such as the page title, logo, and navigation menu. The header section is usually displayed at the top of the page, and its content is typically shared across multiple pages of a website. The header tag helps to define the structure and hierarchy of a web page and makes it easier to create a consistent look and feel across multiple pages.
The above is the detailed content of What is HTML?. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What are the essential HTML elements for structuring a webpage?
Jul 03, 2025 am 02:34 AM
The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.
Declaring the correct HTML5 doctype for modern pages.
Jul 03, 2025 am 02:35 AM
Doctype is a statement that tells the browser which HTML standard to use to parse the page. Modern web pages only need to be written at the beginning of the HTML file. Its function is to ensure that the browser renders the page in standard mode rather than weird mode, and must be located on the first line, with no spaces or comments in front of it; there is only one correct way to write it, and it is not recommended to use old versions or other variants; other such as charset, viewport, etc. should be placed in part.
Handling reconnections and errors with HTML5 Server-Sent Events.
Jul 03, 2025 am 02:28 AM
When using HTML5SSE, the methods to deal with reconnection and errors include: 1. Understand the default reconnection mechanism. EventSource retrys 3 seconds after the connection is interrupted by default. You can customize the interval through the retry field; 2. Listen to the error event to deal with connection failure or parsing errors, distinguish error types and execute corresponding logic, such as network problems relying on automatic reconnection, server errors manually delay reconnection, and authentication failure refresh token; 3. Actively control the reconnection logic, such as manually closing and rebuilding the connection, setting the maximum number of retry times, combining navigator.onLine to judge network status to optimize the retry strategy. These measures can improve application stability and user experience.
Implementing client-side form validation using HTML attributes.
Jul 03, 2025 am 02:31 AM
Client-sideformvalidationcanbedonewithoutJavaScriptbyusingHTMLattributes.1)Userequiredtoenforcemandatoryfields.2)ValidateemailsandURLswithtypeattributeslikeemailorurl,orusepatternwithregexforcustomformats.3)Limitvaluesusingmin,max,minlength,andmaxlen
How to group options within a select dropdown using html?
Jul 04, 2025 am 03:16 AM
Use tags in HTML to group options in the drop-down menu. The specific method is to wrap a group of elements and define the group name through the label attribute, such as: 1. Contains options such as apples, bananas, oranges, etc.; 2. Contains options such as carrots, broccoli, etc.; 3. Each is an independent group, and the options within the group are automatically indented. Notes include: ① No nesting is supported; ② The entire group can be disabled through the disabled attribute; ③ The style is restricted and needs to be beautified in combination with CSS or third-party libraries; plug-ins such as Select2 can be used to enhance functions.
Implementing Clickable Buttons Using the HTML button Element
Jul 07, 2025 am 02:31 AM
To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this
Getting the user's current location with the HTML5 Geolocation API.
Jul 02, 2025 pm 05:03 PM
When using HTML5Geolocation API to obtain user location, you must first obtain user authorization, and request and explain the purpose at the right time; the basic method is navigator.geolocation.getCurrentPosition(), which contains successful callbacks, wrong callbacks and configuration parameters; common reasons for failure include permission denied, browser not supported, network problems, etc., alternative solutions and clear prompts should be provided. The specific suggestions are as follows: 1. Request permissions when the user operation is triggered, such as clicking the button; 2. Use enableHighAccuracy, timeout, maximumAge and other parameters to optimize the positioning effect; 3. Error handling should distinguish between different errors
Improving SEO with HTML5 semantic markup and Microdata.
Jul 03, 2025 am 01:16 AM
Using HTML5 semantic tags and Microdata can improve SEO because it helps search engines better understand page structure and content meaning. 1. Use HTML5 semantic tags such as,,,, and to clarify the function of page blocks, which helps search engines establish a more accurate page model; 2. Add Microdata structured data to mark specific content, such as article author, release date, product price, etc., so that search engines can identify information types and use them for display of rich media summary; 3. Pay attention to the correct use of tags to avoid confusion, avoid duplicate tags, test the effectiveness of structured data, regularly update to adapt to changes in schema.org, and combine with other SEO means to optimize for long-term.
See all articles
![\"Image](\"image.jpg\")
<\/pre>\n
What are the essential HTML elements for structuring a webpage?
Jul 03, 2025 am 02:34 AM
Declaring the correct HTML5 doctype for modern pages.
Jul 03, 2025 am 02:35 AM
Handling reconnections and errors with HTML5 Server-Sent Events.
Jul 03, 2025 am 02:28 AM
Implementing client-side form validation using HTML attributes.
Jul 03, 2025 am 02:31 AM
How to group options within a select dropdown using html?
Jul 04, 2025 am 03:16 AM
Implementing Clickable Buttons Using the HTML button Element
Jul 07, 2025 am 02:31 AM
Getting the user's current location with the HTML5 Geolocation API.
Jul 02, 2025 pm 05:03 PM
Improving SEO with HTML5 semantic markup and Microdata.
Jul 03, 2025 am 01:16 AM
