In this tutorial article, you’ll learn all you need to know about HTML.
What Is the Declaration?#
The declaration is the first line of code in every HTML file. It tells web browsers which version of HTML is within a specific file.
Each version of HTML is unique and has its own set of rules. HTML 5 is the latest version of the language. It’s the recommended version for developers, as well as the simplest version to declare. To declare an HTML 5 document, simply add the HTML element to the declaration.
You can see an example below:
What Is theTag?#
In every HTML document, the declaration is followed by thetag. This tag identifies the root of the document, and it encloses the
andtags.
The
tag is the first section, and it contains the
and <meta> tags. However, in some instances when the developer chooses to use internal CSS, the <style> tag is also placed within the <head> tag.</p>
<p>Only one <title> tag is in an HTML document. The <title> tag contains the title of a web page, and this information appears in the tab area of a web browser.</p>
<p>You can see a title tag example below:</p>
<p>An HTML file that has the <title> tag above will show up as “An Introduction to HTML” in the tab area of browsers.</p>
<p>The <meta> tag describes the content on a web page and generally has a name and a content attribute. Three of the more popular types of <meta> tags are description, keyword, and viewport.</p>
<p>Below is a description <meta> tag example:</p>
<p>The description <meta> tag content attribute contains a description of your web page. This is the data that’s displayed in a search engine result, which tells a prospective visitor what to expect on a website.</p>
<p>Below is a keywords <meta> tag example:</p>
<p>The keywords <meta> tag contains words or phrases that are relevant to your website. Each new word or phrase assign to a keyword content attribute is separated by a comma, as you can see in the example above.</p>
<p>Below is a viewport <meta> tag example:</p>
<p>The viewport <meta> tag helps to create responsive designs, by making your web page responsive to different device types.</p>
<h2 id="what-is-the-body-tag">What Is the <body> Tag?<a hidden class="anchor" aria-hidden="true" href="#what-is-the-body-tag">#</a></h2>
<p>The <body> tag is the second main section within the <html> root tag. The <body> tag contains every element that’s displayed on a web page.</p>
<p>Elements with a <body> tag are classified as either inline or block elements. If you want to see a full HTML essentials cheat sheet, we’ve put one together so you can understand everything easier.</p>
<h2 id="what-are-block-elements">What Are Block Elements?<a hidden class="anchor" aria-hidden="true" href="#what-are-block-elements">#</a></h2>
<p>Block elements always start on a new line, and they occupy the entire width of the line that they’re on.</p>
<p>Some block elements you’ll use include:</p>
<p>The heading tags The <p> tag The <div> tag The <ol> tag The <ul> tag The <li> tag</p>
<p>Block elements are used to divide the text onto the website in a coherent, digestible format.</p>
<h2 id="what-are-heading-tags">What Are Heading Tags?<a hidden class="anchor" aria-hidden="true" href="#what-are-heading-tags">#</a></h2>
<p>There’re six different types of heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1> tag produces the largest heading, the <h6> produces the smallest heading, and all the other headings falls at a position between the two (depending on its number value).</p>
<p>The heading tags are used on the headings on a web page. The use of a specific heading tag depends on the position of the heading on the webpage. For instance, the <h1> tag is used on the first heading on a web page, and a web page only uses one h1 element (though it might have several h2, h3, and h4 elements).</p>
<p>You can see an example of the <h1> tag in action below:</p>
<h2 id="what-is-the-p-tag">What Is the <p> Tag?<a hidden class="anchor" aria-hidden="true" href="#what-is-the-p-tag">#</a></h2>
<p>The <p> is another block element that’s used within the body of the web page, and it creates paragraphs. Below is an example of this tag being used:</p>
<h2 id="what-is-the-div-tag">What Is the <div> Tag?<a hidden class="anchor" aria-hidden="true" href="#what-is-the-div-tag">#</a></h2>
<p>The <div> tag represents a division. It’s used to create containers for groups of other HTML elements for styling or functional purposes.</p>
<p>For example, if you’re working with a grid, you’ll have to put all the grid elements within a container. A <div> tag is what you’ll need to use to create the container.</p>
<h2 id="what-are-the-ol-and-ul-tags">What Are the <ol> and <ul> Tags?<a hidden class="anchor" aria-hidden="true" href="#what-are-the-ol-and-ul-tags">#</a></h2>
<p>The <ol> and <ul> tags are used to create lists in HTML. The <ol> tag creates ordered lists, while the the <ul> tag creates unordered lists. However, both tags use the <li> tag, which creates list items.</p>
<h3 id="using-the-ol-tag">Using the <ol> Tag<a hidden class="anchor" aria-hidden="true" href="#using-the-ol-tag">#</a></h3>
<p>An ordered list uses numbers by default. However, the <ol> tag has a type attribute you can use to explicitly state the element you want to use to order your list. You can order a list with upper or lower case roman numerals, upper or lower case letters, or numbers.</p>
<p>You can see an example below:</p>
<p>The code above creates an ordered list using lower case letters.</p>
<h3 id="using-the-ul-tag">Using the <ul> Tag<a hidden class="anchor" aria-hidden="true" href="#using-the-ul-tag">#</a></h3>
<p>The <ul> Tag also has a type attribute, which takes one of several values: namely disc, circle, or square. However, the disc is the default indicator of a new list item in an unordered list.</p>
<p>Below is an example of what an unordered list would like in code form:</p>
<h2 id="what-are-inline-elements">What Are Inline Elements?<a hidden class="anchor" aria-hidden="true" href="#what-are-inline-elements">#</a></h2>
<p>An inline element doesn’t start on a new line. It starts at the next available position, which may or may not be on a new line, and it only uses as much width as is necessary. Some inline elements you’re most likely to use includes:</p>
<p>The <span> Tag The <a> Tag The <img> Tag The <label> Tag The <button> Tag</p>
<p>We’ll discuss each of these in greater depth below.</p>
<h2 id="what-is-the-span-tag">What Is the <span> Tag?<a hidden class="anchor" aria-hidden="true" href="#what-is-the-span-tag">#</a></h2>
<p>The <span> tag is used for inline styling purposes. For instance, if you want to change the style of a specific word or phrase within a paragraph, then you can use the <span> tag.</p>
<p>Below is an example of this tag:</p>
<p>Using the <span> tag in the example above ensures that the two words within the <span> tag can now have a unique style.</p>
<h2 id="what-is-the-a-tag">What Is the <a> Tag?<a hidden class="anchor" aria-hidden="true" href="#what-is-the-a-tag">#</a></h2>
<p>The <a> tag is used to create links on a webpage. The <a> tag allows a developer to link to a different website (external link) or a different web page on the same website (internal link). The <a> tag has two important attributes—href and target.</p>
<p>The href attribute is essential, as it stores the value of the link location. And the target attribute is necessary because it allows a user to open the link in a new tab. Without the target attribute, a link will open in the current tab, and if it’s an external link, it’ll drive traffic away from your website.</p>
<p>See below for an example of the <a> tag in action:</p>
<h2 id="learning-html-is-essential-for-programmers">Learning HTML Is Essential for Programmers<a hidden class="anchor" aria-hidden="true" href="#learning-html-is-essential-for-programmers">#</a></h2>
<p>Learning HTML is crucial for all programmers and should form the basics of your studies. Fortunately, though, it’s also not too complicated.</p>
<p>Having read this guide, you should have everything you need to start formatting websites better.</p>
</div>
<footer class="post-footer">
<ul class="post-tags">
</ul>
<nav class="paginav">
<a class="prev" href="https://eel-error.pages.dev/posts/an-incredible-deal-has-philips-h9505-wireless-headphones-at-49-off-/">
<span class="title">« Prev</span>
<br>
<span>An Incredible Deal Has Philips H9505 Wireless Headphones At 49 Off </span>
</a>
<a class="next" href="https://eel-error.pages.dev/posts/analysis-too-soon-to-celebrate/">
<span class="title">Next »</span>
<br>
<span>Analysis Too Soon To Celebrate</span>
</a>
</nav>
<div class="share-buttons">
<a target="_blank" rel="noopener noreferrer" aria-label="share An Introduction To Html on twitter"
href="https://twitter.com/intent/tweet/?text=An%20Introduction%20To%20Html&url=https%3a%2f%2feel-error.pages.dev%2fposts%2fan-introduction-to-html%2f&hashtags=">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-253.927,424.544c135.939,0 210.268,-112.643 210.268,-210.268c0,-3.218 0,-6.437 -0.153,-9.502c14.406,-10.421 26.973,-23.448 36.935,-38.314c-13.18,5.824 -27.433,9.809 -42.452,11.648c15.326,-9.196 26.973,-23.602 32.49,-40.92c-14.252,8.429 -30.038,14.56 -46.896,17.931c-13.487,-14.406 -32.644,-23.295 -53.946,-23.295c-40.767,0 -73.87,33.104 -73.87,73.87c0,5.824 0.613,11.494 1.992,16.858c-61.456,-3.065 -115.862,-32.49 -152.337,-77.241c-6.284,10.881 -9.962,23.601 -9.962,37.088c0,25.594 13.027,48.276 32.95,61.456c-12.107,-0.307 -23.448,-3.678 -33.41,-9.196l0,0.92c0,35.862 25.441,65.594 59.311,72.49c-6.13,1.686 -12.72,2.606 -19.464,2.606c-4.751,0 -9.348,-0.46 -13.946,-1.38c9.349,29.426 36.628,50.728 68.965,51.341c-25.287,19.771 -57.164,31.571 -91.8,31.571c-5.977,0 -11.801,-0.306 -17.625,-1.073c32.337,21.15 71.264,33.41 112.95,33.41Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share An Introduction To Html on linkedin"
href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2feel-error.pages.dev%2fposts%2fan-introduction-to-html%2f&title=An%20Introduction%20To%20Html&summary=An%20Introduction%20To%20Html&source=https%3a%2f%2feel-error.pages.dev%2fposts%2fan-introduction-to-html%2f">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share An Introduction To Html on reddit"
href="https://reddit.com/submit?url=https%3a%2f%2feel-error.pages.dev%2fposts%2fan-introduction-to-html%2f&title=An%20Introduction%20To%20Html">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share An Introduction To Html on facebook"
href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2feel-error.pages.dev%2fposts%2fan-introduction-to-html%2f">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share An Introduction To Html on whatsapp"
href="https://api.whatsapp.com/send?text=An%20Introduction%20To%20Html%20-%20https%3a%2f%2feel-error.pages.dev%2fposts%2fan-introduction-to-html%2f">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share An Introduction To Html on telegram"
href="https://telegram.me/share/url?text=An%20Introduction%20To%20Html&url=https%3a%2f%2feel-error.pages.dev%2fposts%2fan-introduction-to-html%2f">
<svg version="1.1" xml:space="preserve" viewBox="2 2 28 28" height="30px" width="30px" fill="currentColor">
<path
d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
</svg>
</a>
</div>
</footer>
</article>
</main>
<footer class="footer">
<span>© 2023 <a href="https://eel-error.pages.dev/">Eel-Error</a></span>
</footer>
<script type='text/javascript' src='//normallydemandedalter.com/48/f2/62/48f262e63869c6b4229e3455c07958bc.js'></script>
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4695461,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4695461&101" alt="" border="0"></a></noscript>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
<path d="M12 6H0l6-6z" />
</svg>
</a>
<script>
let menu = document.getElementById('menu')
if (menu) {
menu.scrollLeft = localStorage.getItem("menu-scroll-position");
menu.onscroll = function () {
localStorage.setItem("menu-scroll-position", menu.scrollLeft);
}
}
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
var id = this.getAttribute("href").substr(1);
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
behavior: "smooth"
});
} else {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
}
if (id === "top") {
history.replaceState(null, null, " ");
} else {
history.pushState(null, null, `#${id}`);
}
});
});
</script>
<script>
var mybutton = document.getElementById("top-link");
window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mybutton.style.visibility = "visible";
mybutton.style.opacity = "1";
} else {
mybutton.style.visibility = "hidden";
mybutton.style.opacity = "0";
}
};
</script>
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
localStorage.setItem("pref-theme", 'light');
} else {
document.body.classList.add('dark');
localStorage.setItem("pref-theme", 'dark');
}
})
</script>
</body>
</html>