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.
There are three types of code that make up a basic website page. HTML governs the structural elements, CSS styles those elements, and JavaScript enables dynamic interaction between those elements.
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.
You can find a full list of all HTML elements at the Mozilla Developer Network HTML Element Reference 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:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>Homepage Headline</h1> <p>This is a paragraph.</p> </body> </html>
When this code is rendered by a browser, it will look like this:
Doctype
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.
Head Element
The HTML head element is a container that can include a number of HTML elements that are not visible parts of the page rendered by the browser. These elements are either metadata that describe information about the page or are helping pull in external resources like CSS stylesheets or JavaScript files.
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:
Body Element
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.
Nesting
You might have noticed that I keep referring to HTML elements as “containers.” This is because proper “nesting” is a key part of writing HTML that will work across all browsers, will render all content, will be readable by screen readers, and will be able to be targeted by CSS and JavaScript. In terms of HTML, nesting means exactly what you’d think it might mean: each element goes inside another element, just like nesting dolls are physically “nested” within each other.
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.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <body> </head> <h1><p>Homepage Headline</h1> This is a paragraph.</p> </body> </html>
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.
Conclusion
In this post we’ve learned what HTML is, what an HTML element is, what an HTML tag is, and how a basic HTML page is structured. Do you have any questions about any of these concepts? Leave your questions in the comments!
This post is the first in a series of intro to HTML topics inspired by my HTML workshop at the TechLady Hackathon in August, 2015. This post will be updated with links to the other posts in the series as they are published.
I’m a little bit confused about and I hope you’ll clear my concept.
I was discussing with one of my friend and he told me that
‘DOCTYPE indicates the browser that the file coming up is html and consist of many tags or elements’.
This line of him made me confused and I would appreciate if you answer this one. I wanna know if he is right or is there anything more to the story?
Your friend is right in that the DOCTYPE declaration tells the browser that the following code on the page is HTML, but more specifically it tells the browser which version of HTML the page uses. So it’s saying “Hey browser, interpret this HTML following the rules around X version of the HTML language.”
Html basic
Dear Reader,
regarding the basic HTML page structure I would have expected, that the little example for head and body would have been rendered by a browser as
“Home page Headline
This is a paragraph.”
I don’t understand why
“Homepage Headline”
turns into
“This is a Headline”.
Thank you for your attention
Thanks for this post. As per me every beginner should know about the most commonly used tags.