{"id":654,"date":"2020-01-02T19:08:42","date_gmt":"2020-01-03T00:08:42","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=654"},"modified":"2025-05-20T17:59:44","modified_gmt":"2025-05-20T17:59:44","slug":"html-tags","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/html-tags\/","title":{"rendered":"HTML Tags"},"content":{"rendered":"\n
\"Close
Photo by Caspar Camille Rubin<\/a>.<\/figcaption><\/figure>\n\n\n\n

Open a new HTML file in Visual Studio Code and save it as tags.html<\/strong> locally in your playground folder.<\/p>\n\n\n\n

Copy and paste the HTML boilerplate<\/a> or let VSC autofill the boilerplate for you by typing html and then selecting html:5<\/code> from the dropdown options.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Document<\/title>\n<\/head>\n<body>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Within the <body><\/body><\/code> tags, copy and paste the following code (do not include the <body> tags below as those are already in your boilerplate):<\/p>\n\n\n\n
<body> \n    <h1>Main Heading<\/h1>\n    <h2>Subheading<\/h2>\n    <h3>Another Slightly Smaller Subheading<\/h3>\n    <p>This is the paragraph section<\/p>\n<\/body> <\/code><\/pre>\n\n\n\n
Save your work (click \u2318<\/em>+s if you’re on a Mac or Control+S if you’re on a Windows machine). Once it’s saved, right-click on the test.html file that you just created and click “Open with Chrome” to preview your work. 1<\/a><\/sup> Hey, you made a webpage! Pretty cool, right? It should look like what you see below (with different fonts).<\/p>\n\n\n\n
\n
Main Heading<\/h1>\n\n\n\n
Subheading<\/strong><\/h2>\n\n\n\n
Another Slightly Smaller Subheading<\/strong><\/h3>\n\n\n\n
This is the paragraph section.<\/p>\n<\/div>\n\n\n\n
HTML Elements<\/h3>\n\n\n\n
HTML elements are how developers structure the content and information on websites. You’ve seen them before in brackets: < ><\/code><\/strong>. Everything inside those brackets are called an HTML element. 

For instance, <body><\/body><\/code> is an HTML element. Elements are often, but not always, made up of an opening tag (<body><\/code>) and a closing tag (<\/body<\/code>). 

Can you tell the difference between the opening and closing tags? The forward slash, \/<\/code><\/strong>,  indicates the closing tag. HTML elements tell the browser how to display the content placed in between the tags.

For instance, <h1><\/code> is telling the browser this is a main heading2<\/a><\/sup>. The browser knows everything from <h1><\/code> to <\/h1><\/code> is main heading. 

<h2><\/code> is telling the browser the words from <h2><\/code> to <\/h2><\/code> should be displayed as a subheading. And so on and so forth! 

You can think of tags as boxes. The opening tag (<p><\/code>) is a box, and the closing tag (<\/p><\/code>) is the box lid. Everything inside the box is what you specify it to be.<\/p>\n\n\n\n
Those letters in the tags (h1, h2, p, etc) aren\u2019t random. These characters are part of the HTML syntax3<\/a><\/sup> and express the tag\u2019s purpose.<\/p>\n\n\n\n
Hold up! What even is HTML?<\/h3>\n\n\n\n
HTML files control the structure<\/strong> of web pages.

HTML5, HyperText Markup Language, is the standard markup language of the web. These HTML tags are called \u201cmarkup.\u201d HyperText describes the way that HTML files use links to quickly jump around.<\/p>\n\n\n\n
Free Code Camp<\/a> also offers a nice description of HTML:<\/p>\n\n\n\n
The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links used by the browser to navigate to the reference document, so the user could read the reference document without having to manually search for it.<\/p>\n\n\n\n
As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5.<\/p>\n\n\n\n
For more background info about HTML, check out this article.<\/a><\/p>\n\n\n\n
White space<\/h3>\n\n\n\n
White space can make your code cleaner and easier to read. Your browser will not <\/strong>display this white space, so feel free to indent or add spaces to your heart\u2019s content.<\/p>\n\n\n\n
Fun tip: If your browser comes across two spaces next to each other, it only displays one space.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
<!doctype html> \n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">     \n   <title>Hello world!<\/title> \n<\/head> \n   <body> \n    <h1>Main Heading<\/h1>\n    <h2>Subheading<\/h2>\n    <h3>Another Slightly Smaller Subheading<\/h3>\n    <p>This is the paragraph section<\/p>\n   <\/body> \n<\/html><\/code><\/pre>\n\n\n\n
Displays the same as:<\/p>\n\n\n\n
 <body>\n    <h1>Main\n        Heading<\/h1>\n    <h2>Subheading   <\/h2>\n    <h3>Another    Slightly    Smaller   Subheading<\/h3>\n    <p>This is the    paragraph section<\/p>\n <\/body> <\/code><\/pre>\n\n\n\n
That being said, please don’t format your HTML the second way\u2014that’s just to illustrate the point that white space doesn’t impact your output.<\/p>\n\n\n\n
This is true of your entire HTML file, not just the body section. Throughout the semester, try to keep your code organized and easy to scan. It\u2019s best practice NOT <\/strong>to put all of your code on one line, like this:<\/p>\n\n\n\n
 <body>\n    <h1>Main Heading<\/h1><h2>Subheading<\/h2><h3>Another Slightly Smaller Subheading<\/h3><p>This is the paragraph section<\/p>\n <\/body> <\/code><\/pre>\n\n\n\n
Can you tell why? It\u2019s hard to read.<\/strong> You can\u2019t tell where one HTML element is closing and another one begins.4<\/a><\/sup><\/p>\n\n\n\n
Formatting Your HTML<\/h3>\n\n\n\n
Being aware of how white space works in an HTML document is important for writing code that’s easy to read, but indenting and formatting your HTML properly is equally important.<\/p>\n\n\n\n
You can check out some best practices for formatting and indenting your HTML<\/a> here. When your code is easy to read it makes YOUR life easier, and it makes it much easier for your instructor to assess your work– and out in the “real world” writing code is often a collaborative process where teammates or clients might need to see what’s going on under the hood. Build good habits right from the beginning and make sure your code is tidy and easy to read by following these<\/a> guidelines!<\/p>\n\n\n\n
Your turn!<\/h3>\n\n\n\n
In your VS Code test document, try out the following challenges! 

<\/strong>A) How many levels of headings (h1<\/code>, h2<\/code>, h3<\/code>, etc) can you find in HTML? Type them in test.html and see!
B) How do you create more paragraphs? Hint: you will have to repeat certain tags. 
C) What happens when you add text in between these elements: <b><\/code> type some text in here <\/b><\/code>
D) What happens when you add text in between these elements: <em><\/code> and <\/em><\/code>? How about <i><\/code> and <\/i><\/code>? 
E) <hr\/><\/code> is an element that only has one tag <\/strong>rather than an opening and closing. Add it between your two paragraphs. What does it do? 

