HTML, which means Hypertext Markup Language, indicates a type of front-end markup language used to build the basic structure of a webpage, including headings, paragraphs, images, lists and forms.
HTML is not exactly a programming language, (like JavaScript, which controls and designs the behaviour of the website), but rather a markup language. This means that it is a text-encoding system which can only shape the main structure of the website and define the way a webpage is displayed and rendered in the browser. It is designed to emphasize information architecture and visual hierarchy of the webpage.
However, like every other language HTML has its own syntax and rules to follow. Every HTML text document is made up of so called elements, the basic components of every HTML code. Each element has its own internal structure, but most often it's made of:
-opening tag
- closing tag
- content between the two tags
For example, when including a heading in your webpage, the correct syntax for this code element would be:
<h1>This is your first heading</h1>
In order to write a full HTML document, you should include the following elements:
- <!DOCTYPE html> where !DOCTYPE is required to make sure that the document contains no errors.
- <title></title> opens the document and includes all other elements as part of its content.
- <head></head> follows the html element and includes all the content that won't be displayed on the webpage when you open it in the browser, but it still needed to shape, design and style the document. For example CSS links, keywords and content you want to appear in search results, links to Google fonts you might want to include in the text for your webpage.
- <meta> elements embed metadata in the document without being displayed on the webpage; therefore users can view that can have various attributes including: viewport (which ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down); charset="utf-8"(where the meta element has a charset attribute that allows the browser to recognise special characters and symbols in the webpage. Using the utf-8 character set allows you to cover almost every character an symbol)
- <title></title> the content written between the two tags will be displayed on the browser tab that renders the code and loads the website. It is also used to describe the page when you bookmark/favourite it.
- <body></body> includes all the assets you want to display on your website, such as images, texts, headings, lists, forms, links, contact details and much more.
In addition to that, some elements may include other syntax components. This essay will be dealing with the following main HTML syntax points:
- attributes (attribute names and attribute values)
- nesting elements (in which a main element, called "parent element" contains a second elements inside its content. The will be called a "child element".
- void/empty elements
Some elements may include an attribute (name and value) in their opening tag, to add styling to the content and design the way you want that element to look on the website. For example:
<h1 class:"style-this-this-text">This is your first heading</h1> in which class:"style-this-this-text" in the attribute*. To design this particular heading, you can copy the attribute value "style-this-this-text" into the CSS document and change font family, font size, font weight, colour, spacing, kerning and much more.
*heading tags go from <h1> to <h6>
Elements can include secondary elements (called nesting elements) in their main content. Nesting elements are full elements that have start and closing tags and an elements content, written inside of the main element. For example:
<h1>This is your <i>first<i> heading</h1> in which <i>first<i> is the nested element, used to isolate the content "first" from the rest of the heading and give it specific importance. You can use the <i> element to display its content in italic, ot further style it giving a separate class to the <i> tag.
Void/empty elements are so called because they only have an opening tag, and therefore no content to inner content to embed. For example the <br> tag, which only separates two sentences from one another, the <link> tag which embeds metadata (links) to other code documents (Such as CSS and JavaScript) to the main HTML code, and finally the <img> element which is only used to display and image on the website.
SPECIAL CASES NOTES
Some html tags ma be confused with one another as they render the same visual outcome on the browser. However they should not be confused as their semantic meaning is different,however neither is for purely decorative purposes, as that's what CSS styling is for. Below is a brief list of these special tags:
1) <em> and <i>: both of these tags italicize the content, however, as the word suggests, the <em> (emphasis) tag is used to highligh content that is in implicit or explicit contrast with what is stated above or has been stated in the previous text. To give an idea, if we were reading out loud or talking to someone, we would use verbal stress to highlight particular words or sentence and make them stand out from the rest of the sentence. For example: "I told you to clean your room"", or "I told you to clean your room!". When speaking, we would stress different words depending on the context: we would stress YOUR in the first sentence, and YOU in the second. In the same way, when we are coding, we should stress and highlight those specific words with the <em> tag.
On the other side, the <i> tag is used to underline specific words that stand out of the normal prose, such as words and expressions in foreign languages, dictionary definitions, figures of speech, metaphors.
HTML
<h3>This is <i>your</i> third heading!<br>This heading is a secondary title.</h3>
This whole sentence is an element.
Where This is <em>your</em> third heading!<br>This heading is a secondary title is the content of the element; <h3> is the opening tag of the element (third heading); </h3> is the closing tag; <em>your</em> is the nested element (<em> tag isolates its content from the rest of the main element by emphasizing it and also making it appear in italics; your is the nesting element content and </em> is its closing tag; <br> is the void tag, which embeds no content, it only represents a line break between the first sentence This is your third heading! and the second one This heading is a secondary title.
If rendered in a browser, the sentence would appear like this on the interface of the webpage:
This is your third heading!
This heading is a secondary title.
Reference list
- Docs, M. W. (2021). HTML: HyperText Markup Language. Hentet fra MDN Web Docs: https://developer. mozilla. org/en-US/docs/Web/HTML.
Comments