HTML: Elements, Tags and Basic Structure
HTML stands for Hypertext Markup Language and is the basic structural element that is used to create WebPages. HTML is a markup language, which means that it is used to “mark up” the content within a document, in this case a webpage, with structural and semantic information that tells a browser how to display a page. When an HTML document is loaded by a web browser, the browser uses the HTML tags that have marked up the document to render the page’s content.
HTML structure + CSS style + JS interaction = web page
Elements and Tags
HTML elements and tags work together to mark up content. HTML elements indicate the purpose of a tag and tags indicate the beginning and the end of an element.
For example, here is a simple paragraph in HTML:
<p>This is a paragraph.</p>
The letter “p” represents the paragraph element. In this example, <p> is an opening tag that tells the browser that the content that follows it is a paragraph. The slash in the second tag, </p>, indicates that it is a closing tag that tells the browser that the paragraph element is ending and that any content that appears after it is not part of the paragraph. You may encounter serious display issues if you don’t remember to “close” each tag because the browser will interpret this pattern as meaning that the element identified by the opening tag should continue for the rest of the page.
Basic HTML Page Structure
A basic HTML page is a document that typically has the file extension .html, though HTML frequently appears in the content of other file types as well. All HTML documents follow the same basic structure so that the browser that renders the file knows what to do. The basic structure on which all webpages are built looks like this:
<p>This is a paragraph.</p>
When this code is rendered by a browser, it will look like this:
The first line of code, <!DOCTYPE html>, is called a doctype declaration and tells the browser which version of HTML the page is written in. In this case, we’re using the doctype that corresponds to HTML5, the most up-to-date version of the HTML language. There are a number of different doctype declarations that correspond to various versions of HTML.
HTML Root Element
Next, the <html> element wraps around all of the other code and content in our document. This element, known as the HTML root element, always contains one <head> element and one <body>element.
The <title> element is the only element that is required to be contained within the <head> tags. The content within this element is displayed as the page title in the tab of the browser and is also what search engines use to identify the title of a page.
All of the HTML elements that can be used inside the <head> element are:
There can only be one <body> element in an HTML document because this element is the container that holds the content of the document. All of the content that you see rendered in the browser is contained within this element. In the example above, the content of the page is a headline and simple paragraph.
For example, the basic page structure we outlined above is valid HTML because each element’s opening tag has a closing tag and fully contain any other elements within it.
I’ve used HTML comments to label the example we’ve been using to show which tags are opening tags and which tags are closing tags, so you can see how each element is nested. In HTML, any content that is in between <!– and –> is a comment that will not be rendered by the browser.
<!DOCTYPE html> <!– doctype declaration –>
<html> <!– opening HTML tag –>
<head> <!– opening head tag –>
<title>Page Title</title> <!– title tag –>
</head> <!– closing head tag –>
<body> <!– opening body tag –>
<h1>Homepage Headline</h1> <!– h1 headline –>
<p>This is a paragraph.</p> <!– paragraph –>
</body> <!– closing body tag –>
</html> <!– closing HTML tag –>
Keep in mind that indentation is used by developers to help make sure that their HTML is nested properly and to ensure that all opening tags have a corresponding closing tag. Just like HTML comments, the browser will not display indentations in the code, these formatting patterns are there solely to help improve the readability of code.
The following version of the sample code is not nested correctly. Take a moment to look and find the nesting errors here.
This is a paragraph.</p>
There are two nesting errors in the previous example:
- The opening <body> tag is contained within the opening and closing <head> tags.
- The opening <p> tag in the <body> content is contained within the opening and closing <h1> tags.
This code actually will render in some browsers, but just because something renders doesn’t mean that the code is syntactically correct.