main.append(addSubHeader("The Syntax of HTML elements"));
main.append(addParagraph("HTML markup conveys both content and meaning, For example, a <p> element allows you to define a paragraph but it also tells you that it is a paragraph. This is probably clearer when you use a more modern semantic tag such as <article> which would typically have several elements nested inside. For example, you might have an <h1> element, perhaps some additional elements and almost certainly, some <p> elements."));
main.append(addParagraph("So, in essence, the tags not only define the content, but they also give you some indication of what the content means. Of course, this will be invisible to someone viewing the website in the conventional way, through a browser. This is something you will only see if you examine the source code (in other words, the HTML)."));
main.append(addSubHeader("Paragraphs"));
main.append(addParagraph("One of the most important reasons for putting paragraphs inside a <p> tag is that the browser recognises the tag and so knows when to start a new paragraph and so on. So this is formatting your text in much the same way as you would press return to go to a new line to create a new paragraph in a word processor."));
main.append(addParagraph("It may be worth mentioning here that you can try out HTML code at <a href = \"https://codepen.io/pen/\">CodePen</a> which allows you to type in some HTML and immediately see what this will look like in a web page. Figure 1 shows an example of this."));
main.append(addImageWithCaption("./images/image1.png","Figure 1 - the codepen website"));
main.append(addSubHeader("Headings"));
main.append(addParagraph("In HTML, there are 6 levels of heading ranging from <h1> up to <h6>. Typically, the smaller the number, the larger the text. So, for example, an element marked up with an <h1> tag is going to be larger than an element marked up with an <h2> tag and so on. There is also a semantic meaning in the sense that an <h1> tag is more important than an <h2> tag and so on. For example, you might mark up the title of the page with an <h1> tag. If the page has a number of articles, the name of each article might be marked up with an <h2> tag and if the article has sub-headings, you might us an <h3> tag for that. This is similar to how the headings work in Word. For example, when I am writing up notes for a LinkedIn Learning course, I typically use Heading 1 for chapter headings and heading 2 for the title of each video in that chapter. If I want to display some sub headings within the notes for a video, I might also use heading 3. This is analogous to a tree structure where you have the chapters marked up with heading 1 and this becomes the root of the tree. On a particular page, there could be any number of these chapters. Within each chapter, there may be any number of videos marked up with heading 2 so these represent the next level of the tree. If I used heading 3, this becomes the third level of the tree and so on. So any paragraph displayed as heading three will be inside the notes for the relevant video which will be inside the relevant chapter and so on."));
main.append(addSubHeader("Bold and Italics"));
main.append(addParagraph("For italics, we have two tags. These are <i> and <em>. The reason for having two is that they are slightly different. We use <i> when we want to italicise the text without necessarily adding an emphasis. The <em> tag is used when we want to italicise and emphasise the text. Visually, they will look the same, but if you look at the HTML code, these are conveying different meanings and help to demonstrate the meaning or the reason for using italics. It can also help a visually impaired user who is using a screen reader to access your web page because the <em> tag will cause the screen reader to verbally emphasise that text but the <i> tag will not."));
main.append(addParagraph("Similarly, we have two tags for bold, <b> and <strong>. Again, the <b> tag is intended to be visual only whereas the <strong> tag is intended to convey meaning and will also be treated differently by a screen reader."));
main.append(addSubHeader("Lists"));
main.append(addParagraph("There are three types of list in HTML. Unordered lists, ordered lists and definition lists. The first two are very similar, the only difference really being that ordered lists tend to be numbered whereas unordered lists use bullet points. Unordered lists are placed inside an <ul> element, ordered lists inside an <ol> and dfeinition lists inside a <dl>. Here are examples of these"));
main.append(addParagraph("Note that the individual list items in both the ordered and unordered lists are enclosed in an <li> tag.","<\ol>"));
main.append(addParagraph("A definition list is different in that each list item is a key value pair. The list itself is enclosed in a <dl> tag. The key (or term) is enclosed in a <dt> tag - for definition term. The value or description is enclosed in a <dd> tag - for definition description. For each term (or <dt> tag, you can have one or more definition descriptions or <dd> tags."));
main.append(addParagraph("Here is an example of a definition list."));
main.append(addParagraph("You may notice that this is not really in keeping with the spirit of a definition list since the descriptions are not really defining the term but this is just intended to show you what a definition list looks like."));
main.append(addParagraph("Another point worth making is that the items in a list may not actually look like list items. For instance, the list might be a 'list' of images and perhaps the items might be links associated with these images. The point is that links can be quite versatile. Also, they have a default appearance but you can use CSS to change the appearance so again, a list may not look exactly like the sort of default list you might expect to see."));
main.append(addSubHeader("Quotes"));
main.append(addParagraph("When we talk about quotes in HTML. We are talking about two distinct things. The first thing is where we are featuring a quote in our text and we want it to be recognised as a quote, not just by the person reading the web page, but also by people reading the source code or even other computers scanning the page content. The second thing is formatting text so that it looks like a quote in that it is wrapped in quote marks."));
main.append(addParagraph("The first point here is really related to semantics, and as we saw before, we often use particular tags not only because they format the text or allow us to format the text through styling, but also because they provide an appropriate semantic context. A very simple example of this is where we are using a paragraph tag - <p> - to hold a paragraph"));
main.append(addParagraph("Another concept related to this is the use of nesting of elements in order to provide additional contextual meaning. Let's examine this in relation to a quote. If we want a quote to appear in a block on the webpage, we can put it inside a <blockquote> element."));
main.append(addParagraph("Inside the element, we might have two sub elements. A <p> element to contain the quote and a <cite> element to contain a citation for the quote. To see how this will work, the following paragraph is a block of text contained inside a <blockquote> element"));
main.append(addSyntax(["<blockquote>Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.</blockquote>"]));
main.append(addParagraph("So we haven't applied any styling to the quote so you are seeing the default option for the way in which the browser handles a <blockquote> element. This would most likely look like an ordinary paragraph except with a slight indentation."));
main.append(addBlockquote(["Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking."," "]));
main.append(addParagraph("Putting your quote inside a blockquote element may nit look any different in the page, but it will make the code a little clearer. As a further amendment, we will also add a citation, in this case, that will simply identify the person who is being quoted. We will add this inside a <cite> element."));
main.append(addBlockquote(["Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.","Steve Jobs"]));
main.append(addParagraph("So, again, we haven't applied any styling to the <cite> element, so we are seeing the default option for the browser which, for me, means that it is indented to the same degree as the quote. In addition, the citation is in italics."));
main.append(addParagraph("For reference, the full <blockquote> element is shown below, including the HTML tags."));
main.append(addParagraph("So, if we inspect the code for our quote, we can see the intent. We can see that the quote itself is inside the <p> and the citation is inside a <cite> element so it is quite clear from the code (although, in this example, it is probably perfectly clear in any case) what it is that we are looking at here."));
main.append(addParagraph("If the benefit here was limited to just identification of the sub-parts of the quote, the benefit is quite limited. However, there are a couple of additional benefits. For example, we can use these elements to add some styling. For example, we can add a CSS rule for <blockquote> so that all of our quotes appear with a different font, size, colour and so on and we can similarly add some styling to the citations if we want."));
main.append(addParagraph("Now, the second part of this is quote marks. If we want a quote to appear \"like this\", we can simply add the quote marks to the text in a paragraph. However, we can also use a <q> tag which has the same effect. Again, this is helping us by displaying the text as we want it to be displayed, but also provides an element we can style. This perhaps, also makes an earlier point a little clearer. Let's say we want to scan a web page for quotations, the <q> tag is probably a little easier to find than quote marks and it is easier for another computer, for example a search engine to detect quotes in our web page. Bear in mind that the quote marks themselves may be a good indicator that some text in our page is a quotation, but quote marks might be used for other reasons so the <q> tag is probably a more reliable method for location a quotation within the text."));
main.append(addParagraph("The <q> tag also demonstrates another concept in HTML. That is, the concept of the inline element. An inline element is one that appears inside another element. For example, we might have a <p> tag with some text inside it. Within that text, we might include additional tags within the paragraph to modify the appearance of just a part of the paragraph. For example, we might want to use a tag to make a work (or several) appear in bold or italics."));
main.append(addParagraph("In contrast, some elements are block elements. That is, they will create a separate block of text. The <p> element itself is a good example of this, as is the <blockquote> element. More information on both of these, as well as a list of inline and block element can be found on the <a href=\"https://www.w3schools.com/html/html_blocks.asp\">w3.schools.com</a> website."));
main.append(addSubHeader("Dates and Times"));
main.append(addParagraph("Let's say that we want to add a date to our website. We could do this simply by adding the date as text as in the following paragraph."));
main.append(addParagraph("<p>The date today is 18 April 2021.</p>"));
main.append(addParagraph("The problem is that there is nothing here to tell the computer that there is a date in our page. We can get around this by putting the date inside an HTML tag, <time>. This is shown in the next example."));
main.append(addSyntax("[<p>The date today is <time>18 April 2021</time>.</p>"));
main.append(addParagraph("So, this tells the computer that there is a date or a time in our page, but the actual text can be anything we like. For example, instead of 18 April 2021, I could have put today or three weeks ago. I could also have put the date in a different format such as April 18 2021, 18/4/2021, Apr 2021 and so on. The point is that the <time> adds some semantic value to the page in that the computer can tell that there is a date there, but this doesn't tell the computer what that date is and that may be important for search engines or it may be used, for example, to set a date reminder if you want to add an event from the page to your calendar. If we want the computer to be able to identify the date, we need to add this as an attribute, the datetime attribute, to the time tag in a pre-defined format. Actually, there is some flexibility there but in general, we need to follow the prescribed pattern."));
main.append(addParagraph("The value of the date attribute should be in the format, YYYY-MM-DD. You can also add the time on to this, separated from the date by a space or the letter T. Adding the attribute to the example shown above gives us"));
main.append(addSyntax("[<p>The date today is <time datetime=\"2025-04-18\">18 April 2021</time>.</p>"));
main.append(addParagraph("If we add the time, this would give us"));
main.append(addSyntax("[<p>The date today is <time datetime=\"2025-04-18T11:59:00\">18 April 2021</time>.</p>"));
main.append(addParagraph("or"));
main.append(addSyntax("[<p>The date today is <time datetime=\"2025-04-18 11:59:00\">18 April 2021</time>.</p>"));
main.append(addParagraph("We could also omit the date and specify just the time. For more information, the official documentation for the time element can be found <a href = \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\">here</a>."));
main.append(addSubHeader("code, pre and br"));
main.append(addParagraph("Just a reminder here, many elements provide some semantic structure to our document, but they provide some additional benefits such as giving us the flexibility to style text that has a specific semantic purpose. For example, let's say we want to add some code to a web page. That is, we want to display some text as though it were code. An example of this would be the HTML code shown earlier."));
main.append(addParagraph("For code, we do have a tag called code. Again the purpose of the tag is to tell the computer that we have some code on our page, but we can also make that code stand out by, for instance, changing the colour or size of the font. By default, code will appear in a monospaced font. It is also worth noting that if we want to include HTML code, this can be a problem because if we type out an HTML tag, intending the browser to display the tag in full like this"));
main.append(addSyntax("[<p>This is a paragraph.</p>"));
main.append(addParagraph("The browser would recognise that these are HTML tags and so we would see this."));
main.append(addSyntax("[This is a paragraph."));
main.append(addParagraph("The first example shows the tags because I replaced the greater than and less than signs that denote a tag with HTML entities. An HTML entity is similar to an escape character in that it is intended to let the browser know that you don't want the symbol to be interpreted in the usual way. In this case, you want the tag to be visible."));
main.append(addParagraph("Conversely, it is difficult to show an HYML entity because if you add one to your HTML code, the webpage will display the corresponding symbol. An entity is made up of an ampersand and terminate with a semi-colon. In between, you have some letters to denote the symbol. For example, the HTML entity for the less than sign is"));
main.append(addSyntax("[&lt;"));
main.append(addParagraph("Similarly, the HTML entity for the greater than sign is"));
main.append(addSyntax("[&lt;"));
main.append(addParagraph("As you can see, the text in this page includes a lot of examples of HTML code and I use these HTML entities to make that possible. I also used another HTML entity to allow me to display an HTML entity. This is a simple little trick where we replace the ampersand in the entity with the HTML entity for an ampersand which is"));
main.append(addSyntax("[&amp;"));
main.append(addParagraph("There is a fairly comprehensive list of these entities on the <a href=\"https://dev.w3.org/html5/html-author/charref\">W3 Org</a> website."));
main.append(addParagraph("As a general rule, any white space you include in your HTML code is going to be ignored by the browser. As a rule, the only spaces in your code that you will see in the page are the spaces between words. If you put any blank lines in the HTML or indentation, which you may want if the text on your page includes some code. this is going to be ignored. HTML provides a couple of handy tags which help with this and they are the <br> tag and the <pre> tag. The <br> tag is quite simple and it is one of the few HTML tags that doesn't require a closing tag. If you think about it, it should be obvious why this isn't required. Unlike a <p> tag, for example, there is no need to tell the browser where the tag ends, it justs prints a blank line and then goes on to the next element."));
main.append(addParagraph("The <pre> tag does have to be closed and it is a bit more complex. Essentially, if you want to display a block of text with indentation, you can put it inside a <pre> tag and any indentation between the opening and closing tags will be preserved. As an example, our HTML code might look like this if we don't use a <pre> tag."));
main.append(addInsetCodeListing(["<p>"," This is a paragraph."," This is some indented text.","<\p>"]));
main.append(addParagraph("In the page, this will look like this."));
main.append(addSyntax("This is a paragraph. This is some indented text."));
main.append(addParagraph("If we put this inside a <pre> tag, our HTML code will look like this."));
main.append(addInsetCodeListing([" <pre>"," This is a paragraph."," This is some indented text.","<\pre>"]));
main.append(addParagraph("In the page, we will see this."));
main.append(addInsetList([" This is a paragraph."," This is some indented text."]));
main.append(addParagraph("So, when it comes to displaying code in your page, the <pre> tag is extremely useful and you will probably use it a lot. If you examine the HTML code for this page, for example, you will see that it is all over the place."));
main.append(addParagraph("You might also notice that I don't tend to use the <code> tag. Rather, I have used a <p> tag for code and given it a class of \"code\". This allows me to add styling to anything in the page that I want to stand out as code. For example, I might make it a different colour, make it bold, make it a different size and style it in any number of different ways. You can also do that if you use the <code> tag, but you would also have the added benefit that the computer can detect the fact that there is code in your page and this may be helpful for search engines or screen readers because it is adding a semantic element to your code."));
main.append(addSubHeader("Superscripts. Subscripts and Small Text"));
main.append(addParagraph("I don't think that it is really necessary to describe what either a superscript or a subscript is. Suffice it to say, a superscript is created with a <sup> tag and a subscript is created with a <sup> tag. Let's see an example of each."));
main.append(addParagraph("We can use a superscript to show something like 5 squared. The code would be 5<sup>2</sup>. The result will look something like this."));
main.append(addSyntax("[5<sup>2</sup>"));
main.append(addParagraph("Similarly, if we want to show the chemical formula for water, the code will be H<sub>2</sub>O. The output will look something like this."));
main.append(addSyntax("[H<sub>2</sub>O"));
main.append(addParagraph("Although we can use superscripts and subscripts to create mathematical formula, there is a better way which is outside the scope of this course. This is MathML and it is a bit more powerful than standard HTML if you need to add some mathematical content to your page. The Mozilla documentation has a page devoted to MathML called <a href=\"https://developer.mozilla.org/en-US/docs/Web/MathML/Element\">MathML element reference</a>. To be honest, this is probably something you would just look up as and when required if you do need it."));
main.append(addParagraph("If we want some part of the text to be smaller than a standard paragraph, such as when adding small or fine print to a footer, we can use the <small>. This isn't just used to make the text appear smaller and, in fact, it doesn't necessarily have to be smaller. Again, the main benefit of the tag is that it adds some semantic information to our page. It literally identifies the text as being the \"small\" print!"));
