A news post would be like
<article itemscope itemtype="http://schema.org/NewsArticle">
<h1 itemprop="headline">Awesome News</h1>
<div itemprop="articleBody">
bla bla bla...
</div>
</article>
What if I would like to include related news and markup them?
<ul>
<li>Related News 1</li>
<li>Related News 2</li>
<li>Related News 3</li>
</ul>
Try using element from WebPage itemtype (from: http://schema.org/WebPage, I know that You are using NewsArticle in this case, but I used Article for this example):
<div itemscope itemtype="http://schema.org/Article">
<span itemprop="name">How to Tie a Reef Knot</span>
by <span itemprop="author">John Doe</span>
This article has been tweeted 1203 times and contains 78 user comments.
<meta itemprop="interactionCount" content="UserTweets:1203" />
<meta itemprop="interactionCount" content="UserComments:78" />
</div>
<ul itemscope itemtype="http://schema.org/WebPage">
<li itemprop="relatedLink">Related News 1</li>
<li itemprop="relatedLink">Related News 2</li>
<li itemprop="relatedLink">Related News 3</li>
</ul>
Google Webmaster Tools sees it like this:
Alternatively You can do it like this:
<ul itemscope itemtype="http://schema.org/WebPage">
<li>Related News 1</li>
<li>Related News 2</li>
<li>Related News 3</li>
</ul>
And Google sees it like this then:
Related
I'm experiencing problems on why the hero section which I'm building isn't responsive, I'm using bootstrap and the grid system, the image I the hero section is responsive as I'm using the class img-fluid but the text and buttons don't follow suit I'm really confused to where I've gone wrong and help would be massively appreciated as I've been banging my head against a wall for an hour on end now.
here's the HTML:
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<img src="assets/img/logo.png">
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="">-->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Team</li>
<li class="drop-down">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="drop-down">Deep Drop Down
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<div class="container" data-aos="zoom-out" data-aos-delay="100">
<div class="hero-image">
<img src="assets/img/hero-img.png" class="img-fluid">
</div>
<div class="hero-textbox">
<h2 class="hero-heading-text">WINNING WITH DATA:<br>
CRM AND ANALYTICS FOR THE BUSINESS OF <br>SPORTS</h2>
<p class="hero-description-text">Suitable for beginners, intermediaries or digital marketers who haven't yet included data-driven decision making in their approach. Our book provides a fantastic start for those looking to understand the role of CRM and Business Intelligence for the sports industry.</p>
<span class="glyphicon glyphicon-shopping-cart"></span> Order Now
</div>
</div>
</section><!-- End Hero -->
here's the CSS:
https://pastebin.com/F3ghpywz
Thank you so much in advance for helping me solve this problem.
Kind regards,
Josh.
I am developing an ASP.NET MVC web application using visual studio community 2017.
I've been working for a few days with the html and everything work fine until yesterday that after adding some html code to the layout.cshtml file for some reason google chrome (neither IE) will show the elements.
The weird thing is that when I use the"show source code" option I can see that code but if I use the "developer tools" chrome won't show it.
The code is a regular navbar, with no css style yet, and I've rebuild several times the solution with no success.
<nav>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
Any idea what is going wrong?
EDIT: The whole .cshtml code
<!DOCTYPE html>
<html lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - website title</title>
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="collapsed-menu-container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="header-title">
<span class="header-title-span">website title</span>
<p class="header-subtitle">text</p>
</div>
<div class="shopping-bag">
<object data='~/Assets/Icons/shopping-bag.svg' type='image/svg+xml' width='20' height='20' />
</div>
</header>
<nav>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
<div>
#RenderBody()
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
Im trying to learn html and i ran into trouble,
This is the homepage:
<head>
<title>title</title>
</head>
<body>
<h1>Welcome to ....</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Homepage</h2>
<p>Homepage content...</p>
</body>
The second page:
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to ...</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Page 2</h2>
<p>Page 2 content...</p>
</body>
The Third page:
<head>
<title>Page 3</title>
</head>
<body>
<h1>Welcome to ...</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Page 3</h2>
<p>Page 3 content...</p>
</body>
I saved them in one folder on my desktop but for some reason whenever I click the 2nd or 3rd page links in chrome it just tells me that the webpage is not found. Please help.
Thanks for the help everyone,
I had spaces in the file names, it got fixed when i removed them. The names must be exactly the same as the .html href links in the files.
I have been browsing and searching around for sometime now to find a working example of a picture in one column and text with bullet points in the other.
This is my result so far.
As you can see the text doesn't start at the top as I want it to.
<div style="overflow:hidden;position:relative;display:table">
<div style="display:table-cell;background:red">
<img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" />
</div>
<div style="display:table-cell;width:100%;background:grey;">
<p>
Here is some text about how awesome Spongebob squarepants is!
</p>
<ul>
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Views
<ul>
<li>Tickets</li>
</ul>
</li>
<li>Customers
<ul>
<li>List of Customers</li>
</ul>
</li>
<li>Conditional
<ul>
<li>Admin extension</li>
</ul>
</li>
</ul>
</div>
Link to example in Fiddle
Try this
Fiddle Demo
<div style="overflow:hidden;position:relative;display:inline-flex">
just change the display css to inline-flex
try this.. I think this is what you're looking for.
<div style="float:left; background:red">
<img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" />
</div>
<div style="background:grey; float:left;">
<p>
Here is some text about how awesome Spongebob squarepants is!
</p>
<ul>
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Views
<ul>
<li>Tickets</li>
</ul>
</li>
<li>Customers
<ul>
<li>List of Customers</li>
</ul>
</li>
<li>Conditional
<ul>
<li>Admin extension</li>
</ul>
</li>
</ul>
</div>
How about you actually use a table if you want the get that effect.
Try this html in the snippet:
<table >
<tr>
<td style="display:table-cell;background:red">
<img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" />
</td>
<td style="display:table-cell;width:100%;background:grey;">
<p>
Here is some text about how awesome Spongebob squarepants is!
</p>
<ul>
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Views
<ul>
<li>Tickets</li>
</ul>
</li>
<li>Customers
<ul>
<li>List of Customers</li>
</ul>
</li>
<li>Conditional
<ul>
<li>Admin extension</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
You gonna have to change your divs into table and td respectively and add your td items (img and text containers) into tr.
If you have some constraints about this solution let me know.
ADVICE:
don't use inline styles, your markup gets really messy and it's difficult to make any changes later on.
I am trying to create an appropriate semantic markup for header section of design below.
Please header section of this bootstrap theme (Sorry i couldn't add image due to reputation restriction)
Please see code below
<header role="banner">
Skip to main content
<div class="utility-bar">
<ul>
<li><span>Mail</span>
</li>
<li><span>Number</span>
</li>
</ul>
<ul>
<li><span>Social Link 1</span>
</li>
<li><span>Social Link 2</span>
</li>
<li><span>Social Link 3</span>
</li>
<li><span>Social Link 4</span>
</li>
<li><span>Social Link 5</span>
</li>
</ul>
</div>
<a href="#">
<img src="img/logo.svg">
</a>
<nav role="navigation">
<ul>
<li>
Main 1
<ul>
<li>SubMenu 1
</li>
<li>SubMenu 2
</li>
<li>SubMenu 3
</li>
<li>SubMenu 4
</li>
<li>SubMenu 5
</li>
</ul>
</li>
<li>Main 2</li>
<li>Main 3</li>
<li>Main 4</li>
<li>Main 5</li>
<li>Main 6</li>
</ul>
<button title="Show / Hide menu">
<img src="burger.png" alt="Show / Hide menu">
</button>
</nav>
</header>
From reading articles about semantics in sites like HTML5Doctor and posts in stackoverflow. I have the following doubts.
Where should we place the "utility bar"/ "Top Bar", which contains
the social links and contact details? Should we place it in aside
outside the header tag, as it is tangential content to the site.
Is the trick of using H1 for logo with text-indent, not advised
anymore?
Where should we place the burger icon for responsive view. Some doesn't place it in the markup , but add it using javascript. It is the recommended way. if we place it in markup, where is the appropriate place.