HTML, WordPress and website content II: HTML Elements
HTML elements are the building blocks of HTML pages. They usually consist of a start tag (opening tag) and end tag (closing tag), with the content inserted in between.
HTML tags are element names surrounded by angle brackets and you don’t see them in the browser window. Their purpose is to determine how the document is displayed in the browser. For that different attributes are added after the name of the start tag.
General formula for element can be written as:
<Tagname Attribute Attribute>Here is content</Tagname>
<p style=”text-align:right”>Lore ipsum…</p>
HTML elements with no content are called empty elements and they do not have an end tag. These kinds of elements are for example <br> (indicates a line break), <hr> (defines a thematic break) and <img> (indicates an image).
These elements can be written in two ways. Either the exact same way as the opening tags for other elements or by “closing” them in the opening tag by adding forward slash after tagname:
<Tagname Attribute Attribute>
<Tagname Attribute Attribute/>
<img src=”/live/wp-content/uploads/2016/landscape.jpg” alt=”Landscape” style=”width:128px;height:128px”/>
Last element to know is the one which lets write comments inside HTML code. This has only one porpose – to make notes. It does not influence how the HTML file is shown in browser.
<!–Here you can type your comment–>
Example: <!–I will had here some photos later–>
All HTML documents consist of nested HTML elements. This means that elements can contain elements.
Let us take the example where we see on the web page this text:
First sentence. Second sentence.
If we would check out how this paragraph lie in HTML document, we could see four elements inside one an other:
<p><strong>First sentence.</strong>Second sentence.</p>
The <html> element defines the whole HTML document, the <body> element defines the document body and contains all the visible page content (content we can see in the web browser), the <p> element defines a paragraph and the <strong> element defines important text which is typically displayed in bold.
Before we dive into the <body> element, let us look more closely HTML attributes