Understanding the Basics: A Comprehensive Guide for Newcomers in HTML
Introduction
HTML (Hyper Text Markup Language) is the standard markup language for creating web pages. It provides the structure of a webpage, defining various elements such as headings, paragraphs, links, images, and lists. In this guide, we will walk through the fundamental aspects of HTML, catering to newcomers.
Basic HTML Elements
1.
: This section includes meta-information about the document, such as its title, author, and links to external resources like stylesheets or scripts.
2.
: The title element specifies a title for the webpage, which is displayed in the browser’s title bar or tab.</p>
<p>3. <body>: The body element contains the content that is visible to users when they view the webpage.</p>
<p>4. </p>
<h1> to </p>
<h6>: These elements define headings, with </p>
<h1> being the largest and </p>
<h6> being the smallest.</p>
<p>5. </p>
<p>: The paragraph element is used to define a block of text that forms a paragraph.</p>
<p>6. <a>: The anchor (a) element is used to create hyperlinks. It links to other webpages, resources, or specific locations within the same webpage.</p>
<p>7. <img>: The image element is used to embed images within the webpage. It requires a source (src) attribute to specify the image file.</p>
<p>8. </p>
<ul> and </p>
<ol>: These elements create unordered (ul) and ordered (ol) lists, respectively. List items are defined using the </p>
<li> element.
<p>9. <br />: The line break (br) element is used to create a new line in the text.</p>
<p>10. </p>
<hr>
<p>: The horizontal rule (hr) element is used to insert a horizontal line across the webpage.</p>
<h5> Conclusion </h5>
<p>Understanding the basics of HTML is essential for creating and designing web pages. With the knowledge of these fundamental elements, you can start building simple webpages and gradually move on to more complex structures and functionalities. Happy coding!</p>
</div>
<div class="clear"></div>
<div class="tags textcenter">
<p class="title usmall">Categorized in:</p>
<div class="tags single-categories"><a href="https://tyfig.com/category/something-new/" class="tag-link-2">Something New</a></div> </div>
<!-- start: .share-buttons -->
<div class="share-buttons section">
<p class="title small">Share Article:</p>
<div class="epcl-share-bottom">
<a class="facebook button circle" rel="nofollow noopener" href="https://www.facebook.com/sharer/sharer.php?u=https://tyfig.com/understanding-the-basics-a-comprehensive-guide-for-newcomers/" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="twitter button circle" rel="nofollow noopener" href="http://twitter.com/share?text=%2A+Understanding+the+Basics%3A+A+Comprehensive+Guide+for+Newcomers&url=https://tyfig.com/understanding-the-basics-a-comprehensive-guide-for-newcomers/" target="_blank"><svg class="icon"><use xlink:href="#twitter-icon"></use></svg></a>
<a class="email button circle" rel="nofollow noopener" href="mailto:?subject=%2A+Understanding+the+Basics%3A+A+Comprehensive+Guide+for+Newcomers&body=https://tyfig.com/understanding-the-basics-a-comprehensive-guide-for-newcomers/" target="_blank"><i class="fa fa-envelope"></i></a>
<a class="whatsapp button circle" rel="nofollow noopener" href="https://api.whatsapp.com/send?text=https://tyfig.com/understanding-the-basics-a-comprehensive-guide-for-newcomers/" data-action="share/whatsapp/share" target="_blank"><i class="fa fa-whatsapp"></i></a>
</div>
<div class="clear"></div>
<div class="permalink">
<input type="text" name="shortlink" value="https://tyfig.com/understanding-the-basics-a-comprehensive-guide-for-newcomers/" id="copy-link" readonly aria-label="Copy Link">
<span class="copy"><svg class="icon large main-color"><use xlink:href="#copy-icon"></use></svg></span>
</div>
</div>
<!-- end: .share-buttons -->
</section>
</article>
<!-- start: .epcl-comments -->
<div id="show-comments" class="epcl-comments section np-bottom">
<!-- start: #comments -->
<div id="comments" class="section bg-white hosted no-comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title title bordered">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/understanding-the-basics-a-comprehensive-guide-for-newcomers/#respond" style="display:none;">Cancel reply</a></small><span class="border"></span></h3><form action="https://tyfig.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><textarea id="comment" name="comment" aria-required="true" rows="10" placeholder="Comment"></textarea><input class="form-author" name="author" type="text" placeholder="Name" value="" size="30" aria-required='true' required />
<input class="form-email" name="email" type="email" placeholder="Email" value="" size="30" aria-required='true' required /><div class="clear"></div>
<input class="form-website" name="url" type="text" placeholder="Website" value="" size="30" />
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='888' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
<div class="clear"></div>
</div>
<!-- end: #comments -->
<div class="clear"></div>
</div>
<!-- end: .epcl-comments -->
<section class="related section" id="epcl-related-stories">
<h3 class="title bordered">Related Articles<span class="border"></span></h3>
<div class="row">
<article class="item grid-50 tablet-grid-50 mobile-grid-100 primary-cat-2 post-1895 post type-post status-publish format-standard has-post-thumbnail hentry category-something-new">
<a href="https://tyfig.com/the-impact-of-ai-on-climate-change-harnessing-the-power-of-ai-for-a-sustainable-future/" class="thumb epcl-dropcap main-effect epcl-loader">
<span class="fullimage cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-300x300.webp"></span>
<span class="fullimage fake-layout cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-300x300.webp"></span>
</a>
<div class="info">
<h4 class="title small no-margin underline-effect"><a href="https://tyfig.com/the-impact-of-ai-on-climate-change-harnessing-the-power-of-ai-for-a-sustainable-future/">The Impact of AI on Climate Change: Harnessing the Power of AI for a Sustainable Future.</a></h4>
<time class="small" datetime="2024-10-15">October 15, 2024</time>
</div>
</article>
<article class="item grid-50 tablet-grid-50 mobile-grid-100 primary-cat-2 post-1894 post type-post status-publish format-standard has-post-thumbnail hentry category-something-new">
<a href="https://tyfig.com/the-impact-of-ai-on-day-to-day-decision-making-in-business-a-comprehensive-guide-for-executives-and-managers/" class="thumb epcl-dropcap main-effect epcl-loader">
<span class="fullimage cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-3-300x300.webp"></span>
<span class="fullimage fake-layout cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-3-300x300.webp"></span>
</a>
<div class="info">
<h4 class="title small no-margin underline-effect"><a href="https://tyfig.com/the-impact-of-ai-on-day-to-day-decision-making-in-business-a-comprehensive-guide-for-executives-and-managers/">The Impact of AI on Day-to-Day Decision Making in Business: A Comprehensive Guide for Executives and Managers.</a></h4>
<time class="small" datetime="2024-10-15">October 15, 2024</time>
</div>
</article>
<article class="item grid-50 tablet-grid-50 mobile-grid-100 primary-cat-2 post-1893 post type-post status-publish format-standard has-post-thumbnail hentry category-something-new">
<a href="https://tyfig.com/cybersecurity-for-small-businesses-understanding-cyber-threats-essential-cybersecurity-best-practices-and-affordable-cybersecurity-solutions-for-small-businesses/" class="thumb epcl-dropcap main-effect epcl-loader">
<span class="fullimage cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-300x300.jpg"></span>
<span class="fullimage fake-layout cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-300x300.jpg"></span>
</a>
<div class="info">
<h4 class="title small no-margin underline-effect"><a href="https://tyfig.com/cybersecurity-for-small-businesses-understanding-cyber-threats-essential-cybersecurity-best-practices-and-affordable-cybersecurity-solutions-for-small-businesses/">Cybersecurity for Small Businesses: Understanding Cyber Threats, Essential Cybersecurity Best Practices, and Affordable Cybersecurity Solutions for Small Businesses</a></h4>
<time class="small" datetime="2024-10-15">October 15, 2024</time>
</div>
</article>
<article class="item grid-50 tablet-grid-50 mobile-grid-100 primary-cat-2 post-1892 post type-post status-publish format-standard has-post-thumbnail hentry category-something-new">
<a href="https://tyfig.com/augmented-reality-ar-and-virtual-reality-vr-in-everyday-life-how-these-technologies-are-changing-the-way-we-work-play-and-communicate/" class="thumb epcl-dropcap main-effect epcl-loader">
<span class="fullimage cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-1-300x300.jpg"></span>
<span class="fullimage fake-layout cover lazy" data-src="https://tyfig.com/wp-content/uploads/2024/10/image-1-300x300.jpg"></span>
</a>
<div class="info">
<h4 class="title small no-margin underline-effect"><a href="https://tyfig.com/augmented-reality-ar-and-virtual-reality-vr-in-everyday-life-how-these-technologies-are-changing-the-way-we-work-play-and-communicate/">Augmented Reality (AR) and Virtual Reality (VR) in Everyday Life – How These Technologies are Changing the Way We Work, Play, and Communicate</a></h4>
<time class="small" datetime="2024-10-15">October 15, 2024</time>
</div>
</article>
<div class="clear"></div>
</div>
</section>
<div class="clear"></div>
<section class="siblings section" id="epcl-other-stories">
<h3 class="title bordered">Other Stories<span class="border"></span></h3>
<div class="">
<article class="next bg-white primary-cat-2 post-888 post type-post status-publish format-standard hentry category-something-new">
<div class="thumb epcl-dropcap">
<span>*</span>
</div>
<a href="https://tyfig.com/demystifying-deep-learning-applications-and-case-studies/" class="full-link"></a>
<div class="info">
<h4 class="title usmall no-margin">* Demystifying Deep Learning: Applications and Case Studies</h4>
<span class="meta">Next Story</span>
</div>
</article>
<article class="prev bg-white primary-cat-2 post-888 post type-post status-publish format-standard hentry category-something-new">
<div class="thumb epcl-dropcap">
<span>T</span>
</div>
<a href="https://tyfig.com/the-future-of-5g-and-iot-how-faster-connectivity-and-increased-device-interconnectivity-are-revolutionizing-industries/" class="full-link"></a>
<div class="info">
<h4 class="title usmall no-margin">The Future of 5G and IoT: How Faster Connectivity and Increased Device Interconnectivity are Revolutionizing Industries</h4>
<span class="meta">Previous Story</span>
</div>
</article>
<div class="clear"></div>
</div>
</section>
<div class="clear"></div>
</div>
<!-- end: .content -->
<!-- start: #sidebar -->
<aside id="sidebar" class="grid-30 no-sidebar">
<div class="sidebar-wrapper default-sidebar"><section id="block-2" class="widget widget_block widget_search"><form role="search" method="get" action="https://tyfig.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form><div class="clear"></div></section><section id="block-3" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Posts</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://tyfig.com/the-impact-of-ai-on-climate-change-harnessing-the-power-of-ai-for-a-sustainable-future/">The Impact of AI on Climate Change: Harnessing the Power of AI for a Sustainable Future.</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://tyfig.com/the-impact-of-ai-on-day-to-day-decision-making-in-business-a-comprehensive-guide-for-executives-and-managers/">The Impact of AI on Day-to-Day Decision Making in Business: A Comprehensive Guide for Executives and Managers.</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://tyfig.com/cybersecurity-for-small-businesses-understanding-cyber-threats-essential-cybersecurity-best-practices-and-affordable-cybersecurity-solutions-for-small-businesses/">Cybersecurity for Small Businesses: Understanding Cyber Threats, Essential Cybersecurity Best Practices, and Affordable Cybersecurity Solutions for Small Businesses</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://tyfig.com/augmented-reality-ar-and-virtual-reality-vr-in-everyday-life-how-these-technologies-are-changing-the-way-we-work-play-and-communicate/">Augmented Reality (AR) and Virtual Reality (VR) in Everyday Life – How These Technologies are Changing the Way We Work, Play, and Communicate</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://tyfig.com/tech-for-remote-work-essential-tools-for-a-successful-remote-work-setup/">Tech for Remote Work: Essential Tools for a Successful Remote Work Setup</a></li>
</ul></div></div><div class="clear"></div></section><section id="block-4" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Comments</h2><ol class="wp-block-latest-comments"><li class="wp-block-latest-comments__comment"><article><footer class="wp-block-latest-comments__comment-meta"><a class="wp-block-latest-comments__comment-author" href="https://wordpress.org/">A WordPress Commenter</a> on <a class="wp-block-latest-comments__comment-link" href="https://tyfig.com/hello-world/#comment-1">Hello world!</a></footer></article></li></ol></div></div><div class="clear"></div></section></div>
</aside>
<!-- end: #sidebar -->
</div>
<!-- end: .center -->
</div>
<!-- end: .epcl-page-wrapper -->
</main>
<!-- end: #single -->
<!-- start: #footer -->
<footer id="footer" class="">
<h2 class="logo text-logo">
<a href="https://tyfig.com/" class="title ularge no-margin">
<span>Tyfig</span>
</a>
</h2>
<span id="back-to-top" class="epcl-button dark"><i class="fa fa-angle-up"></i></span>
<div class="clear"></div>
</footer>
<!-- end: #footer -->
<div class="clear"></div>
</div>
<!-- end: #wrapper -->
<!-- W3TC-include-css -->
<!-- W3TC-include-js-head -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<symbol id="copy-icon" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/>
</g>
</symbol>
<symbol id="comments-outline-icon" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/><path d="M7.291 20.824L2 22l1.176-5.291A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.956 9.956 0 0 1-4.709-1.176zm.29-2.113l.653.35A7.955 7.955 0 0 0 12 20a8 8 0 1 0-8-8c0 1.334.325 2.618.94 3.766l.349.653-.655 2.947 2.947-.655z"/>
</g>
</symbol>
<symbol id="views-outline-icon" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/><path d="M12 23a7.5 7.5 0 0 0 7.5-7.5c0-.866-.23-1.697-.5-2.47-1.667 1.647-2.933 2.47-3.8 2.47 3.995-7 1.8-10-4.2-14 .5 5-2.796 7.274-4.138 8.537A7.5 7.5 0 0 0 12 23zm.71-17.765c3.241 2.75 3.257 4.887.753 9.274-.761 1.333.202 2.991 1.737 2.991.688 0 1.384-.2 2.119-.595a5.5 5.5 0 1 1-9.087-5.412c.126-.118.765-.685.793-.71.424-.38.773-.717 1.118-1.086 1.23-1.318 2.114-2.78 2.566-4.462z"/>
</g>
</symbol>
<symbol id="search-icon" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/>
</g>
</symbol>
<symbol id="star-icon" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/><path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928L12 18.26zm0-2.292l4.247 2.377-.949-4.773 3.573-3.305-4.833-.573L12 5.275l-2.038 4.42-4.833.572 3.573 3.305-.949 4.773L12 15.968z"/>
</symbol>
<symbol id="menu-icon" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z"/>
</g>
</symbol>
<symbol id="close-icon" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/>
</g>
</symbol>
<symbol id="tiktok-icon" viewBox="0 0 512 512">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="m480.32 128.39c-29.22 0-56.18-9.68-77.83-26.01-24.83-18.72-42.67-46.18-48.97-77.83-1.56-7.82-2.4-15.89-2.48-24.16h-83.47v228.08l-.1 124.93c0 33.4-21.75 61.72-51.9 71.68-8.75 2.89-18.2 4.26-28.04 3.72-12.56-.69-24.33-4.48-34.56-10.6-21.77-13.02-36.53-36.64-36.93-63.66-.63-42.23 33.51-76.66 75.71-76.66 8.33 0 16.33 1.36 23.82 3.83v-62.34-22.41c-7.9-1.17-15.94-1.78-24.07-1.78-46.19 0-89.39 19.2-120.27 53.79-23.34 26.14-37.34 59.49-39.5 94.46-2.83 45.94 13.98 89.61 46.58 121.83 4.79 4.73 9.82 9.12 15.08 13.17 27.95 21.51 62.12 33.17 98.11 33.17 8.13 0 16.17-.6 24.07-1.77 33.62-4.98 64.64-20.37 89.12-44.57 30.08-29.73 46.7-69.2 46.88-111.21l-.43-186.56c14.35 11.07 30.04 20.23 46.88 27.34 26.19 11.05 53.96 16.65 82.54 16.64v-60.61-22.49c.02.02-.22.02-.24.02z"/>
</symbol>
<symbol id="tool-icon" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/><path d="M6.94 14.036c-.233.624-.43 1.2-.606 1.783.96-.697 2.101-1.139 3.418-1.304 2.513-.314 4.746-1.973 5.876-4.058l-1.456-1.455 1.413-1.415 1-1.001c.43-.43.915-1.224 1.428-2.368-5.593.867-9.018 4.292-11.074 9.818zM17 9.001L18 10c-1 3-4 6-8 6.5-2.669.334-4.336 2.167-5.002 5.5H3C4 16 6 2 21 2c-1 2.997-1.998 4.996-2.997 5.997L17 9.001z"/>
</symbol>
<symbol id="twitter-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M8 2H1L9.26086 13.0145L1.44995 21.9999H4.09998L10.4883 14.651L16 22H23L14.3917 10.5223L21.8001 2H19.1501L13.1643 8.88578L8 2ZM17 20L5 4H7L19 20H17Z"></path>
</symbol>
</svg>
<link rel='stylesheet' id='font-awesome-css' href='https://tyfig.com/wp-content/themes/maktub/assets/dist/fontawesome.min.css?ver=2.0.0' media='all' />
<script id="epcl-scripts-js-extra">
var ajax_var = {"url":"https:\/\/tyfig.com\/wp-admin\/admin-ajax.php","nonce":"c98c8d6c7c","assets_folder":"https:\/\/tyfig.com\/wp-content\/themes\/maktub\/assets"};
</script>
<script src="https://tyfig.com/wp-content/themes/maktub/assets/dist/scripts.min.js?ver=2.0.0" id="epcl-scripts-js"></script>
<script src="https://tyfig.com/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async data-wp-strategy="async"></script>
</body>
</html>