When you\u2019re done, be sure to save your file and refresh your Chrome browser window to see what you created.<\/p>\n\n\n\n
If you get stuck, click page 2 for some hints! 
<\/p>\n\n\n\n\n\n\n\n
Answers: <\/strong><\/p>\n\n\n\n
A) Six 
B) By closing one paragraph with the closing tag <\/p><\/code>), and starting the new paragraph with another opening tag: <p><\/code>. 
C) The <b><\/code> tag makes words bold. 
D) The <em><\/code> tag italicizes words. If you used <i><\/code> you’d get the same result, but <em><\/code> is used when you want to emphasize a word whereas <i> indicates the text should be in italics, like a book title, but doesn’t mean it’s especially important. 
E) <hr\/><\/code> displays a horizontal line<\/p>\n\n\n
  1. If Chrome isn’t on the list of options to open the file with, no worries! First, make sure you have Chrome downloaded onto your computer. If you do, but it still isn’t showing up under the “Open with” options, click “Other” at the bottom of the “Open with” list and search for Chrome. Select it and click Open. \u21a9\ufe0e<\/a><\/li>
  2. Fun fact: You typically only have 1 (or less) h1 element per page as h1 is reserved for the top-most header, such as a page title. \u21a9\ufe0e<\/a><\/li>
  3. Syntax is like the set of rules that determine how you write the code.\u00a0It’s similar to grammar in a language,\u00a0where specific arrangements of words create meaningful sentences.\u00a0In HTML,\u00a0elements,\u00a0attributes,\u00a0and values must be organized in a specific way to create a well-formed webpage. \u21a9\ufe0e<\/a><\/li>
  4. It will take your instructor much, much longer to help you if your code is not formatted well. \u21a9\ufe0e<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"
    Open a new HTML file in Visual Studio Code and save it as tags.html locally in your playground folder. Copy and paste the HTML boilerplate or let VSC autofill the boilerplate for you by typing html and then selecting html:5 from the dropdown options. Within the <body><\/body> tags, copy and paste the following code (do […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"[{\"content\":\"If Chrome isn't on the list of options to open the file with, no worries! First, make sure you have Chrome downloaded onto your computer. If you do, but it still isn't showing up under the \\\"Open with\\\" options, click \\\"Other\\\" at the bottom of the \\\"Open with\\\" list and search for Chrome. Select it and click Open.\",\"id\":\"a22d84d9-9348-47dc-a613-dc7d0f747003\"},{\"content\":\"Fun fact: You typically only have 1 (or less) h1 element per page as h1 is reserved for the top-most header, such as a page title.\",\"id\":\"6bdb6574-8cd1-447b-a290-b78d1b5b2980\"},{\"content\":\"Syntax is like the set of rules that determine how you write the code.\u00a0It's similar to grammar in a language,\u00a0where specific arrangements of words create meaningful sentences.\u00a0In HTML,\u00a0elements,\u00a0attributes,\u00a0and values must be organized in a specific way to create a well-formed webpage.\",\"id\":\"8020bab9-0841-49b1-987d-03c6454897cc\"},{\"content\":\"It will take your instructor much, much longer to help you if your code is not formatted well.\",\"id\":\"66ab40c8-a645-44ac-88de-6e99df2662e7\"}]"},"class_list":["post-654","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":20,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/654\/revisions"}],"predecessor-version":[{"id":6131,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/654\/revisions\/6131"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}