Get Started to Learn HTML: Four

For the past two days, I had studied HTML from MDN Web Doc,which is provided by Udemy course.

Before I started, I felt so excited and also nerves. Can I really understand the content? What if the code language is too complex to understand? 

Whatever……Not matter what, I told myself just start to learn. If I am too afraid to even open the web page, I would never figure it out. Try first, and then see what would happen. 

As I read through the first part:Getting Started with HTML, I find it is not to difficult to understand the information. By following the instruction, I can start to write some basic HTML element in the test code box, and see the good result. At that moment, I feel so motivated.

Now, I am going to share my study note and thought with you.

What is HTML?

According to MDN, HTML is a markup language used to tell your browser how to structure the web pages to visit.

Image you are building a house, HTML is like your house frame and structure. Before you renovate your house or move furniture inside each room, at least you have an empty house built. Your house needs to have door, window, wall, bedroom, living room, bathroom, kitchen, and maybe some stairs to the second floor. Those things are the most basic elements to a house.

What is Basic HTML Element?

An HTML element includes:opening tag, content, and a closing tag.

(Screenshot From MDN: Get Started to learn HTML)

Like the example above, between the opening tag <p> and closing tag </p>, which means “paragraph”, you write the content inside it. No matter you write one sentence or five sentences inside the tags, the whole thing is counted one HTML element.

Four Basic HTML Element You Must Know:

Nesting Element:

Nesting element is that you put elements inside other elements. 

For example: <p> It is very important to know that.</p>

If you want to bold the word “important”, you need to add an <strong></strong> element inside the <p></p>.

So the new element would be :

<p> It is very <strong> important </strong> to know that.</p>

This code result: It is very important to know that. The “important” is bold.

<strong></strong> tags mean that the word is to be strongly emphasized. By the way, <em></em> tags means italic.

If you want to bold and italic the “important”. The code would be: 

<p> It is very <strong><em>important</em></strong> to know that.</p>

The result: it is very important to know that.

Mistake needs to avoid:

When I first write nesting element, I forgot to put closing tag after “important”, and that results the rest of the sentence bold.So, always remember to put opening and closing tag when you write the element.

Block-level Element:

Block-level elements form a visible block on a page, and they will appear an a new line from whatever content went before it.

Basically, block-level element is that you want to separate the content into different part to make a clear structure on your web page, such as a new paragraph, list of things, navigation menu, etc.

Some most common block-level tags are : <ol> (order list), <ul> (unordered list), <li> (list item), <header> (page header), <p> (paragraph), <aside> (aside content), heading levels <h1> to <h6>.

For example: 

The code uses <p></p> tags which means to separate each word into a new paragraph. The result will be:

You can see that after we insert the block level tag <p></p> between each word, each word will become a new line and start a new paragraph.

Inline Element

Inline elements can be within block-level element, and it will not cause a new line to appear in the document.

From my understanding,the inline element is more like to make some words or sentences special in a paragraph, such as bold, italic, add a link etc.

However, wherever you put the inline element, it would not separate the word or sentence into a new paragraph. In the other word, the paragraph is not going to change.

The most common inline element tags are :<a></a> (hyperlink), <em></em> (italic), <strong></strong> (bold), <img> (image).

For example: 

I copy one paragraph from a website. In the code part, it includes one block-level tag <p></p>, and two inline tag <strong></strong> and <em></em>.

When I put the inline elements, the output paragraph is still remain one paragraph, but the word “free” and “multi-media features” change the style.

From this example, we can see that inline elements can be nested inside in a block-level elements, but a block-level element can not be nested inside in inline element. The block-level element can be nested inside a block-level element.

Empty Element

MDN describes that an empty element is a single tag, which is usually used to insert/embed something in the document at the place it is included. 

If  you want to insert a picture on your web page, you will use <img> tag.

The code would be <img src=”image link or image name from file”>

For example, I want to insert one picture on my web page. The first step is to find a image from Google. Then I would copy the image address by right click the picture, and paste the image link in the tag.

The code would be <img src="http://images4.fanpop.com/image/photos/19900000/cat-fun-funny-never-looked-so-cute-19942391-460-350.jpg”>

At the end, the picture will be showed on your web page.

Therefore, above four elements are the basic HTML elements you must know, and they could be used in every single web page coding. Just practice!