HTML, or Hypertext Markup Language is a coding language primarily used to define the elements and the structure or heirarchy of a webpage.
<section>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</section>
As seen above, different HTML tags are used to define the elements that make up the webpage: section, h1, and p. Both the h1 and the p are children of the section element. The h1 element contains that text 'Heading 1' and the p element contains the text 'Paragraph 1'.
HTML 5 gives us 6 different heading tages by default:
- h1
- h2
- h3
- h4
- h5
- h6
There should only be one h1 tage per page; it is given the most importance. Following h1, h2 and the rest of the heading tags in descending order are sub-headings, sub-sub-headings, and so on.
<header>
<h1>Title</h1>
<header>
<section>
<h2>Sub-title</h2>
<div>
<h3>Sub-sub-title 1</h3>
<p>Paragraph</p>
</div>
<div>
<h3>Sub-sub-title 2</h3>
<p>Paragraph</p>
</div>
<div>
<h3>Sub-sub-title 3</h3>
<p>Paragraph</p>
</div>
</section>
As seen above, the heading tags are used in order of importance, with h1 being the most important.
Some other basic tags include div, span, p, header, and section. These are all tags that have been used so far in previous code exmaples in this guide.
<header>
<h1>Example <span>Text</span></h1>
</header>
<section>
<h2>Sub-title</h2>
<div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
</div>
</section>
As seen above, the header tag is used to define the section of the page that contains the h1 and other important elements, such as a navigation.The section tag can be used multiple times, and is used to define sections of the page that differ in topic or purpose. The div element is used to define a container on the page for other elements, these div containers are usually 2 dimensional. The span element, in contrast is usualy used to define a 1 dimensional container. The p element is used to define text that is very low-level. Usually not the most important text, just a paragraph description, as opposed to a heading or a title.
The meta tag has many different uses. It is placed in the head tag, which is used to define informaiton about the webpage for the browser and search engine to use.
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="insert page description here"/>
</head>
As seen above, the attributes of the meta tage determine its function. The first meta tag defines the encryption for the page. The second meta tag defines the scaling of the page (to make it display correctly on all screen sizes). The last meta tag defines the description of the page.
The anchor tag, better know as the a tag, creates a hyperlink in your webpage.
<nav>
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
</nav>
<section id="section-1">
</section>
<section id="section-2">
</section>
As seen above, the a tag defines a hyperlink to sections 1 and 2, based off of the value of the href attribute. When the href attribute has a # infront of the value, it means that it links to another element in the page. They can also link to other webpages using the url of the other page.