HTML - Getting started with HTML

Getting started with HTML

What is HTML?

HTML(Hypertext Markup Language) is a markup language that tells web browsers how to structure the web pages you visited. The enclosing tags can make content into a hyperlink to connect to another page(a), italicize words(i em), and so on.

Anatomy of an HTML element

HTML element = Opening tag + Content + Closing tag

<p>My cat is very cute</p>

Note
Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. e.g. <title> tag could be written as <Title> or <TiTlE>, etc. However, it is best practice to write all tags in lowercase for consistency and readability.

Block vs inline elements

Block elements: Block-level elements for a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line.

  <address> <article> <aside> <blockquote> <canvas>
  <dd> <div> <dl> <dt> <fieldset>
  <figcaption> <figure> <footer> <form> <h1>-<h6>
  <header> <hr> <li> <main> <nav>
  <noscript> <ol> <p> <pre> <section>
  <table> <tfoot> <ul> <video>

Inline elements: Inline elements are contained within block-level elements, and surround only small parts of the document's content(not entire paragraphs or groupings of content, like em a, etc.). An inline element will not cause a new line to appear in the document.

  <a> <abbr> <acronym> <b> <bdo>
  <big> <br> <button> <cite> <code>
  <dfn> <em> <i> <img> <input>
  <kbd> <label> <map> <object> <output>
  <q> <samp> <script> <select> <small>
  <span> <strong> <sub> <sup> <textarea>
  <time> <tt> <var>

Block-level elements & Inline elements - W3Schools

Empty elements

Elements without content are called empty elements. The common structure of empty elements can be, Empty elements = Opening tag + Attributes in opening tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. For example, the <img> element embeds an image file onto a page.

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
/>

Empty elements are sometimes called void elements.
Note: In HTML, there is no requirement to add a / at the end of an empty element's tag, for example: <img src="images/cat.jpg" />. However, it is also a valid syntax and you may do this when you want your HTML to be valid XML.

Attributes

Attributes contain extra information about the element that won't appear in the content. An attribute should have:

A space between it and the element name.(For an element with more than one attribute, the attributes should be separated by spaces too.)
The attribute name, followed by an equal sign.
An attribute value, wrapped with opening and closing quote marks.

<!-- class is the attribute name and editor-note is the attribute value -->
<p class="editor-note">My cat is very cute</p>

Boolean attributes
Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example,

<input type="text" disabled="disabled" /> <input type="text" disabled />

Anatomy of an HTML document

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<!DOCTYPE html>: All HTML documents must start with a <!DOCTYPE> declaration. The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect. In HTML5, the declaration is simple: DOCTYPE - W3Schools

   <!DOCTYPE html>

<html></html>: The <html> element. This element wraps all the content on the page. It is sometimes known as the root element.
<head></head>: The <head> element. This element acts as a container for everything you want to include on the HTML page, that isn't the content the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more.
<meta charset="utf-8">: The <meta> element. This tag defines metadata about an HTML document. Metadata is data(information) about data. <meta> tags always go inside the
element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers(how to display content or reload page), search engines(keywords), and other web services. The charset attribute sets the character set for your document to UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. meta - W3Schools
<title></title>: The <title> element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.
<body></body>: The <body> element. This contains all the content that displays on the page, including text, images, videos, games, playable audo tracks, or whatever else.

Whitespace in HTML

No matter how much whitespace you use inside HTML element content(which can include one or more space character, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. You will use whitespace to make the code more readable. For example, if you need to nest element:

<p>
  My cat is
  <b>very cute</b>
</p>

Entity references: Including special characters in HTML

In HTML, the characters <, >, ", ' and & are special characters. They are parts of the HTML syntax itself. You use them with character references. Each character reference stars with an ampersand(&), and ends with a semicolon.

<   &lt;
>   &gt;
"   &quot;
'   &apos;
&   &amp;

See more in List of XML and HTML character entity references - Wikipedia

HTML comments

To write an HTML comments, wrap it in the special markers . For example:

<!-- I am a comment -->

Blog