WHAT IS HTML?
HTML is a computer language. It is the foundation of the World Wide Web and forms the basis of most web pages.
It’s important to note that HTML is not a programming language. Technically it is known as a “markup” language, hence the name HyperText Markup Language.
The reason this is significant is that programming languages are quite complex and require a great deal of effort to master, whereas HTML is not. HTML is a very simple language and is quite easy to learn.
In addition, you can learn small parts of the language and still get a lot of benefits. You don’t need to know the whole language at all, although obviously the more you know the better.
HTML BOILERPLATE
HTML Boilerplates are known as HTML templates. The typical structure of HTML boilerplate will look like below
THE DOCTYPE
Document Type Declaration, or doctype. This is simply a way to tell the browser what type of document it’s looking at.
In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of any HTML file.
THE HTML ELEMENT
HTML document is the html element, which has not changed significantly with HTML5. In XHTML-based syntax, you’d be required to include an xmlns attribute. In HTML5, this is no longer needed for the document to validate or function correctly.
THE HEAD ELEMENT
The HEAD element Information in the HEAD element corresponds to the top part of a memo or a mail message.
It describes the properties of the document such as the title, the document toolbar, and additional meta-information.
The first line inside the head is the one that defines the character encoding for the document. utf-8 is the value you’ll be using in your documents.
THE TITLE ELEMENT
The HTML title tag contains the title of the document which displays at the top of the browser window or is used as the Bookmark name when adding a web page to your Favorites.
THE BODY ELEMENT
The body element appears after the head element in the page. It should contain all the content of your web page: text, images, and so on. All web pages have 1 single body element, with the exception of frameset pages, which contain frame elements instead.
HTML TAGS
An HTML code that defines every structure on an HTML page, including the placement of text and images and hypertext links. HTML tags begin with the less-than (<) character and end with greater-than (>). These symbols are also called “angle brackets.” While the opening tag only contains (<>), the closing tag contains an additional “/” as (</>).
Any Opening and Closing tag without the other would result in an error in the code.
Lets see some of the important and basic tags used
HEADING TAG
Headings let you break up your page content into readable chunks. They work much like headings and subheadings in a book or a report.
HTML actually supports 6 heading elements: h1, h2, h3, h4, h5, and h6.
h1 is for the most important headings, h2 is for less important subheadings, and so on. Typically you won’t need to use more than h1, h2 and h3, unless your page is very long and complex.
These are the heading tags, once you save as the code and open it in the browser. The output will be like below
A PARAGRAPH TAG
The p element lets you create paragraphs of text. Most browsers display paragraphs with a vertical gap between each paragraph, nicely breaking up the text.
While you can create “paragraphs” of text just by using <br> tags to insert blank lines between chunks of text, it’s better to use p elements instead.
Not only is it neater, but it gives browsers, search engines, and other non-humans a better idea of how your page is structured.
In the browser, the output looks like
A good rule of thumb when writing text for the web is to make sure that each paragraph contains a single point, topic or thought. If you want to talk about 2 different things, use 2 paragraphs.
ANCHOR TAG
One of the most important elements in a web page, the element lets you create links to other content. The content can be either on your own site or on another site.
To create a link, you wrap <a> and </a> tags around the content you want to use for the link, and supply the URL to link to in the <a> tag’s href attribute.
Links should be given in the href and text for the link should be wrapped inside the tags.
IMAGE TAG
The img element lets you insert images into your web pages. To insert an image, you first upload the image to your web server, then use a <img> tag to reference the uploaded image filename
The output will show the whole image in the browser. More details about inserting local images and external URL images would be discussed during the class.
DIV TAGS
The div element is a generic container that you can use to add more structure to your page content. You might group several paragraphs or headings that serve a similar purpose together inside a div element. Typically, div elements are used for things like:
- Page headers and footers
- Columns of content and sidebars
- Highlighted boxes within the text flow
- Areas of the page with a specific purpose, such as ad spots
- Image galleries
By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs. This is the basis for creating CSS-based page layouts.
SPAN TAG TEXT FORMATTING
The span element is similar to div in that it’s used to add structure to your content. The difference is that div is a block-level element, while span is an inline element:
- Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
- Inline elements, such as span, a, and img, are designed to hold smaller pieces of content such as a few words or a sentence within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.
As with a div, you often add a class and/or id attribute to a span so that you can style it using CSS.
The following example uses span elements to indicate product names within a paragraph. These product names could then be highlighted using CSS. A custom search engine could also potentially use the information provided by the span elements to identify the products within the page.
TEXT FORMATTING
While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply specifific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text.
The <mark> element is new in HTML5 and is used to mark or highlight text in a document “due to its relevance in another context”.
Bold, Italic, and Underline
Bold Text
To bold text, use the <strong> or <b> tags: <strong>Bold Text Here</strong> or <b>Bold Text Here</b>
What’s the difffference? Semantics. <strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text, while <b> indicates no such importance and simply represents text that should be bolded.
Italic Text
To italicize text, use the <em> or <i> tags:
What’s the difffference? Semantics. <em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> simply represents text which should be set offff from the normal text around it.
Underlined Text
While the <u> element itself was deprecated in HTMl 4, it was reintroduced with alternate semantic meaning in HTML 5 – to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.
<p>This paragraph contains some <u>mispelled</u> text.</p>
Abbreviation
To mark some expression as an abbreviation, use <abbr> tag:
<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>
If present, the title attribute is used to present the full description of such abbreviation.
Inserted, Deleted, or Stricken
To mark text as inserted, use the <ins> tag:
<ins>New Text</ins>
To mark text as deleted, use the <del> tag:
<del>Deleted Text</del>
To strike through text, use the <s> tag:
<s>Struck-through text here</s>
Superscript and Subscript
To offffset text either upward or downward you can use the tags <sup> and <sub>.
To create superscript: <sup>superscript here</sup> To create subscript: <sub>subscript here</sub>
Bringing all that you have learned so far, the developed code block will be as below
For more reference on HTML take a look the link below